Text
Sizes
Utility classes for changing the font-size of text.
| Utility | Rem | Px | Example |
|---|---|---|---|
| text-11 | 2.5rem | 40px | The quick brown fox jumped over the lazy dog. |
| text-10 | 2.25rem | 36px | The quick brown fox jumped over the lazy dog. |
| text-9 | 2rem | 32px | The quick brown fox jumped over the lazy dog. |
| text-8 | 1.75rem | 28px | The quick brown fox jumped over the lazy dog. |
| text-7 | 1.5rem | 24px | The quick brown fox jumped over the lazy dog. |
| text-6 | 1.25rem | 20px | The quick brown fox jumped over the lazy dog. |
| text-5 | 1.125rem | 18px | The quick brown fox jumped over the lazy dog. |
| text-4 | 1rem | 16px | The quick brown fox jumped over the lazy dog. |
| text-3 | 0.875rem | 14px | The quick brown fox jumped over the lazy dog. |
| text-2 | 0.75rem | 12px | The quick brown fox jumped over the lazy dog. |
| text-1 | 0.625rem | 10px | The quick brown fox jumped over the lazy dog. |
Copied!
<span class="text-11">The quick brown fox jumped over the lazy dog.</span>
<span class="text-10">The quick brown fox jumped over the lazy dog.</span>
<span class="text-9">The quick brown fox jumped over the lazy dog.</span>
<span class="text-8">The quick brown fox jumped over the lazy dog.</span>
<span class="text-7">The quick brown fox jumped over the lazy dog.</span>
<span class="text-6">The quick brown fox jumped over the lazy dog.</span>
<span class="text-5">The quick brown fox jumped over the lazy dog.</span>
<span class="text-4">The quick brown fox jumped over the lazy dog.</span>
<span class="text-3">The quick brown fox jumped over the lazy dog.</span>
<span class="text-2">The quick brown fox jumped over the lazy dog.</span>
<span class="text-1">The quick brown fox jumped over the lazy dog.</span>Weights
Utility classes for changing the font-weight of text.
| Utility | Value | Example |
|---|---|---|
| text-weight-lighter | lighter | The quick brown fox jumped over the lazy dog. |
| text-weight-light | 300 | The quick brown fox jumped over the lazy dog. |
| text-weight-normal | 400 | The quick brown fox jumped over the lazy dog. |
| text-weight-semi-bold | 500 | The quick brown fox jumped over the lazy dog. |
| text-weight-bold | 700 | The quick brown fox jumped over the lazy dog. |
| text-weight-bolder | 900 | The quick brown fox jumped over the lazy dog. |
Copied!
<span class="text-weight-lighter"
>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-light"
>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-normal"
>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-semi-bold"
>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-bold"
>The quick brown fox jumped over the lazy dog.</span
>
<span class="text-weight-bolder"
>The quick brown fox jumped over the lazy dog.</span
>Styles
Utility classes for changing the font-style of text.
| Utility | Value | Example |
|---|---|---|
| text-italic | italic | The quick brown fox jumped over the lazy dog. |
| text-monospace | SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace | The quick brown fox jumped over the lazy dog. |
Copied!
<span class="text-italic">The quick brown fox jumped over the lazy dog.</span>
<span class="text-monospace"
>The quick brown fox jumped over the lazy dog.</span
>