CSS variables for font properties.
<dl>
<dt>Family</dt>
<dd>
<dl>
<dt>Sans</dt>
<dd class="demo-family--sans">
<p>
<kbd>var(--sans)</kbd> or
<kbd>var(--global-font-family--sans)</kbd>
</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<address>
ABCDEFGHIJKLMNOPQRSTUVWXYZ</br>
abcdefghijklmnopqrstuvwxyz</br>
0123456789</br>
</address>
</dd>
<dt>Serif</dt>
<dd class="demo-family--serif">
<p>
<kbd>var(--serif)</kbd> or
<kbd>var(--global-font-family--serif)</kbd>
</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<address>
ABCDEFGHIJKLMNOPQRSTUVWXYZ</br>
abcdefghijklmnopqrstuvwxyz</br>
0123456789</br>
</address>
</dd>
<dt>Mono</dt>
<dd class="demo-family--mono">
<p>
<kbd>var(--mono)</kbd> or
<kbd>var(--global-font-family--mono)</kbd>
</p>
<p>The quick brown fox jumps over the lazy dog.</p>
<address>
ABCDEFGHIJKLMNOPQRSTUVWXYZ</br>
abcdefghijklmnopqrstuvwxyz</br>
0123456789</br>
</address>
</dd>
</dl>
</dd>
</dl>
<dl>
<dt>Size</dt>
<dd>
<dl>
<dt>X Small</dt>
<dd>
<p><kbd>var(--global-font-size--x-small)</kbd></p>
<p class="demo-size--x-small">Veni, vidi, vici.
</p>
</dd>
<dt>Small</dt>
<dd>
<p><kbd>var(--global-font-size--small)</kbd></p>
<p class="demo-size--small">Veni, vidi, vici.
</p>
</dd>
<dt>Medium</dt>
<dd>
<p><kbd>var(--global-font-size--medium)</kbd></p>
<p class="demo-size--medium">Veni, vidi, vici.
</p>
</dd>
<dt>Large</dt>
<dd>
<p><kbd>var(--global-font-size--large)</kbd></p>
<p class="demo-size--large">Veni, vidi, vici.
</p>
</dd>
<dt>X Large</dt>
<dd>
<p><kbd>var(--global-font-size--x-large)</kbd></p>
<p class="demo-size--x-large">Veni, vidi, vici.
</p>
</dd>
<dt>XX Large</dt>
<dd>
<p><kbd>var(--global-font-size--xx-large)</kbd></p>
<p class="demo-size--xx-large">Veni, vidi, vici.
</p>
</dd>
<dt>XXX Large</dt>
<dd>
<p><kbd>var(--global-font-size--xxx-large)</kbd></p>
<p class="demo-size--xxx-large">Veni, vidi, vici.
</p>
</dd>
</dl>
</dl>
<dl>
<dt>Font Weights</dt>
<dd>
<dl>
<dt>Regular</dt>
<dd>
<p>
<kbd>var(--regular)</kbd>
</p>
<article class="demo-weight--regular demo-grid demo-grid--square demo-grid--boxes">
<figure class="demo-family--sans">
<p>Aa</p>
<figcaption>Regular<br />Sans</figcaption>
</figure>
<figure class="demo-family--sans demo-style--italic">
<p>Aa</p>
<figcaption>Regular<br />Sans</figcaption>
</figure>
<figure class="demo-family--serif">
<p>Aa</p>
<figcaption>Regular<br />Serif</figcaption>
</figure>
<figure class="demo-family--serif demo-style--italic">
<p>Aa</p>
<figcaption>Regular<br />Serif</figcaption>
</figure>
<figure class="demo-family--mono">
<p>Aa</p>
<figcaption>Regular<br />Mono</figcaption>
</figure>
<figure class="demo-family--mono demo-style--italic">
<p>Aa</p>
<figcaption>Regular<br />Mono</figcaption>
</figure>
</article>
</dd>
<dt>Medium</dt>
<dd>
<p>
<kbd>var(--medium)</kbd>
</p>
<article class="demo-weight--medium demo-grid demo-grid--square demo-grid--boxes">
<figure class="demo-family--sans">
<p>Aa</p>
<figcaption>Medium<br />Sans</figcaption>
</figure>
<figure class="demo-family--sans demo-style--italic">
<p>Aa</p>
<figcaption>Medium<br />Sans</figcaption>
</figure>
<figure class="demo-family--serif">
<p>Aa</p>
<figcaption>Medium<br />Serif</figcaption>
</figure>
<figure class="demo-family--serif demo-style--italic">
<p>Aa</p>
<figcaption>Medium<br />Serif</figcaption>
</figure>
<figure class="demo-family--mono">
<p>Aa</p>
<figcaption>Medium<br />Mono</figcaption>
</figure>
<figure class="demo-family--mono demo-style--italic">
<p>Aa</p>
<figcaption>Medium<br />Mono</figcaption>
</figure>
</article>
</dd>
<dt>Bold</dt>
<dd>
<p>
<kbd>var(--bold)</kbd>
</p>
<article class="demo-weight--bold demo-grid demo-grid--square demo-grid--boxes">
<figure class="demo-family--sans">
<p>Aa</p>
<figcaption>Bold<br />Sans</figcaption>
</figure>
<figure class="demo-family--sans demo-style--italic">
<p>Aa</p>
<figcaption>Bold<br />Sans</figcaption>
</figure>
<figure class="demo-family--serif">
<p>Aa</p>
<figcaption>Bold<br />Serif</figcaption>
</figure>
<figure class="demo-family--serif demo-style--italic">
<p>Aa</p>
<figcaption>Bold<br />Serif</figcaption>
</figure>
<figure class="demo-family--mono">
<p>Aa</p>
<figcaption>Bold<br />Mono</figcaption>
</figure>
<figure class="demo-family--mono demo-style--italic">
<p>Aa</p>
<figcaption>Bold<br />Mono</figcaption>
</figure>
</article>
</dd>
<dt>Black</dt>
<dd>
<p>
<kbd>var(--black)</kbd>
</p>
<article class="demo-weight--black demo-grid demo-grid--square demo-grid--boxes">
<figure class="demo-family--sans">
<p>Aa</p>
<figcaption>Black<br />Sans</figcaption>
</figure>
<figure class="demo-family--sans demo-style--italic">
<p>Aa</p>
<figcaption>Black<br />Sans</figcaption>
</figure>
<figure class="demo-family--serif">
<p>Aa</p>
<figcaption>Black<br />Serif</figcaption>
</figure>
<figure class="demo-family--serif demo-style--italic">
<p>Aa</p>
<figcaption>Black<br />Serif</figcaption>
</figure>
<figure class="demo-family--mono">
<p>Aa</p>
<figcaption>Black<br />Mono</figcaption>
</figure>
<figure class="demo-family--mono demo-style--italic">
<p>Aa</p>
<figcaption>Black<br />Mono</figcaption>
</figure>
</article>
</dd>
</dl>
</dd>
</dl>
/* To use settings */
.demo-family--mono { font-family: var(--mono); }
.demo-family--serif { font-family: var(--serif); }
.demo-family--sans { font-family: var(--sans); }
/* To style samples */
[class*="demo-family-"] address {
line-height: 1.4;
letter-spacing: 0.5em;
}
/* To use settings */
.demo-size--xxx-large { font-size: var(--global-font-size--xxx-large); }
.demo-size--xx-large { font-size: var(--global-font-size--xx-large); }
.demo-size--x-large { font-size: var(--global-font-size--x-large); }
.demo-size--large { font-size: var(--global-font-size--large); }
.demo-size--medium { font-size: var(--global-font-size--medium); }
.demo-size--small { font-size: var(--global-font-size--small); }
.demo-size--x-small { font-size: var(--global-font-size--x-small); }
/* To style samples */
[class*="demo-family-"] div { letter-spacing: 0.5em; }
/* To style samples */
.demo-style--italic { font-style: italic; }
/* To use settings */
.demo-weight--regular { font-weight: var(--regular); }
.demo-weight--medium { font-weight: var(--medium); }
.demo-weight--bold { font-weight: var(--bold); }
.demo-weight--black { font-weight: var(--black); }
/* To style samples */
.demo-grid p {
font-size: var(--global-font-size--xxx-large);
}
.demo-grid figure {
display: flex;
flex-direction: column;
}
.demo-grid figure p {
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
{
"shouldSkipPattern": true,
"globalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.demo.css"
},
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.base.css"
}
],
"cmsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.cms.css"
}
],
"docsStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.docs.css"
}
],
"portalStyles": [
{
"isInternal": true,
"layer": "base",
"path": "/assets/core-styles.portal.css"
}
],
"subdir": "settings",
"shouldLoadCMS": true,
"shouldLoadBootstrap": true
}