Notes on web typography
A few rules of thumb I keep coming back to when styling text for the web.
Measure
Keep lines between 45 and 75 characters. On this site the content column is 42rem, which lands around 70 characters for body text.
Scale
You need far fewer sizes than you think:
| Role | Size | Weight |
|---|---|---|
| Post title | 1.7rem | 700 |
| Section head | 1.25rem | 600 |
| Body | 1rem | 400 |
| Meta | 0.88rem | 400 |
Rhythm
Line height around 1.75 for body text, tighter (1.3) for headings. Whitespace between blocks should come from margins on one side only, or spacing collapses unpredictably.
Color
Pure black on pure white is harsh. Soften both a step: near-black #1c1c1e on white, or light gray #d6d6d9 on near-black in dark mode.