Font size for mobile websites: what is readable?

Key takeaways

Font size for a mobile website should start at 16 pixels for body text. That is the browser default, it is readable at arm's length, and it stops iPhones zooming in when a visitor taps a form field. Size is only part of readability: line spacing, line length and contrast matter as much.

• 16px is the working minimum for body text on a phone.
• Text under 12px is too small to read without zooming.
• Form fields below 16px make Safari on iPhone zoom the page on tap.
• WCAG expects text to resize to 200% and to meet a 4.5 to 1 contrast ratio.

What font size should a mobile website use?

A mobile website should use at least 16 pixels for body text, with headings scaled up from there and nothing important below 14 pixels. Sixteen pixels is the default text size in every major browser, and it is comfortable to read on a screen held at a normal distance.

Many sites set body text at 14px or smaller because it looked balanced on a designer's large monitor. On a phone, in daylight, for a visitor over 45, that text is work. People do not zoom. They leave.

• Body text: 16px to 18px.
• Secondary text, captions and form hints: 14px minimum.
• Main page heading: around 28px to 32px on a phone.
• Subheadings: 20px to 24px.
• Buttons and form fields: 16px or larger.

• Why mobile-friendly web design is essential for UK businesses

What does Google consider too small?

Google's Lighthouse tool long used 12 pixels as its threshold for legible text, flagging pages where 40% or more of the text was smaller. The original mobile-friendly update in 2015 rewarded pages where text was readable without tapping or zooming. Google's page experience guidance still asks whether content displays well on mobile devices.

Twelve pixels is a floor for the smallest print, not a target for body copy. A page where everything is 12px would pass that old audit and still be unpleasant to read. Design to 16px and treat 12px as the size below which text should not exist.

• Is mobile-friendliness a Google ranking factor?

Why do form fields need 16px text?

Because Safari on iPhone zooms the whole page when a visitor taps a form field whose text is smaller than 16px. The page jumps, part of the form slides off screen, and the visitor has to pinch back out after each field. It is one of the most common reasons a contact form feels broken on an iPhone.

The fix is to set the text inside inputs, selects and text areas to 16px or more. Do not solve it by disabling zoom in the viewport tag. That stops people with low vision enlarging the page and conflicts with accessibility guidance.

• Mobile form design: forms people finish on a phone
• The viewport meta tag: one line that makes mobile work

What else affects readability on a phone?

Three things besides size: line spacing, line length and contrast. Text set too tight is hard to follow from one line to the next. Lines that run edge to edge with no margin are tiring. And grey text on a white background, fashionable on desktop, disappears outdoors on a phone.

• Line height: about 1.5 times the font size for body text.
• Line length: around 40 characters per line on a phone, with side margins of at least 16px.
• Contrast: at least 4.5 to 1 between body text and background (WCAG 1.4.3).
• Paragraphs: three or four lines on a laptop become eight on a phone, so keep them short.
• Typeface: choose one designed for screens, and avoid light or thin weights for body text.

• Writing for mobile readers: copy that works on a small screen

Should visitors be able to resize your text?

Yes. WCAG success criterion 1.4.4 expects text to be resizable up to 200% without loss of content or function. Many people increase the system text size on their phone, and a well-built site respects that setting. A site with font sizes fixed in pixels everywhere, or with zoom disabled, ignores it.

Ask your developer whether type is set in relative units and whether the layout survives larger text. Then test it: raise the text size in your phone's accessibility settings and reload the site. If headings overlap, buttons break or text is cut off, the layout is too rigid.

• Mobile accessibility: the WCAG checks for small screens

Can text be too big?

Yes. Very large body text means few words per line and a great deal of scrolling. Oversized headings can push the actual message off the first screen, which is a common problem when a desktop headline of 64px is carried to mobile unchanged. On a phone, a main heading that wraps onto five lines is too big.

The trade-off is between comfort and density. Sixteen to eighteen pixels for body text and around 28 to 32 for the main heading suits most business sites. If the first screen shows only a headline and nothing else, bring the heading down a step.

• What belongs above the fold on a business website

What does this look like in practice?

A pattern we see on sites aimed at older customers, such as mobility, legal and financial services: body text at 14px in a pale grey, chosen because it looked refined in the design presentation. The people the business most wants to reach are the ones least able to read it on a phone.

Raising body text to 17px, darkening it and loosening the line spacing changes the page from something to be deciphered into something to be read. It costs an hour. Global Bridge Labs (GBL) reviews typography on a phone in daylight, because a dim office monitor hides the problem.

• See client work
• Website Design & Development for UK businesses
• Make your website work properly on mobile

Mobile typography checklist

• Set body text to at least 16px.
• Set text inside form fields to at least 16px.
• Keep nothing important below 14px.
• Use a line height of about 1.5 for body text.
• Check contrast is at least 4.5 to 1.
• Leave zoom enabled and test with larger system text.
• Read a full page on a phone outdoors.

Next step

Hand your phone to someone ten years older than you and ask them to read your service page aloud. If they hold it closer or tilt it towards the light, the type needs work.