Your text is too small on phones

Applies to

every page

Typical severity

medium

Effect on conversions

medium

Effort to fix

Quick to fix

What to look for

More than 30% of paragraphs under 14px at 390px.

Why it matters

Small text on a phone is tiring to read. People squint, zoom or give up and skim. That means your key messages, prices and reasons to choose you get missed.

Older visitors and anyone with less than perfect eyesight feel this most, but small text in bright sunlight or on a cheap screen is hard for everyone.

What good looks like

We load the page at a 390px wide phone viewport and measure the computed font size of each paragraph of body text. The page fails when more than 30% of those paragraphs are smaller than 14px. We only run the check when there are at least five paragraphs to measure. We recommend 16px for body text on mobile.

How to check it yourself

1. Open the page in Chrome, open developer tools (F12) and switch on the device toolbar at 390px wide.
2. Right-click a paragraph and choose Inspect.
3. In the Computed tab, look for font-size. That is the size the browser actually uses.
4. Check a few different areas: intro text, body copy, product descriptions and cards. Card and footer text is often smaller.
5. Read the page on a real phone at arm's length. If you want to zoom, the text is too small.

How to fix it

• Set the base body font size to 16px.
• Check for styles that shrink text on mobile. Some themes reduce sizes at small screen widths.
• Use rem units so text sizes scale from the base size and respect the visitor's browser settings.
• Keep line length and line height comfortable. A line height of around 1.5 helps small screens.
• Keep 12px and 13px text for things like legal small print and captions only, not for content people need to read.

html { font-size: 100%; } /* 16px by default, respects user settings */

body {
  font-size: 1rem;     /* 16px */
  line-height: 1.5;
}

.card p,
.product-description {
  font-size: 1rem;     /* don't shrink content text on mobile */
}

Common mistakes

• Shrinking text at mobile breakpoints to fit more on screen.
• Setting the base font size in pixels on the html element, which overrides the visitor's own browser setting.
• Using light grey, thin text at small sizes. Size and contrast work together.

AgoraScan measures this automatically on every page it audits, on desktop and mobile.

Based on

• Google Search Central