Web Typography:
The Rules That Matter

Why Typography Matters

Typography is not about making things look pretty. It is the primary vehicle for communication on the web. Every choice you make — the typeface, the size, the spacing, the color — directly affects whether a user reads your content or bounces.

Studies consistently show that users form an opinion about a website within 50 milliseconds. In that window, before they have read a single word, they have already judged the quality of your typography. A well-set page signals professionalism and trustworthiness. A poorly-set page signals the opposite.

Beyond aesthetics, typography affects legibility (can users physically read the text?), readability (can users comfortably read long passages?), and accessibility (can users with visual impairments access the content?). These are not optional concerns — they directly impact revenue, retention, and legal compliance in many jurisdictions.

Type Scale & Hierarchy

A type scale is a set of harmonically related font sizes. Instead of picking arbitrary sizes like 13px, 17px, and 23px, a scale gives you sizes that relate to each other mathematically — producing a visual rhythm that feels coherent even to users who cannot articulate why.

The Modular Scale

The most common approach is a modular scale. Start with a base size (usually 16px) and a ratio (commonly 1.25 — the Major Third, or 1.333 — the Perfect Fourth). Each step up multiplies by the ratio. Each step down divides by it.

Hierarchy Rules

• There should be one and only one h1 per page. It tells search engines and screen readers what the page is about.
• Never skip heading levels. Go h1 → h2 → h3, not h1 → h3. Skipping levels breaks document structure for assistive technologies.
• Size alone is not hierarchy. Weight, color, spacing, and case all contribute. A bold 16px label can visually outrank a thin 24px heading.
• Keep heading sizes at least 1.25× larger than body text so the hierarchy is immediately obvious.

Font Pairing

Font pairing is the art of combining typefaces so they complement rather than compete with each other. The golden rule is simple: use as few fonts as possible. Every additional typeface adds visual noise, increases load time, and multiplies the ways things can go wrong.

The Two-Font Rule

Most great websites use exactly two typefaces — one for headings and one for body text. Some of the best use only one. Three is acceptable for very complex design systems. Four or more is almost always a mistake.

How to Pair Fonts

• Contrast is the key. Pair a serif with a sans-serif. The contrast in structure makes each typeface's role clear.
• Share a mood. Both fonts should feel like they belong in the same era and have the same emotional register — both neutral, both expressive, or both geometric.
• One font, multiple weights. The simplest pairing is using one typeface in different weights — Inter 400 for body, Inter 700 for headings. This is always safe and often elegant.
• Avoid similar fonts. Pairing two humanist sans-serifs (e.g. Gill Sans and Frutiger) creates confusion, not contrast.

Body Text Rules

Body text is where users spend most of their reading time. These rules are not suggestions — they are the difference between text that is comfortable to read and text that causes eye strain.

Font Size

The minimum body font size for comfortable reading is 16px. This is also the browser default for a reason. Many designers push this to 17px or 18px for content-heavy sites like blogs and documentation. Never go below 14px for body copy — 12px and 13px are fine for captions and UI labels, not paragraphs.

Line Height

Line height (also called leading) is the vertical space between lines of text. Too tight and lines merge into each other. Too loose and the text loses coherence.

The recommended range is 1.4 to 1.6 for body text. Headings can go lower — around 1.1 to 1.2 — because they are short and rarely wrap to more than two lines.

Line Length (Measure)

The optimal line length for reading is 50 to 75 characters per line, including spaces. Lines shorter than 45 characters cause too many line breaks, disrupting reading flow. Lines longer than 85 characters make it hard for the eye to find the start of the next line.

In CSS, the easiest way to control this is with max-width: 65ch on your text container. The ch unit equals the width of the "0" character in the current font — a reliable proxy for character count.

Font Weight for Body

Use Regular (400) for body text. Lighter weights (300, 100) look elegant in marketing but become illegible in long-form reading, especially on non-retina screens. Medium (500) is acceptable and adds a subtle sense of solidity.

Spacing & Rhythm

Vertical rhythm is the consistent spacing between typographic elements. When spacing is harmonious, the page feels structured and intentional. When it is inconsistent, users feel mild cognitive discomfort — they cannot say why, but something feels off.

Letter Spacing

Letter spacing (tracking) has very specific rules:

• Large headings: go negative. At 48px+, letters naturally look spaced apart. Tighten with letter-spacing: -0.02em to -0.04em.
• Body text: leave it alone. The typeface designer has already set the correct tracking. Adding positive letter-spacing to body text consistently hurts readability.
• All-caps labels: go positive. Capital letters set tightly together are hard to read. Add letter-spacing: 0.05em to 0.1em for uppercase labels and badges.

Margin & Padding Rhythm

Use a consistent spacing unit — commonly 8px or 4px. All your margins and paddings should be multiples of this unit (8, 16, 24, 32, 48, 64px). This creates a grid-like visual rhythm that users perceive as order, even subconsciously.

The space above a heading should always be greater than the space below it. This visually connects the heading to the content it introduces, rather than floating it between sections.

Paragraph Spacing

Do not indent the first line of a paragraph and add space below it. Pick one. Most web typography uses margin-bottom between paragraphs (usually 1em to 1.5em) and no text indent. First-line indents are a print convention that does not translate well to screen.

Color & Contrast

Contrast is the ratio between the luminance of text and its background. The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios that text must meet to be considered accessible.

Beyond WCAG

WCAG AA is the legal minimum in most accessibility standards (EN 301 549 in Europe, Section 508 in the US). But meeting the minimum is not the same as good design. Aim for 7:1 on body text whenever possible — it benefits everyone, not just users with visual impairments.

Be especially careful with:

• Gray text on white backgrounds. Light gray (#999 on #fff) often fails AA. Check before shipping.
• Colored text on colored backgrounds. Blue on purple, green on teal — these often look like they have good contrast but fail when measured.
• Text on images or gradients. The contrast shifts across the element. Use a dark overlay or test at the worst point.
• Placeholder text in inputs. Placeholder text is typically gray and almost always fails contrast requirements. Make it darker.

Web Font Loading

Web fonts are a performance liability. A poorly loaded font file can block rendering, cause layout shifts, or make text invisible for seconds. Understanding how fonts load is essential for building fast websites.

font-display

The font-display CSS property controls what happens while a web font is loading. There are five values:

For most use cases, font-display: swap is the right choice. It eliminates invisible text (FOIT — Flash of Invisible Text) and shows users content immediately using a system font fallback.

Subsetting

A full font file can contain thousands of glyphs — Latin, Cyrillic, Greek, Vietnamese, and more. If your site is English-only, you are loading glyphs you will never use. Subsetting strips the font down to only the characters you need.

Google Fonts does this automatically with the subset parameter. When using Next.js, the next/font package handles subsetting, self-hosting, and font-display automatically — it is the right choice for any Next.js project.

Fallback Stacks

Always define a fallback font stack. If your web font fails to load — due to network issues, ad blockers, or corporate firewalls — your page should still be readable.

/* Sans-serif stack */
font-family: 'Inter', system-ui, -apple-system,
  BlinkMacSystemFont, 'Segoe UI', sans-serif;

/* Serif stack */
font-family: 'Playfair Display', Georgia,
  'Times New Roman', serif;

/* Monospace stack */
font-family: 'JetBrains Mono', 'Fira Code',
  'Cascadia Code', monospace;

How Many Weights to Load

Each font weight is a separate file download. Loading every weight (100 through 900) when you only use 400 and 700 doubles or triples your font payload. Load only what you use. Two weights is usually enough: regular (400) for body, bold (600 or 700) for headings and emphasis.

Accessibility

Accessible typography is not a separate consideration — it is the same as good typography. The rules that make type readable for users with dyslexia, low vision, or cognitive differences also make it better for everyone.

Dyslexia-Friendly Typography

• Use open, humanist sans-serifs like Open Sans, Atkinson Hyperlegible, or Lexie Readable. Avoid fonts where similar letterforms (b/d, p/q, i/l) are hard to distinguish.
• Increase line height to at least 1.5×. Extra space between lines reduces the crowding effect that makes dyslexia harder.
• Avoid justified text. The uneven spacing between words in justified text creates "rivers" of white space that disrupt reading flow for dyslexic users.
• Avoid all-caps for any significant amount of text. It significantly slows reading speed for everyone and is particularly hard for dyslexic users.

User Preferences

Users can set font size preferences in their operating system or browser. Always use relative units (rem, em) rather than absolute pixels for font sizes. If you use px everywhere, your fonts will not scale when the user increases their browser font size — a critical failure for many users.

Respect the prefers-reduced-motion media query. If you animate text — entrance animations, parallax, scrolling marquees — disable or reduce these effects for users who have requested reduced motion in their system settings.

Semantic HTML

Typography accessibility is not just about visual presentation — it is about structure. Use semantic HTML elements correctly:

• Use <h1>–<h6> for headings, not <div class="heading">.
• Use <p> for paragraphs, <ul>/<ol> for lists.
• Use <strong> for semantic bold and <em> for semantic italic — not just for visual styling.
• Add lang="en" (or the appropriate language) to your <html> element. Screen readers use this to select the correct voice and pronunciation rules.

Tools & Resources

The right tools make applying these rules fast and reliable. Here are the ones worth knowing.