When text on a smartphone screen feels hard to read squinting, skipping lines, or giving up after two sentences it’s not just bad design. It’s a failure of legibility metrics for smartphone screens: measurable, testable factors like font size, line height, contrast, and spacing that directly affect whether people can read your app or website without strain.

What do legibility metrics for smartphone screens actually measure?

Legibility metrics for smartphone screens are practical numbers not abstract theory. They include minimum recommended font sizes (e.g., 16px for body text), line height ratios (1.4–1.6 is common), character count per line (45–75 characters), and contrast ratios (at least 4.5:1 for normal text). These aren’t arbitrary rules. They’re based on how human vision works at typical viewing distances (12–16 inches) and under real-world conditions glare, motion, low battery dimming, or quick glances while walking.

When do designers and developers use these metrics?

You use them when building or reviewing anything meant to be read on a phone: an email newsletter, a banking app’s transaction list, a news article in a mobile web view, or even a settings menu. If users scroll past your content, misread instructions, or zoom in manually, legibility metrics are likely out of alignment. For example, using 14px Roboto in a health app might pass desktop testing but fail on a bright outdoor screen because contrast drops and small fonts blur faster on lower-DPI OLED panels.

Why does font choice matter more than people think?

Not all fonts scale the same way on small screens. A sans-serif like Inter has open counters and generous x-height, making it more legible at 16px than a condensed serif like Playfair Display at the same size. That’s why our guide to fonts optimized for readability on smartphones compares real rendering behavior not just aesthetics.

What’s the most common mistake with line spacing and font size?

Using fixed pixel values for line height instead of relative units like em or unitless ratios. A line-height of 24px may look fine on one device but collapse on another with different default font scaling. Worse, many teams set font size in pixels but ignore system font scaling preferences breaking accessibility for users who rely on larger system text. That’s why research into how font size affects mobile app readability recommends using relative sizing and testing across Android’s “Large Text” mode and iOS’s Dynamic Type.

How do legibility metrics relate to accessibility?

They’re the foundation not an add-on. Low-vision users don’t just need bigger text; they need consistent spacing, clear letterforms, and sufficient contrast across all interface elements. If your app passes WCAG contrast checks but uses tight line spacing and narrow columns, users still lose their place. Our page on typography accessibility for visually impaired apps shows how legibility metrics support real usage not just compliance checkboxes.

What should you check before launching a mobile screen?

  • Body text is at least 16px (or equivalent relative size), and headings scale predictably
  • Line height is ≥1.4 for paragraphs, and ≥1.2 for labels or buttons
  • Text color meets 4.5:1 contrast against its background (test with a tool like WebAIM Contrast Checker)
  • No text is smaller than 12px even for captions or footnotes unless it’s decorative
  • You’ve tested with system font scaling turned on (Android “Large Text”, iOS “Larger Text”)

Start by auditing one key screen like your sign-up flow or main content view using those five checks. Fix what fails, then compare how it feels to read in natural light, indoors, and while holding the phone at arm’s length. That’s when legibility metrics stop being numbers and start working for real people.

Explore Design