Font size under 12px: text too small to read on a phone

What the font size threshold is

Text on a phone is read at arm’s length on a screen a few inches wide. Around 16 CSS pixels is the common floor for body copy, which is also most browsers’ default. Below about 12 pixels, text is small enough that a reader has to zoom to follow it.

Relative units are what make this hold up, if you let them. rem is relative to the root element’s font size, so text follows the reader’s browser setting only when that root size is left alone or set relatively. A fixed pixel size on html, or on the text itself, ignores the setting people with low vision change first.

What squirrel checks

The rule runs on every crawled page over every element with a style attribute. It matches font-size: followed by an integer and px or pt, converting points to pixels by multiplying by 1.33. The integer requirement means font-size: 11.5px is not read at all. It emits a single check named font-size:

• Warn when any matched inline font size resolves below 12 pixels. Message: 4 element(s) with font-size under 12px, with Ensure text is readable without zooming as the value. Severity warning, weight 4.
• Info otherwise. Message: No extremely small inline font sizes detected, with Verify body text is at least 16px as the value.

Only inline styles are read. Font sizes set in an external stylesheet, which is where most of them live, are not visible to this rule, and neither are relative units such as rem, em or %. The pass wording says so: it reports that nothing small was found inline, not that the page is readable.

How to fix it

body { font-size: 1rem; line-height: 1.5; }
.small-print { font-size: 0.875rem; }

Set body copy in rem and leave the root font size unset, so the text follows the reader’s browser setting. Keep the smallest text on the page above about 0.75rem. Give it a line height of at least 1.5.

Check the real sizes in a browser rather than relying on this rule alone. It only sees what is written in a style attribute.

Enable / disable

Disable this rule

[rules]
disable = ["mobile/font-size"]

Disable all Mobile rules

[rules]
disable = ["mobile/*"]

Enable only this rule

[rules]
enable = ["mobile/font-size"]

enable replaces the default ["*"], so this is the only rule selected. Leave disable out: a rule that matches any disable pattern is skipped even when enable names it. Only an enabled setting under a rule’s own [rule_options] table overrides both lists.

Related rules

• mobile/viewport-zoom: whether a reader can zoom when text is too small.
• mobile/tap-targets: the same problem applied to things you touch.
• a11y/color-contrast: the other reason text is hard to read.
• mobile/horizontal-scroll: layout that forces the reader to pan.

Mobile findings ship in every audit next to the SEO, performance and agent experience rules. See Core Web Vitals for how an agent works through a report.

References

• Understanding resize text, WCAG 2.2
• CSS length values, MDN
• Page experience, Google Search Central

Check your site

Run squirrel audit https://example.com and open the Mobile section of the report. Each page is reported with its count of small inline font sizes. Signed-out local audits need no account and cost nothing. Signed-in audits spend credits.