Font Size
Utilities for controlling the font size of an element.
| Class | Properties |
|---|---|
| text-7xs | font-size: 7px; line-height: 0.7rem; |
| text-6xs | font-size: 8px; line-height: 0.7rem; |
| text-5xs | font-size: 9px; line-height: 0.85rem; |
| text-4xs | font-size: 10px; line-height: 0.85rem; |
| text-3xs | font-size: 11px; line-height: 0.9rem; |
| text-xs | font-size: 12px; line-height: 1rem; |
| text-sm | font-size: 13px; line-height: 1rem; |
| text-base | font-size: 14px; line-height: 1.25rem; |
| text-md | font-size: 14px; line-height: 1.25rem; |
| text-lg | font-size: 15px; line-height: 1.25rem; |
| text-xl | font-size: 16px; line-height: 1.5rem; |
| text-2xl | font-size: 18px; line-height: 1.75rem; |
| text-3xl | font-size: 22px; line-height: 1.75rem; |
| text-4xl | font-size: 24px; line-height: 2rem; |
| text-4.5xl | font-size: 26px; line-height: 1.625rem; |
| text-5xl | font-size: 28px; line-height: 2.25rem; |
| text-6xl | font-size: 2.25rem; line-height: 2.5rem; |
| text-7xl | font-size: 3rem; line-height: 1; |
| text-8xl | font-size: 3.75rem; line-height: 1; |
| text-9xl | font-size: 4.5rem; line-height: 1; |
| text-10xl | font-size: 6rem; line-height: 1; |
| text-11xl | font-size: 8rem; line-height: 1; |
| text-h1 | font-size: 28px; line-height: 1.2; font-weight: 300; |
| text-h2 | font-size: 24px; line-height: 1.3; font-weight: 300; |
| text-h3 | font-size: 22px; line-height: 1.3; font-weight: 300; |
| text-h4 | font-size: 18px; line-height: 1.35; font-weight: 400; |
| text-h5 | font-size: 16px; line-height: 1.35; font-weight: 400; |
| text-h6 | font-size: 14px; line-height: 1.4; font-weight: 400; |
| text-txt-xs | font-size: 12px; line-height: 1.35; font-weight: 400; |
| text-txt-sm | font-size: 13px; line-height: 1.4; font-weight: 400; |
| text-txt-md | font-size: 14px; line-height: 1.4; font-weight: 400; |
| text-txt-lg | font-size: 15px; line-height: 1.4; font-weight: 400; |
Setting the font size
Use the text-* utilities to control the font size of an element.
html
<p class="text-7xs ...">The quick brown fox ...</p>
<p class="text-sm ...">The quick brown fox ...</p>
<p class="text-base ...">The quick brown fox ...</p>
<p class="text-md ...">The quick brown fox ...</p>
<p class="text-lg ...">The quick brown fox ...</p>
<p class="text-xl ...">The quick brown fox ...</p>
<p class="text-2xl ...">The quick brown fox ...</p>
<p class="text-h3 ...">The quick brown fox ...</p>
<p class="text-h2 ...">The quick brown fox ...</p>
<p class="text-h1 ...">The quick brown fox ...</p>