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>