Typography That Converts. A Practical Guide

Typography that converts comes down to a handful of measurable settings: 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. When they're off, people pinch-zoom to read or leave the page. We treat them as build rules.

No published A/B test ties a specific font family to a conversion rate (research gap noted in our typography spec, 2026). So you won't find a "high-converting font" in this guide. It covers the structural choices where readability research is fairly consistent, and those 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. At normal reading distance it's roughly equal to 12-point print (Smashing Magazine, 2011, citing Oliver Reichenstein/iA). Below 16 pixels, mobile users start pinch-zooming, and that friction loses sales.

Age makes it worse. By 40, only about half the light that reached the retina at 20 still gets through, and by 60 it's roughly 20 per cent (Smashing Magazine, 2011). Business buyers skew older and hold the budget, so undersized text works against the people who make the decision.

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).

How long should a line of text be?

Between 45 and 75 characters. Aim for about 65.

This is one of the better-established findings in typography, with more than 60 years of readability research behind it. 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, and the WCAG accessibility standard caps it at 80 (WCAG 1.4.8).

Baymard also 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. The CSS fix is one line: max-width: 65ch. It's one of the cheapest changes you can make.

What about line-height and spacing?

Body text reads best at a line-height of roughly 1.5. Headings can be tighter, around 1.1–1.3.

Butterick recommends 1.2–1.45 for body copy (Butterick's Practical Typography). The accessibility standard requires your layout to keep working 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 eventually the reader gives up.

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

How should headings be sized?

Pick one ratio and derive every heading size from it. For marketing and landing pages we default to the perfect fourth (a 1.333 ratio), which gives a clear hierarchy without huge jumps between levels (typographic scale references, our spec, 2026).

From a 16-pixel base, that gives body text at 16px, a small heading at ~21px, then ~28px, ~38px, ~50px, and a hero around 48–80px. Each step is visibly bigger, so a reader can see at a glance what matters most. Dense dashboards use a tighter ratio (minor third, 1.2), and editorial sites a more dramatic one (golden ratio, 1.618).

Add 5–12 per cent letter-spacing to all-caps labels and buttons. Capitals are designed to sit next to lowercase letters, so they look cramped when set side by side (Butterick's Practical Typography). On big display headlines, tighten the tracking slightly, since default spacing looks loose at that size.

Does serif or sans-serif convert better?

Neither has a measured advantage, so choose on brand.

NNGroup retired the old "always use sans-serif on screens" rule back in 2012. Serif fonts render properly on modern HD screens, 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 authoritative and editorial (law, finance, healthcare), and sans-serif reads as modern and technical (SaaS, fintech).

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

Two families at most, and keep the files light. One family with a few weights is often enough. NNGroup notes that "a design that uses a single typeface with multiple weights can look professional and well-balanced" (NNGroup).

Loading is where fonts start to affect conversion, because a slow font delays your text and shifts your layout. What we do:

• Use variable fonts when you need three or more weights. One variable file replaces a set of static ones: in a Monotype benchmark, a single variable font replaced 48 static files and cut file size by 88 per cent (web.dev). Global browser support for variable fonts is above 97 per cent.
• Self-host fonts as WOFF2, which compresses about 30 per cent better than WOFF. Since 2020, browser cache partitioning has removed the old advantage of loading fonts from a shared CDN (HTTP Archive Web Almanac 2022; web.dev).
• Subset to Latin, preload one or two critical files, and cache them for a year. For body text you can also skip web fonts entirely: a system font stack downloads nothing and never shifts the layout.

The rest of the site gets the same attention to load speed, as part of how we build websites.

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), so 12 is where a page fails. 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). What counts is how the font is sized, spaced and loaded.

Does the font I choose affect sales? No published test links a font family to a conversion rate. The evidence that exists is about the structure around the font: size, line length, line-height and load speed. That's where to spend the effort.

Can good typography really change conversions? Indirectly. Long lines send users back a page, and undersized text drives pinch-zoom and bounce (Baymard; Smashing Magazine). Removing that friction keeps people reading, and they have to read before they act.

These numbers are the spec we start a site from, and body size is set before a single colour or image is chosen. If you book a call, we'll compare the type on your site with this spec.