Loading lessons...
Font Family & Sizing
Font Family & Sizing
Typography controls the look of your text: family, size, weight, and more.
Font family
| Class | CSS |
|---|---|
font-sans | sans-serif stack |
font-serif | serif stack |
font-mono | monospace stack |
Customize or add families in @theme:
@theme {
--font-display: "Satoshi", "sans-serif";
}Font size
Use size classes for both size and line-height:
| Class | Size / line-height |
|---|---|
text-xs | 0.75rem / 1rem |
text-sm | 0.875rem / 1.25rem |
text-base | 1rem / 1.5rem |
text-lg | 1.125rem / 1.75rem |
text-xl | 1.25rem / 1.75rem |
text-2xl … text-9xl | up to 8rem |
Or use a fixed size or arbitrary value:
<p class="text-2xl">Heading</p>
<p class="text-[15px]">Fixed size</p>Font weight
font-thin (100) to font-black (900):
<h1 class="font-bold">Bold heading</h1>font-medium(500),font-semibold(600),font-bold(700),font-extrabold(800),font-black(900).font-normal(400) resets.
Letter spacing & line height
tracking-tighter,tracking-tight,tracking-normal,tracking-wide,tracking-wider,tracking-widest.leading-<n>:leading-6(1.5rem),leading-none(1),leading-tight(1.25),leading-snug,leading-normal,leading-relaxed,leading-loose.
TL;DR
font-sans,font-serif,font-monochoose families.text-xs…text-9xlsize text (with line-height).font-bold,font-mediumset weight.tracking-,leading-tune spacing.