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;
.d-fs10

The quick brown fox jumps over the lazy dog.

.d-fs11

The quick brown fox jumps over the lazy dog.

.d-fs12

The quick brown fox jumps over the lazy dog.

.d-fs14

The quick brown fox jumps over the lazy dog.

.d-fs16

The quick brown fox jumps over the lazy dog.

.d-fs18

The quick brown fox jumps over the lazy dog.

.d-fs20

The quick brown fox jumps over the lazy dog.

.d-fs24

The quick brown fox jumps over the lazy dog.

.d-fs28

The quick brown fox jumps over the lazy dog.

.d-fs32

The quick brown fox jumps over the lazy dog.

.d-fs36

The quick brown fox jumps over the lazy dog.

.d-fs42

The quick brown fox jumps over the lazy dog.

.d-fs48

The quick brown fox jumps over the lazy dog.

.d-fs54

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;
.d-headline10

The quick brown fox jumps over the lazy dog.

.d-headline24

The quick brown fox jumps over the lazy dog.

.d-headline28

The quick brown fox jumps over the lazy dog.

.d-headline32

The quick brown fox jumps over the lazy dog.

.d-headline36

The quick brown fox jumps over the lazy dog.

.d-headline42

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>