Typography Cheatsheet
A quick reference for the most common typography utilities.
Font family & size
| Goal | Classes |
|---|
| Sans / serif / mono | font-sans, font-serif, font-mono |
| Small text | text-sm |
| Base text | text-base |
| Heading | text-2xl … text-6xl |
| Exact size | text-[15px] |
Weight & style
| Goal | Classes |
|---|
| Normal | font-normal |
| Medium | font-medium |
| Bold | font-bold |
| Extra bold | font-extrabold |
| Italic | italic |
| No italic | not-italic |
Alignment
| Goal | Classes |
|---|
| Left | text-left |
| Center | text-center |
| Right | text-right |
| Justify | text-justify |
Color & decoration
| Goal | Classes |
|---|
| Muted text | text-gray-500 |
| Primary text | text-sky-600 |
| With opacity | text-gray-900/50 |
| Underline | underline |
| Line through | line-through |
| Uppercase | uppercase |
Line height & spacing
| Goal | Classes |
|---|
| Tight | leading-tight |
| Loose | leading-loose |
| No line height | leading-none |
| Wider letters | tracking-wide |
| Narrower letters | tracking-tight |
Wrapping & overflow
| Goal | Classes |
|---|
| Single-line ellipsis | truncate |
| Balanced heading | text-balance |
| No wrap | text-nowrap |
| Preformatted | whitespace-pre |
Long-form content
| Goal | Classes |
|---|
| Styled article | prose prose-lg |
| Gray tint | prose-neutral |
| Dark mode | dark:prose-invert |
TL;DR
- Size:
text-xs … text-9xl or text-[15px]. - Weight:
font-bold, font-semibold, font-medium. - Color:
text-sky-600, opacity /50. - Articles:
prose from the typography plugin.