Web Typography Basics: Font Size, Line Height, and Readability
Typography on the web is not just choosing a font. Spacing between lines, line length, and text size all determine whether reading feels effortless or exhausting.
Body Font Size
Browser default is 16px. Most well-designed sites use 15–18px for body text. Below 14px is uncomfortable for extended reading on desktop. On mobile, 15–16px is standard.
Body: 16px (1rem) Caption: 13–14px H1: 32–40px H2: 24–28px H3: 18–20px
Line Height
For body text: 1.5–1.75. For headings: 1.1–1.3. Specify as unitless multiplier (line-height: 1.6), not pixels — it scales proportionally with font size.
Measure (Line Length)
Research shows 45–75 characters per line is optimal. Below 45: too much eye movement. Above 90: readers lose their place at line breaks. Use max-width: 65ch as a practical shorthand.
System Font Stacks
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
San Francisco on macOS/iOS, Segoe UI on Windows, Roboto on Android — all native, zero download cost.
Letter Spacing
Body text: default (0). Large headings: slight negative (−0.3 to −0.8px). Uppercase labels: positive spacing (0.5–1px) — uppercase characters crowd at default spacing.