How to Fix Font Size Too Small for Mobile Readability

errorThe Problem

Your mobile pages have text smaller than 12px, which forces users to pinch-to-zoom to read content. Google flags this as a mobile usability issue in PageSpeed Insights. The recommended minimum is 16px for body text on mobile devices.

trending_upWhy It Matters for SEO

Unreadable text on mobile means users zoom in, scroll sideways, and eventually leave. Google tracks this behavior and uses font readability as a mobile usability signal. With mobile-first indexing, text that's too small on mobile hurts your rankings even for desktop searches.

buildHow to Fix It

1
Check PageSpeed Insights for 'Document doesn't use legible font sizes'.
2
Open your theme's main CSS file (assets/base.css or assets/theme.css).
3
Set a minimum body font-size of 16px.
4
Check product descriptions, footer text, and form labels — these are common offenders.
5
Use relative units (rem, em) instead of fixed px values for better scaling.

folderassets/base.css

/* Add to your theme CSS */
body {
  font-size: 16px;
  line-height: 1.5;
}

.product-description,
.product__description {
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .footer__text,
  .product-form__label,
  caption,
  small {
    font-size: 14px;
  }
}

menu_bookRead Google's official documentationopen_in_new

Related Fix Guides

build

How to Fix Tap Targets Too Small on Mobile

Fix small tap targets on your Shopify or WooCommerce mobile site. Make buttons and links finger-friendly for better UX and SEO.

build

How to Fix a Missing Viewport Meta Tag on Shopify & WooCommerce

Fix the missing viewport meta tag on your store. Without it, your site looks broken on mobile devices. Copy-paste fix included.

Want to check if YOUR store has this issue?

Scan your site for free — get copy-paste fixes in 60 seconds.

searchScan Now — It's Free