Typography represents 95% of web design. And yet most sites choose their typefaces at random and never think about size, line height or line length. The result: visitors who struggle to read, stay less time and convert less. Here is how to fix that.
Why typography directly influences your conversions
An illegible typeface creates cognitive friction. Your visitor has to make an effort to decipher your text. That effort, even unconscious, wears them down and prompts them to leave. Conversely, well-set text makes reading fluid and strengthens your brand's credibility.
The 16px rule: never go below 16px for your body text on desktop. On mobile, aim for 17 to 18px. Below those values, reading becomes uncomfortable and your bounce rate climbs.
Building a legible typographic hierarchy
Typographic hierarchy is the set of visual signals that lets your reader scan your page effortlessly. It works through sizes, font weights and colour contrast.
- H1 heading: 36 to 48px, bold, your guidelines' primary colour
- H2 headings: 24 to 30px, semi-bold, high contrast against the background
- Body text: 16 to 18px, regular, a dark neutral colour
- Captions and notes: 13 to 14px, italic or in a muted colour
- A maximum of 2 hierarchy levels visible at once within the same section
Choosing your typefaces without going wrong
For small company sites, start with Google Fonts: free, fast and embeddable in two lines of code. To find typeface pairings that work visually, Typewolf collects the best combinations used by real sites. It is a directly usable source of inspiration.
The two-typeface rule: one for headings, one for body text. That is all. Every additional typeface adds visual noise and weighs down your page's loading time.
Line height and line length, the details that change everything
Two often-ignored settings make all the difference. The ideal line height for body text sits between 1.5 and 1.7 (that is, 150 to 170% of the type size). The optimal line length is 60 to 80 characters per line. Beyond that, the eye loses the thread and skips lines. The typography guide on web.dev and research from Nielsen Norman Group on readability online confirm these values with real user testing.
For the CSS property itself, the MDN Web Docs documentation sets out every possible value. Use unitless values (1.6 rather than 1.6em) to avoid unexpected behaviour on child elements.
The tools for testing and improving your typography
Start by checking your fonts' performance with PageSpeed Insights: badly loaded web fonts are often responsible for 1 to 2 seconds of delay in rendering. If you want to explore professional typefaces beyond Google Fonts, Adobe Fonts offers a premium library included with Creative Cloud. And to test combinations directly in the browser, Fontpair is the simplest and quickest tool.
Where to start today
Open your site on a phone. Zoom at 100%. If you have to pinch the screen to read comfortably, your type size is too small. Second test: count the number of characters per line. If you exceed 90, reduce the width of your text column. Those two fixes take under an hour and have an immediate impact on readability.
Typography is one of many design elements that influence your conversions. For a complete view of the problems to fix, also read the 5 design mistakes that cost you customers and start with the quickest fixes to put in place.