Typography That Converts: A Practical Guide

Typography that converts comes down to a handful of measurable rules: body text at 16 pixels or larger, lines of 45–75 characters, line-height around 1.5, a clear heading scale, and fonts that load fast. Get those right and people actually read your page. Get them wrong and they pinch-zoom, squint, and leave. These are not style opinions — they are settings, and we treat them as build rules, not nice-to-haves.

There is one honest caveat up front. No published A/B test ties a specific font family to a conversion rate (research gap noted in our typography spec, 2026). So this guide is not about picking a "high-converting font." It is about the structural choices that readability research has settled — the ones that decide whether your words get read at all.

What is the most important typography rule for conversion?

Set your body text to at least 16 pixels. Everything else is secondary.

Sixteen pixels is the browser default and the size browsers were designed to display — roughly equal to 12-point print at normal reading distance (Smashing Magazine, 2011, citing Oliver Reichenstein/iA). Go smaller and mobile users start pinch-zooming, and zooming is friction. Friction loses sales.

Age makes this sharper. By 40, only about half the light that reached the retina at 20 still gets through; by 60, roughly 20 per cent (Smashing Magazine, 2011). Business buyers skew older and hold the budget. Undersized text is, very literally, money left on the table.

Never set body text below 16 pixels on any device. On desktop, 18 pixels is more comfortable for scanning (multiple sources compiled in our typography spec, 2026).

This is exactly the kind of number we design around. Comfortable body size is the first thing we lock in, before a single colour or image is chosen.

How long should a line of text be?

Between 45 and 75 characters, with about 65 as the sweet spot.

This is one of the most settled findings in the field, backed by 60+ years of readability research. Robert Bringhurst puts the ideal at 66 characters; Baymard Institute's e-commerce usability testing lands on 50–75 (max 80); Butterick's Practical Typography allows 45–90. The WCAG accessibility standard caps it at 80 (WCAG 1.4.8).

Why it matters for conversion: Baymard found that users "immediately go back to a previous page when arriving at a page that includes long lines of text" (Baymard Institute). A full-width paragraph on a wide screen is a bounce risk. In CSS the fix is one line — max-width: 65ch — and it is one of the cheapest conversion wins on the web.

What about line-height and spacing?

Body text reads best at a line-height of roughly 1.5; headings tighter, around 1.1–1.3.

Butterick recommends 1.2–1.45 for body copy (Butterick's Practical Typography). The accessibility standard requires that your layout still works when a user forces line-height up to 1.5 (WCAG 1.4.12) — so 1.5 is both a comfortable default and a safe ceiling. Lines packed too tightly cause "doubling," where the eye rereads the same line, and the reader quietly gives up.

Smaller text needs proportionally more space, so on mobile, where text looks smaller, we lean toward 1.5–1.6 for body copy.

How should headings be sized?

Use a consistent scale, not arbitrary numbers. For marketing and landing pages we default to the perfect fourth (a 1.333 ratio) because it gives clear hierarchy without melodrama (typographic scale references, our spec, 2026).

From a 16-pixel base that produces a tidy ladder: body 16px, a small heading at ~21px, then ~28px, ~38px, ~50px, and a hero around 48–80px. Each step is visibly bigger than the last, so a reader's eye knows instantly what matters. Dense dashboards use a tighter ratio (minor third, 1.2); editorial sites a more dramatic one (golden ratio, 1.618). The point is that the relationships are deliberate.

Two small details that signal craft: add letter-spacing of 5–12 per cent to all-caps labels and buttons (capitals are designed to sit next to lowercase, so they look cramped together — Butterick's Practical Typography), and apply slightly negative tracking on big display headlines, where default spacing looks loose.

Serif or sans-serif — which converts better?

Neither, measurably. Choose on brand, not on a conversion hypothesis.

NNGroup retired the old "always use sans-serif on screens" rule back in 2012: on modern HD screens, serif fonts render properly, and "legibility research is inconclusive as to whether serif fonts are truly better than sans serif… you can make the choice based on other considerations — such as branding" (NNGroup, 2012). By convention, serif reads as authority and editorial credibility (law, finance, healthcare); sans-serif reads as modern and technical (SaaS, fintech). Both work. Brand fit decides.

How many fonts should a site use, and how fast should they load?

Two families maximum, loaded lean. Often one family with a few weights is plenty — NNGroup notes that "a design that uses a single typeface with multiple weights can look professional and well-balanced" (NNGroup).

Performance is where typography quietly becomes a conversion issue, because a font that loads slowly delays your text and shifts your layout. Our build rules:

• Variable fonts when you need three or more weights. One variable file replaces a stack of static ones — a Monotype benchmark replaced 48 static files with a single variable font for an 88 per cent file-size reduction (web.dev). Variable fonts have 97 per cent-plus global browser support.
• Self-host as WOFF2. It compresses about 30 per cent better than WOFF, and since 2020 browser cache partitioning killed the old benefit of shared CDN fonts (HTTP Archive Web Almanac 2022; web.dev).
• Subset to Latin, preload one or two critical files, cache for a year. Or skip web fonts entirely for body text — a system font stack downloads nothing and never shifts the layout.

This is the same discipline behind the way we build websites: fast, hand-tuned, measured against the numbers rather than guessed at.

FAQ

What is the minimum font size for a website? 16 pixels for body text on every device, no exceptions. Google's Lighthouse flags a page when 40 per cent or more of its text falls below 12 pixels (Chrome DevDocs), but 12 is a failure floor, not a target. Aim for 16–18.

Do I need to pay for a premium font? No. Free open-source fonts like Inter, Geist Sans, DM Sans and Source Serif 4 are excellent and licensed for commercial use. Font choice has no measured effect on conversion (our typography spec, 2026); how it's sized, spaced and loaded is what counts.

Does the font I choose actually affect sales? There is no published test linking a font family to a conversion rate. What's proven is the supporting structure — size, line length, line-height and load speed. That's where the wins are.

Can good typography really change conversions? Indirectly but reliably. Long lines send users back a page and undersized text drives pinch-zoom and bounce (Baymard; Smashing Magazine). Removing that friction keeps readers reading — and reading is the first step to acting.

We build fast, conversion-tuned websites to exactly these numbers — not as polish bolted on at the end, but as the spec we start from. If you want a site that's effortless to read and quick to load, book a call and we'll walk you through how we'd build yours.