Font size sets the em box height of text. Line height and spacing usually scale with it.
When to use
Hierarchy: larger for headings, smaller for captions. Pair with weight and color, not weight alone.
Class combinations
Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.
Type scale step
text-sm leading-relaxed text-muted-foregroundSize, line-height, and color work together. Muted color + relaxed leading reads better at small sizes.
Display heading
text-3xl font-semibold tracking-tight text-balanceLarge size with tight tracking and balanced wrapping, headings need weight and spacing, not size alone.
Summary
- font-size sets the em square for the element. line-height, padding in em, and rem-based descendants all inherit context.
- Use a type scale (sm, base, lg, xl) instead of one-off pixel values so hierarchy stays consistent across the product.
- Body text at 16px is the accessibility floor on mobile. Smaller sizes trigger iOS input zoom on focus.
- Line-height should stay unitless (1.5, 1.625) so it scales when font-size changes.
- Tailwind text-* utilities bundle font-size and default line-height. Override with leading-* when rhythm needs tuning.