Typography
Font choices, sizing, and hierarchy that make your content readable.
Typography is the single biggest factor in whether your site feels professional or amateur. Good news: the rules are simple.
Font size
The most common mistake is text that's too small.
- Body text: 16px or larger - Small text (captions): 14px minimum - Never go below 12px for anything
- Body text at 13px or 14px - Captions at 10px or 11px - Users pinching to zoom on mobile
Body text below 16px drops readability scores significantly. This is one of the easiest fixes.
Heading hierarchy
Headings should form a clear visual ladder. Each level should be noticeably different.
- h1: 36-48px, bold — page title - h2: 28-32px, bold — main sections - h3: 20-24px, semibold — subsections - Body: 16-18px, regular
- h1 and h2 are the same size - h3 is barely different from body text - No visual distinction between levels
Rule of thumb: Each heading level should be at least 1.25x the size of the next level down.
Line height (leading)
Line height is the space between lines of text. Too tight and text feels cramped. Too loose and it falls apart.
- Body text: line-height of 1.5 to 1.7 - Headings: line-height of 1.1 to 1.3 - Short labels: line-height of 1 to 1.2
- Body text with line-height of 1.0 (lines touching) - Or line-height of 2.5 (text floating apart)
Line length
Long lines of text are hard to read. Your eyes lose track of which line comes next.
- 50-75 characters per line - Max container width of ~700px for text content - Paragraphs feel natural to read
- Text stretching edge to edge on wide screens - 120+ characters per line - Eyes get lost moving to the next line
Extremely long line lengths hurt readability scores. Wrap text content in a max-width container.
Font choice
Stick to well-known, web-safe fonts. Fancy fonts are usually harder to read.
- System fonts (Inter, Geist, Noto Sans) - One font family for body, one for headings (max 2) - Consistent weight usage (regular + bold)
- 4+ different font families - Decorative fonts for body text - Inconsistent weights across the page