Website Font Size That Reads Well on Every Screen

Customers are pinching to zoom on your service page, older visitors call instead of reading your prices, and the text that looked crisp on your designer's 27 inch monitor turns into a grey smudge on a phone. Small text is one of the most common reasons a small business site feels hard to use, and it is one of the cheapest to fix.

This guide covers the website font size settings I use on client sites, from body text to headings to buttons, with exact numbers you can hand to a developer or set yourself in a site builder.

The website font size numbers that work

Start with these and adjust only with a reason.

The form field row has a technical reason behind it. On iPhones, Safari automatically zooms the page when someone taps an input with text smaller than 16 px. The visitor then has to zoom back out to see the submit button. Setting form text to 16 px stops that zoom entirely, and it is often the single fix that lifts form completions on mobile.

Why body text matters more than headings

Owners tend to focus on the headline, but visitors spend almost all of their reading time in body text: service descriptions, pricing notes, opening hours, the paragraph that explains what happens after they book. If that text is 14 px in a light grey, a large share of your audience will skim, miss key details and leave.

Size also depends on the typeface. Two fonts both set at 16 px can look very different, because one has a taller lowercase height. A font with small lowercase letters may need 18 px to read like another font at 16 px. Check by eye on a real phone, not only by the number in the settings.

Colour is the other half of readability. Larger text tolerates slightly lower contrast, but body text needs strong contrast at any size. Our guide to website colour contrast every visitor can read gives the ratios to aim for.

Line height, line length and spacing

A good font size can still read poorly if the lines are cramped or too long.

• Line height: set body text to 1.5 to 1.7 times the font size. At 18 px that means roughly 27 to 30 px between baselines. Headings can be tighter, around 1.1 to 1.3.
• Line length: aim for 50 to 75 characters per line on desktop. On a wide screen, cap the text column at about 680 to 760 px rather than letting paragraphs stretch edge to edge.
• Paragraph spacing: leave about one line of space between paragraphs so each block is easy to find again after a glance away.
• Mobile margins: give text at least 16 px of padding from the screen edges, so letters do not touch the glass.

Why shrinking text on mobile is the wrong instinct

A common habit, and one many templates bake in, is to scale everything down on phones. Desktop body text at 18 px becomes 14 px on mobile so more words fit on the screen. The reasoning sounds sensible: the screen is smaller, so the text should be too.

I push back on this with every client. A phone is held closer than a monitor, but not close enough to make up for a smaller size, and people read phones while walking, in bright sun or with one hand. Fitting more words on screen does not help when nobody can read them comfortably. Keep body text at 16 px or larger on mobile, even if it means more scrolling. Scrolling is easy. Squinting makes people leave.

The same goes for the trend of very light, thin fonts at small sizes because they look elegant in a design mockup. A weight of 300 at 15 px may look refined on a high resolution laptop and nearly vanish on an older Android phone. Use a regular weight of 400 for body text and save the light weights for large headings.

How to set font sizes so they scale properly

If you or your developer can edit the CSS, a few habits keep the sizes consistent across screens.

1. Use rem units for text. Set the root size to 100 percent, which is 16 px in most browsers, then size body text at 1 to 1.125 rem. This respects visitors who have set a larger default text size in their browser.
2. Use a simple scale for headings. Multiply each level by a ratio such as 1.25. Starting from 18 px body text gives roughly 22, 28 and 35 px for H3, H2 and H1, which then grow on desktop.
3. Let headings grow smoothly. The CSS clamp function lets a heading move between a minimum and a maximum based on screen width, so you avoid a sudden jump at one breakpoint.
4. Test at 200 percent zoom. Zoom the browser to 200 percent and check that nothing overlaps or gets cut off. Accessibility guidelines expect text to work at that level.

In site builders without CSS access, look for global typography settings and set body, H1, H2 and button sizes there once, instead of styling each block by hand. Per block styling is how sites end up with seven slightly different text sizes.

The top of the page deserves particular care, since visitors judge the site in the first few seconds. Our notes on hero section design for small business websites cover heading size and length for that area. For more on layouts and mobile screens, browse our web design guides.

Frequently asked questions

What is the best font size for a website?

For body text, 16 to 18 px on mobile and 17 to 20 px on desktop works for most small business sites. Headings should be clearly larger, with the main heading roughly double the body size. Always check the result on a real phone, since typefaces vary in how large they look.

Is 14px too small for a website?

For body text, yes, 14 px is too small for most visitors, especially on phones and for older readers. It can work for captions, legal notes and small labels. Keep anything people need to read in full at 16 px or above.

Should mobile font size be smaller than desktop?

Headings can be smaller on mobile so they fit the narrow screen, but body text should not drop below 16 px. Many sites use the same or nearly the same body size on both. Form fields should stay at 16 px to stop iPhones zooming in when tapped.