Font Size
Utilities to change an element's font-size.
Classes
Size | Class | Output |
---|---|---|
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>