Poor Mobile Text Legibility

Reading a billboard from a mile away — that's the experience of squinting at 10px text on a phone. Make your type readable.

What is this?

Imagine standing a mile away from a billboard and trying to read the fine print. That is what your visitors experience when your mobile text is too small. Phones are held about 12 inches from the face, and any text below 16px becomes a strain to read. Yet AI-generated sites routinely ship 10px, 11px, or 12px body text because the developer was looking at it on a 27-inch monitor, not a phone.

Why it matters

For your visitors: Small text on mobile is not just annoying — it is physically straining. Your visitors squint, pinch-to-zoom, lose their place, and get frustrated. People with even mildly impaired vision (and that includes most people over 40) will simply leave. Text legibility is the most fundamental usability requirement — if people cannot read your content, nothing else matters.
For your business: If visitors cannot read your value proposition, they will not sign up. If they cannot read your pricing, they will not buy. Google also flags pages where text is too small as "not mobile-friendly," which directly impacts your search rankings. Tiny text signals "this site was not built for me."
The standard: Body text should be at least 16px on mobile. This is the default font size in all browsers for a reason — it is the minimum for comfortable reading on a phone-sized screen. Line height should be at least 1.5x the font size. Contrast ratio should meet WCAG AA (at least 4.5:1 for normal text).

Readable mobile text

body {
  font-size: 16px;
  line-height: 1.6;
  color: #e0e0e0; /* high contrast on dark bg */
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
.caption { font-size: 0.875rem; } /* 14px — OK for captions */

Tiny, cramped text

body {
  font-size: 12px;
  line-height: 1.2;
  color: #888; /* low contrast */
}
h1 { font-size: 14px; }
.info { font-size: 10px; }

How to fix it

React / Next.js

Set a readable base font size in your global styles and use relative units for everything else.

/* globals.css */
html {
  font-size: 16px; /* base — never go below this */
}

body {
  line-height: 1.6;
  -webkit-text-size-adjust: 100%; /* prevents iOS from auto-resizing text */
}

Use Tailwind's responsive text utilities to adjust sizes for different screens:

function HeroSection() {
  return (
    <section className="px-4 py-12">
      {/* Text scales up on larger screens */}
      <h1 className="text-2xl font-bold md:text-4xl lg:text-5xl">Build better websites</h1>
      <p className="mt-4 text-base leading-relaxed text-neutral-300 md:text-lg">
        The cat scans your site and tells you exactly what to fix. No jargon, no overwhelm — just
        clear, actionable feedback.
      </p>
    </section>
  );
}

For form inputs, always use 16px or larger to prevent iOS from auto-zooming:

// iOS zooms in on inputs smaller than 16px — prevent this
function EmailInput() {
  return (
    <input
      type="email"
      placeholder="you@example.com"
      className="w-full border border-neutral-700 bg-neutral-900 px-4 py-3 text-base"
      // text-base = 16px — prevents iOS zoom
    />
  );
}

Plain HTML

Set minimum font sizes and ensure comfortable line spacing.

<style>
  /* Mobile-first readable typography */
  body {
    font-family:
      system-ui,
      -apple-system,
      sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #e0e0e0;
    -webkit-text-size-adjust: 100%;
  }

  /* Headings scale with viewport but have minimums */
  h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
  }
  h2 {
    font-size: clamp(1.25rem, 3vw, 2rem);
  }

  /* Inputs must be 16px+ to prevent iOS zoom */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Small text should be used sparingly */
  .caption,
  .fine-print {
    font-size: 0.875rem; /* 14px — minimum for secondary text */
    line-height: 1.5;
  }
</style>

High impact — mobile~2 paws

The cat has excellent eyesight. Your visitors do not. Make your text big enough to read without squinting, and the cat will purr.

How the cat scores this

The scanner measures the computed font size of body text, headings, and form inputs at mobile viewport sizes. Body text below 14px is flagged; below 12px is a serious issue. Form inputs below 16px trigger a specific warning because of the iOS auto-zoom behavior. The scanner also checks line height (below 1.4 is flagged) and contrast ratios between text color and background color. A page full of 11px gray-on-gray text gets a substantial penalty.