Mobile Text Too Small or Lines Too Cramped

Start here

Before you fix it: what this check means

Scavo reads mobile scaling settings and font-size hints in the page HTML and embedded styles. It does not measure text on a rendered phone screen or read external stylesheets. Scavo evaluates three areas in the HTML snapshot.

Why this matters in practice: readable content and usable controls help more visitors complete what they came to do.

Use this as evidence, not a final verdict. An automated scan does not replace keyboard, screen-reader, and visual checks by a person. Check the live site first. Try the affected page with a keyboard and a screen reader Make one controlled change. Remove `user-scalable=no` and restrictive `maximum-scale=1` patterns. Re-scan the same URL and compare the finding; check the feature yourself as well.

Background sources

TL;DR: Font sizes or line heights on mobile are below readable thresholds, forcing users to zoom or squint.

Over 60% of global ecommerce traffic comes from mobile devices (Alli AI). If text is too small to read comfortably (below 16px base) or lines are too cramped (below 1.4 line-height), mobile users either zoom — breaking your layout — or leave. Users with low vision, dyslexia, or age-related presbyopia are disproportionately affected.

What Scavo checks (quick version)

Scavo evaluates three areas in the HTML snapshot:

Viewport restrictions that block/enforce zoom behavior
Inline styles with font sizes below 16px
CSS style blocks setting body/html base font below 16px

It also flags these specific viewport anti-patterns:

user-scalable=no
maximum-scale=1

How Scavo scores this check

Result behavior:

Pass: no issues detected
Warning: exactly 1 issue detected
Fail: 2+ issues detected
Info: Scavo could not gather enough reliable evidence on this run to score pass/fail confidently.

In your scan report, this appears under What failed / What needs attention / What is working for mobile_text_readability, followed by Recommended next steps and Technical evidence (for developers) when needed.

Scan key: mobile_text_readability
Category: ACCESSIBILITY

Why fixing this matters

If users cannot zoom or text is too small, reading effort rises quickly, especially on smaller devices and for users with low vision. This increases bounce and abandonment on content-heavy or form-heavy pages.

Mobile readability is both accessibility and conversion hygiene. Clear readable text reduces friction for everyone.

Common reasons this check flags

Legacy viewport settings disable zoom.
Global typography scale set below accessible baseline.
Inline component styles force small text in cards/forms.
CSS overrides unintentionally shrink text at mobile breakpoints.

If you are not technical

Test key pages on real phone screens at normal viewing distance.
Verify users can zoom when needed.
Ask design/dev to confirm base body text sizing strategy.
Re-scan and confirm issue count drops.

Scavo flagged Mobile Text Readability (mobile_text_readability). Please remove zoom-restricting viewport settings and ensure baseline/mobile text sizes remain readable (typically >=16px for body text contexts).

If you are technical

Remove user-scalable=no and restrictive maximum-scale=1 patterns.
Keep body/html base font at readable mobile baseline.
Audit inline and component-level font-size overrides.
Validate text scaling and zoom behavior across templates.
Add typography guardrails in design system tokens.

How to verify

Check viewport meta on affected pages.
Inspect computed font sizes for body and critical UI copy.
Test pinch/zoom behavior on mobile browsers.
Re-run Scavo and confirm warnings/fails clear.

What this scan cannot confirm

It does not evaluate full contrast/line-height/spacing quality in depth.
It uses detectable markup/style patterns, not full rendered readability scoring.
It does not replace manual usability testing.

Owner checklist

[ ] Assign owner for mobile typography/accessibility standards.
[ ] Ban zoom-blocking viewport directives in coding standards.
[ ] Add responsive typography checks to QA process.
[ ] Recheck after redesign or theme/brand changes.

FAQ

Is 16px mandatory everywhere?

Not universally, but it is a practical baseline for mobile body readability in many contexts.

Why is `user-scalable=no` a problem?

It prevents users from enlarging text/content when needed.

Can headline text be smaller than body in some components?

Design choices vary, but readability and hierarchy should remain clear and accessible.

What should we fix first?

Zoom restrictions first, then tiny body/form text on core user journeys.

Sources

Need a mobile typography QA checklist your non-technical reviewers can use? Send support your key templates.

Mobile Text Too Small or Lines Too Cramped