Typography Utilities
Font Weight
| Class | CSS Rule | Description |
|---|---|---|
Fw-1 | font-weight: 100; | Thin |
Fw-2 | font-weight: 200; | Extra Light |
Fw-3 | font-weight: 300; | Light |
Fw-4 | font-weight: 400; | Normal (Regular) |
Fw-5 | font-weight: 500; | Medium |
Fw-6 | font-weight: 600; | Semi Bold |
Fw-7 | font-weight: 700; | Bold |
Fw-8 | font-weight: 800; | Extra Bold |
Fw-9 | font-weight: 900; | Black (Heavy) |
Font Size
| Class | CSS Rule | Description |
|---|---|---|
Fs-1 | font-size: var(--F1); | Extra small text |
Fs-2 | font-size: var(--F2); | Small text |
Fs-3 | font-size: var(--F3); | Base text |
Fs-4 | font-size: var(--F4); | Medium text |
Fs-5 | font-size: var(--F5); | Large text |
Fs-6 | font-size: var(--F6); | Extra large text |
Fs-7 | font-size: var(--F7); | 2x large text |
Fs-8 | font-size: var(--F8); | 3x large text |
Fs-9 | font-size: var(--F9); | 4x large display text |
Font Style
| Class | CSS Rule | Description |
|---|---|---|
Fst-normal | font-style: normal; | Reset to normal |
Fst-italic | font-style: italic; | Italicize text |
Fst-oblique | font-style: oblique; | Oblique text style |
Text Transform
| Class | CSS Rule | Description |
|---|---|---|
Tt-uppercase | text-transform: uppercase; | Make all letters uppercase |
Tt-lowercase | text-transform: lowercase; | Make all letters lowercase |
Tt-capitalize | text-transform: capitalize; | Capitalize each word |
Tt-capitalize-once | ::first-letter { text-transform: uppercase; } | Capitalize only first letter |
Text Align
| Class | CSS Rule | Description |
|---|---|---|
Ta-start | text-align: start; | Align to start |
Ta-center | text-align: center; | Center align text |
Ta-end | text-align: end; | Align to end |
Ta-justify | text-align: justify; | Justify text |
Text Decoration
| Class | CSS Rule | Description |
|---|---|---|
Td-under | text-decoration: underline; | Underline text |
Td-over | text-decoration: overline; | Overline text |
Td-through | text-decoration: line-through; | Strikethrough |
Line Height
| Class | CSS Rule | Description |
|---|---|---|
Tl-1 | line-height: 1; | Very tight line height |
Tl-2 | line-height: 1.25; | Tight line height |
Tl-3 | line-height: 1.5; | Normal line height |
Tl-4 | line-height: 1.75; | Loose line height |
Tl-5 | line-height: 2; | Very loose line height |