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.