What is web typography?

Web typography is the practice of setting type for screens using CSS — choosing sizes, line lengths, contrast, spacing, and hierarchy so text is readable and accessible in browsers.

Do I need a typography degree to improve web readability?

No. Most readability gains come from seven measurable variables with clear defaults: max-width in ch units, WCAG contrast ratios, a modular type scale, line-height around 1.5–1.65, weight at 400/600, consistent heading margins, and reused design tokens.

Where should developers start with web typography?

Start with line length (measure). It is the most common mistake, the fastest fix, and one line of CSS: max-width: 65ch on reading containers. Then audit contrast, especially gray secondary text and dark-mode tokens.

Web Typography Guide for Developers

Web typography is the set of CSS decisions that determine whether text is readable on a screen: line length, color contrast, size hierarchy, line height, weight, spacing, and consistency across components.

Grade teaches these variables through seven interactive lessons. Each lesson focuses on one readability factor, embeds demos in the prose, and ends with research-backed defaults you can paste into CSS.

The seven variables that affect readability

Readable interfaces rarely fail because of font choice. They fail because one or more of these variables is wrong:

Measure (line length) — keep body text between 45 and 75 characters per line
Contrast — meet WCAG AA (4.5:1) for body text; retune for dark mode
Scale — use a modular type scale so hierarchy is visible before reading
Leading (line height) — set body line-height between 1.5 and 1.65
Weight — reserve heavier weights for headings; body stays at 400
Spacing — tie headings to the content below with margin tokens
Consistency — reuse type tokens so the interface feels intentional

How to use this guide

Read the lessons in order if you are new to CSS typography. Jump to a specific topic if you already know where your interface breaks — long lines on wide monitors, gray helper text, flat heading hierarchy, or inconsistent tokens across pages.

Every lesson includes interactive controls so you can feel the rule before applying it. Start with the measure lesson if you only fix one thing today.

Interactive lessons

Related guides

Glossary

Frequently asked questions

What is web typography?: Web typography is the practice of setting type for screens using CSS — choosing sizes, line lengths, contrast, spacing, and hierarchy so text is readable and accessible in browsers.
Do I need a typography degree to improve web readability?: No. Most readability gains come from seven measurable variables with clear defaults: max-width in ch units, WCAG contrast ratios, a modular type scale, line-height around 1.5–1.65, weight at 400/600, consistent heading margins, and reused design tokens.
Where should developers start with web typography?: Start with line length (measure). It is the most common mistake, the fastest fix, and one line of CSS: max-width: 65ch on reading containers. Then audit contrast, especially gray secondary text and dark-mode tokens.