This translation has not been editorially reviewed yet. The German version is authoritative. Deutsche Fassung
Responsive
How big must text on the smartphone be at least?
On a screen that is in the hand, the font size decides whether a text is read or wiped away. Google recommends at least 16 pixels for flow text and devalues pages whose text remains below 12 pixels — the reader would then have to zoom in, and many do not. The Responsive test area measures each visible text node on the mobile device profiles and counts how many of them are below 12 pixels. The finding mentions the number, the smallest found size and an example element.
What is measured and what is not
The profiles smartphone with 390 and 320 pixels width, as the browser actually displays the page – with all styles, media queries and magnification factors. A text node counts when it is visible and contains at least three characters. High and low positions, folded out elements, hidden areas and everything within scripts remain outside; They're not a textbook. The result is a check line per profile: passed if no text is less than 12 pixels, otherwise passed with the number of text passages, the smallest size and the element at which it was found. Like any responsive check, this is also measured twice; the smaller of the two values counts.
Where does too little writing come from
Rarely is the basic writing too small — They are usually secondary texts: captions, footers, legal notices, labels in forms, prices in tiles. They are designed at the desk, where 11 pixels appear readable, and no longer adjusted on the phone. Just as often are scalings in percent or em, which multiply over several levels: 80 percent of 80 percent of the basic font yields 10 pixels at the end. The correction is a lower limit in the style specifications for mobile widths — 12 pixels as floor, 16 for the flow text — and the omission of nested relative sizes. If you want to keep secondary texts small, use color and distance, not the size.
- In the style specifications for mobile widths, set a lower limit of 12 pixels and 16 pixels for the flow text.
- Check footers, captions, form labels, and tiles — that’s where the small font almost always sits.
- Avoid nested relative sizes (percent, em) that shrink across multiple levels; rem always refers to the basic writing.
- View the page on a real phone, not just in the scaled-down browser window.
