Typography: serifs, weight, readability
Serif, sans-serif, weight, line-height: the basic typography vocabulary for choosing and pairing fonts with confidence.
Serif vs. sans-serif
| Type | Characteristic | Perception |
|---|---|---|
| Serif | Small strokes at the ends of letters | Classic, formal, associated with print |
| Sans-serif | Clean strokes, no finishing details | Modern, minimal, associated with screens |
The belief that serif is "always" more readable in print and sans-serif "always" more readable on screen has been largely nuanced by recent research — font quality and size often matter more than the serif/sans-serif category itself.
Weight
Thin < Light < Regular < Medium < Semibold < Bold < Black
The higher the weight, the thicker a letter's strokes — useful for creating visual hierarchy without switching fonts.
Line-height and spacing
| Term | Definition |
|---|---|
| Line-height (leading) | Vertical space between lines of text |
| Kerning | Adjusting the space between two specific letters |
| Tracking | Uniform spacing applied across a whole block of text |
A line-height of roughly 1.4 to 1.6 times the font size generally improves readability for long-form text — a line-height that's too tight (1.0-1.1) tires the eye over several paragraphs.
Pairing two fonts
A classic, safe pairing: a font with character for headings, and a different but neutral font (optimised for readability) for body text — avoid pairing two very similar fonts, which reads as a mistake rather than an intentional choice.
Thanks for the feedback!