Dialtone

Font Size

Utilities to change an element's font-size.

Classes

SizeClassOutput
10px.d-fs10
font-size: 1rem !important;
Aa
11px.d-fs11
font-size: 1.1rem !important;
Aa
12px.d-fs12
font-size: 1.2rem !important;
Aa
14px.d-fs14
font-size: 1.4rem !important;
Aa
16px.d-fs16
font-size: 1.6rem !important;
Aa
18px.d-fs18
font-size: 1.8rem !important;
Aa
20px.d-fs20
font-size: 2rem !important;
Aa
24px.d-fs24
font-size: 2.4rem !important;
Aa
28px.d-fs28
font-size: 2.8rem !important;
Aa
32px.d-fs32
font-size: 3.2rem !important;
Aa
36px.d-fs36
font-size: 3.6rem !important;
Aa
42px.d-fs42
font-size: 4.2rem !important;
Aa
48px.d-fs48
font-size: 4.8rem !important;
Aa
54px.d-fs54
font-size: 5.4rem !important;
Aa
10px.d-headline10
font-size: 1rem !important;
font-weight: var(--fw-bold) !important;
Aa
24px.d-headline24
font-size: 2.4rem !important;
font-weight: var(--fw-bold) !important;
Aa
28px.d-headline28
font-size: 2.8rem !important;
font-weight: var(--fw-bold) !important;
Aa
32px.d-headline32
font-size: 3.2rem !important;
font-weight: var(--fw-bold) !important;
Aa
36px.d-headline36
font-size: 3.6rem !important;
font-weight: var(--fw-bold) !important;
Aa
42px.d-headline42
font-size: 4.2rem !important;
font-weight: var(--fw-bold) !important;
Aa
48px.d-headline48
font-size: 4.8rem !important;
font-weight: var(--fw-bold) !important;
Aa
54px.d-headline54
font-size: 5.4rem !important;
font-weight: var(--fw-bold) !important;
Aa

Usage

Use d-{fs|headline}{n} to change an element's font-size.

<p class="d-fs14">...</p>
<p class="d-fs18">...</p>
<p class="d-fs24">...</p>
<p class="d-fs42">...</p>
<p class="d-headline36 d-lh1">...</p>
<p class="d-headline48 d-lh1">...</p>
<p class="d-headline54 d-lh1">...</p>
Last Updated: