Web Readability: Typography, Spacing, and Content Layout That Works

Users don't read websites — they scan. Research from the Nielsen Norman Group shows that 79% of users scan pages rather than reading word by word. If your text is hard to scan, users leave. Period.

Readability isn't just about aesthetics. It affects time on page, comprehension, trust, and ultimately conversions. A study by Google found that visually complex websites are consistently rated as less beautiful and less trustworthy within 50 milliseconds of exposure. Clean, readable typography is one of the fastest ways to increase trust.

The single most common readability mistake is text that's too small. Here are the sizes that work:

• Body text — 16px minimum, 18px ideal for content-heavy sites. The browser default is 16px for a reason. Never go below it for paragraph text.
• H1 headings — 32-48px on desktop, scaling down to 28-36px on mobile.
• H2 headings — 24-32px on desktop, 22-28px on mobile.
• Small text (captions, labels) — 14px minimum. Below 12px, text becomes illegible for many users.
• Mobile scaling — Don't shrink body text below 16px on mobile. If anything, mobile text should be the same size or slightly larger than desktop, because the screen is held further from the eyes at an angle.

Use rem units instead of px for font sizes. This respects user browser settings — if someone has set their default font size larger for accessibility reasons, rem-based text will scale accordingly.

Line height (leading) controls the vertical space between lines of text. Too tight, and lines blur together. Too loose, and the text feels disconnected:

• Body text — Use a line height of 1.5 to 1.7 (relative to font size). For 16px text, that's 24-27px of line height. This is the range that maximizes readability for most typefaces.
• Headings — Tighter line height works for headings: 1.1 to 1.3. Large text needs less relative spacing because the characters are already visually distinct.
• Paragraph spacing — Add margin-bottom of 1em to 1.5em between paragraphs. This creates visual breaks that make scanning easier. Avoid using double line breaks (empty lines) inside paragraphs instead of proper margins.
• List item spacing — Add 0.25-0.5em of margin between list items. Tightly packed list items are harder to scan than paragraphs because each line starts with the same visual pattern.

Contrast ratio is the difference in luminance between text and its background. Low contrast text is one of the most widespread accessibility and readability failures on the web.

WCAG requirements (and practical minimums):

• Normal text (under 18px / 14px bold) — Minimum ratio of 4.5:1 (AA). Aim for 7:1 (AAA) when possible.
• Large text (18px+ / 14px+ bold) — Minimum ratio of 3:1 (AA).
• UI components and icons — Minimum ratio of 3:1 against adjacent colors.

Common violations: light gray text on white backgrounds (#999 on #fff is only 2.8:1 — fails AA). Placeholder text in inputs is frequently too low contrast. Colored text on colored backgrounds (blue on purple, green on gray) often fails.

Use tools like WebAIM's Contrast Checker or Chrome DevTools' built-in contrast checker (inspect an element, click the color swatch) to verify your ratios.

The "measure" in typography is the number of characters per line. Lines that are too wide make it hard to track from the end of one line to the start of the next. Lines that are too narrow cause constant line breaks that disrupt reading flow.

• Ideal measure — 50-75 characters per line for body text. 66 characters is often cited as the ideal. This translates to roughly 600-800px of content width at 16-18px font size.
• Implementation — Set max-width: 65ch on your text containers. The ch unit is based on the width of the "0" character, so 65ch gives approximately 65 characters per line regardless of font choice.
• Full-width pages — Even on wide layouts, constrain text content. A 1400px-wide content area is fine for grids and images, but text blocks within it should still be limited to ~65ch.
• Multi-column layouts — If using columns for text (rarely advisable on web), ensure each column maintains the 50-75 character measure.

Whitespace (negative space) is the empty space between and around elements. It's not "wasted space" — it's an active design tool that improves comprehension by up to 20% according to research from Wichita State University.

• Macro whitespace — The space between major page sections. Use generous padding (64-120px vertically) between sections. This creates visual breathing room and makes each section feel distinct.
• Micro whitespace — The space between text elements, list items, and within components. This includes line height, paragraph margins, and padding inside buttons and cards.
• Grouping with whitespace — Elements that are close together appear related (Gestalt principle of proximity). Use tighter spacing within groups and larger spacing between groups to create visual hierarchy without additional borders or backgrounds.
• Don't fear empty space — Cramming content into every pixel makes pages feel chaotic and overwhelming. Premium brands (Apple, Stripe, Linear) use abundant whitespace because it conveys quality and focus.