Font Size
Utility classes for setting an element's font size.
Variables
Dialtone provides Less and CSS variables for each font-size. This is useful if you're writing custom CSS and an immutable class isn't required or desired.
| Size | CSS Var | Deprecated CSS Var | Less Var | Deprecated Less Var | Output |
|---|---|---|---|---|---|
| 10px | var(--fs10) | var(--headline--xs) | @fs10 | @headline--xs | 1rem |
| 11px | var(--fs11) | var(--text--xxs) | @fs11 | @text--xxs | 1.1rem |
| 12px | var(--fs12) | var(--text--xs) | @fs12 | @text--xs | 1.2rem |
| 14px | var(--fs14) | var(--text--sm) | @fs14 | @text--sm | 1.4rem |
| 16px | var(--fs16) | var(--text--md) | @fs16 | @text--md | 1.6rem |
| 18px | var(--fs18) | var(--text--lg) | @fs18 | @text--lg | 1.8rem |
| 20px | var(--fs20) | var(--text--xl) | @fs20 | @text--xl | 2rem |
| 24px | var(--fs24) | var(--headline--sm) | @fs24 | @headline--sm | 2.4rem |
| 28px | var(--fs28) | N/A | @fs28 | N/A | 2.8rem |
| 32px | var(--fs32) | var(--headline--md) | @fs32 | @headline--md | 3.2rem |
| 36px | var(--fs36) | var(--headline--lg) | @fs36 | @headline--lg | 3.6rem |
| 42px | var(--fs42) | var(--headline--xl) | @fs42 | @headline--xl | 4.2rem |
| 48px | var(--fs48) | N/A | @fs48 | N/A | 4.8rem |
| 54px | var(--fs54) | N/A | @fs54 | N/A | 5.4rem |
Size Classes
Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. These new classes abandon the previous "t-shirt" sizing metaphor in favor of explicitly stating the font-size. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.
| Size | Class | Deprecated Class | Output |
|---|---|---|---|
| 10px | .d-fs10 | .d-headline--xs | font-size: var(--fs10) !important; |
| 11px | .d-fs11 | .d-text--xxs | font-size: var(--fs11) !important; |
| 12px | .d-fs12 | .d-text--xs | font-size: var(--fs12) !important; |
| 14px | .d-fs14 | .d-text--sm | font-size: var(--fs14) !important; |
| 16px | .d-fs16 | .d-text--md | font-size: var(--fs16) !important; |
| 18px | .d-fs18 | .d-text--lg | font-size: var(--fs18) !important; |
| 20px | .d-fs20 | .d-text--xl | font-size: var(--fs20) !important; |
| 24px | .d-fs24 | .d-headline--sm | font-size: var(--fs24) !important; |
| 28px | .d-fs28 | N/A | font-size: var(--fs28) !important; |
| 32px | .d-fs32 | .d-headline--md | font-size: var(--fs32) !important; |
| 36px | .d-fs36 | .d-headline--lg | font-size: var(--fs36) !important; |
| 42px | .d-fs42 | .d-headline--xl | font-size: var(--fs42) !important; |
| 48px | .d-fs48 | N/A | font-size: var(--fs48) !important; |
| 54px | .d-fs54 | N/A | font-size: var(--fs54) !important; |
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="d-fs10">…</p>
<p class="d-fs11">…</p>
<p class="d-fs12">…</p>
<p class="d-fs14">…</p>
<p class="d-fs16">…</p>
<p class="d-fs18">…</p>
<p class="d-fs20">…</p>
<p class="d-fs24">…</p>
<p class="d-fs28">…</p>
<p class="d-fs32">…</p>
<p class="d-fs36">…</p>
<p class="d-fs42">…</p>
<p class="d-fs48">…</p>
<p class="d-fs54">…</p>Headline Classes
Starting in v5.8.0, Dialtone abandoned the previous "t-shirt" sizing metaphor in favor of explicitly stating the font-size. While these single-purpose classes provide a better idea of the font-size you will see, they didn't include all CSS properties that the previous .d-headline--{size} classes provided. The following classes do provide those properties.
| Size | Class | Deprecated Class | Output |
|---|---|---|---|
| 10px | .d-headline10 | .d-headline--xs | font-size: var(--fs10) !important; font-weight: bold !important; text-transform: uppercase !important; |
| 24px | .d-headline24 | .d-headline--sm | font-size: var(--fs24) !important; font-weight: bold !important; |
| 28px | .d-headline28 | N/A | font-size: var(--fs28) !important; font-weight: bold !important; |
| 32px | .d-headline32 | .d-headline--md | font-size: var(--fs32) !important; font-weight: bold !important; |
| 36px | .d-headline36 | .d-headline--lg | font-size: var(--fs36) !important; font-weight: bold !important; |
| 42px | .d-headline42 | .d-headline--xl | font-size: var(--fs42) !important; font-weight: bold !important; |
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="d-headline10">…</p>
<p class="d-headline24">…</p>
<p class="d-headline28">…</p>
<p class="d-headline32">…</p>
<p class="d-headline36">…</p>
<p class="d-headline42">…</p>