Web typography and readability: the design decision nobody talks about and everybody notices

When someone lands on your website and leaves within three seconds, it is almost never because the logo is misplaced or they dislike the background colour. Often it is something more mundane and more serious: the text was hard to read. Type too small, lines too long, a grey so light it blends into the background. Typography is the part of design that gets discussed least in meetings and the part people spend the most time actually looking at, literally, because it is where the content they came for lives.

Why typography is the most underrated design decision

A logo is seen for a couple of seconds. A button is clicked once. But the body text on a website (your service descriptions, product pages, blog articles) is what a visitor scans with their eyes for minutes at a time if your content interests them. If that reading experience is uncomfortable, the person does not need to consciously identify the cause to decide to leave. The brain processes reading difficulty as friction, and friction translates into abandonment, even though the visitor would never put into words "the typography was tiring me out."

We have seen client websites with visually appealing design (good palette, good photos, good layout) that still generated more bounce than expected, and on closer inspection, the problem was a 14-pixel body text in a grey that was too muted. Shrinking the type does not really save space: it saves space today and loses visitors every day after.

Font size: the most common mistake on small business websites

A reasonable standard for body text on desktop sits around 16 to 18 pixels; on mobile, never below 16, because that is the threshold below which some browsers auto-zoom when a field is tapped, an annoying behaviour that gives away the size was insufficient to begin with. Headings and subheadings need to establish a clear hierarchy: if an H2 and an H3 look almost the same size, visitors cannot tell at a glance what matters.

A common mistake is designing while looking at a large desktop screen with good lighting, and forgetting that a large share of traffic arrives from a phone screen in direct sunlight or being read by tired eyes at the end of the day. What looks perfect to the designer can turn out tiny for a sixty-year-old customer checking your site to book an appointment.

Line height and line length: what makes text "breathe"

Line height (the vertical spacing between lines) is usually set between 1.4 and 1.6 times the font size for long-form text. Less than that and lines feel cramped, giving the impression of a wall of text; more and the reader loses their place from one line to the next. It is an adjustment that takes a minute in the CSS and completely changes how a block of content is perceived.

Just as important, and far more overlooked, is line length: between 60 and 75 characters per line is the range most readability studies recommend. A paragraph that stretches across an entire widescreen display forces the eye through an extremely long horizontal sweep before jumping to the next line, and that jump is where readers get lost. The fix is not shrinking the font size, it is limiting the width of the text column with a simple max-width on the container.

How many typefaces to use (and why even "one" is hard to get right)

Two type families is usually the reasonable ceiling for a business website: one for headings, one for body text (or the same family playing with its different weights, which is what we do at 3CWeb with DM Sans, combining a thin weight with bold within the same heading to add emphasis without introducing a third font). Every extra typeface you load is one more request to the browser, one more visual jump for the eye, and one more chance that two styles will clash rather than complement each other.

Before mixing two different families, it is worth testing them together on a real mock-up rather than just imagining it. A geometric sans-serif next to a classic serif can work beautifully or clash head-on, and the only reliable way to know is seeing them side by side with real text, not generic "Lorem ipsum" filler.

Mobile readability: it is not the same problem as on desktop

On small screens the issue is not just size, it is context: the person is often standing, walking, with only one hand free, with notifications interrupting them. Typography on mobile needs a wider margin for error: somewhat larger sizes, somewhat more generous line height, and above all, shorter paragraphs. A block of text that reads as four comfortable lines on desktop can turn into twelve lines on mobile that discourage anyone from continuing to read.

Breaking content into short paragraphs with the occasional subheading is not "dumbing down" the message, it is adapting it to the actual device most of your visitors are reading you from. Analytics data from most Spanish small businesses today shows more than half of traffic arriving from mobile, so designing typography with desktop first and "adjusting later" for mobile is, quite literally, getting the priorities backwards.

Contrast and text colour: the silent ally of accessibility

A light grey on a white background can look elegant on a designer's calibrated monitor in good ambient light, but it becomes almost unreadable on a phone with the brightness turned down or outdoors. The accessibility standard (WCAG) requires a minimum contrast ratio of 4.5:1 between text and its background for normal body text, and 3:1 for large text. Free online tools check that contrast in seconds by entering the two colours in hex.

You do not need to sacrifice aesthetics for accessibility: you can almost always darken that grey slightly (say from #999999 to #5c5c5c) without the eye noticing a dramatic design change, but noticing a huge difference in how easy it is to read.

System fonts vs custom fonts: speed against personality

Using the visitor's operating system default typeface (the so-called "system font stack") has one objective advantage: instant loading, zero extra requests to the server. The cost is that your site looks typographically similar to any other site using the same resource, losing some brand personality. Loading a custom typeface from Google Fonts or similar adds identity, but adds an external request that can slow loading if not implemented well.

The middle ground that works for most projects is loading at most two weights of a single type family (say, regular and bold), using the `font-display: swap` attribute so text displays with a fallback typeface while the custom one finishes loading, instead of leaving the visitor staring at a blank gap. It is a small technical difference with a big impact on perceived speed.

How to know if your typography is actually working

Beyond personal opinion ("I like it"), there are objective signals: average time on page, bounce rate on long-form articles, or simply asking someone outside the project (who has never seen the design before) to read a paragraph out loud from their own phone. If they squint, hesitate, or pinch to zoom, you already have your answer without needing any analytics tool.

Numbers, prices and data: typography also needs to support mental arithmetic

There is one specific case where typography matters even more than usual: figures. A price, a schedule or a phone number badly laid out generates reading errors with a direct cost (a customer calling a mistyped number, an order with the wrong quantity). Some type families include a "tabular figures" variant, where every digit occupies the same width, making it easier to line up columns of prices or compare figures at a glance. This is not a detail exclusive to spreadsheets: in a services pricing table, for instance, it makes a real difference in how long it takes a customer to compare plans.

Real user testing before settling on a typeface

Before finalising a typographic choice, it is worth going beyond looking at it on the designer's screen. A simple, cheap test: print a screenshot of the website with two or three different type options and show them to five or six people outside the project, simply asking which one they find easiest to read without hinting at which one "should" be preferred. This kind of informal test, requiring no budget or special tools, surfaces readability problems that can go completely unnoticed on an experienced designer's computer screen.

The cost of changing typeface further down the line

Changing a website's typeface once it is already launched is not as simple as changing a colour: it affects text length (a wider typeface can break tight layouts), the already-established visual hierarchy, and the brand perception regular customers already associate with the site. That is why it is worth investing the necessary time in the initial choice, testing the typeface in real contexts on the website (a long heading, a pricing table, a form) and not just on a pretty homepage mock-up, before finalising it and building the entire site around it.

Frequently asked questions