Mobile Font Size Checker
Viewport & type
The 0.5em/0.55em/0.6em factors are averages — re-measure with the real typeface if the design is tight.
Checks
Mobile sizing reference
| Element | Minimum | Comfortable |
|---|---|---|
| Body text | 16px | 16–18px |
| Secondary / caption | 12px | 14–16px |
| Form input | 16px (iOS zoom) | 16–18px |
| Button label | 14px | 16–18px |
| Page heading | 20px | 24–32px |
Values are the common mobile guidance band; WCAG itself sets no absolute font-size minimum.
You Might Also Need
The mobile font size checker works out how many characters a line will carry inside a real phone viewport, then reports the size and measure checks that follow from it. It answers a question a desktop review cannot: whether the type that looked comfortable at 1440 pixels still works at 390.
What is Mobile Font Size Checker?
The mobile font size checker takes a viewport width, the page padding on each side, a font size and a family width factor, then computes the available text width, the characters per line and the size that would produce a 65 character measure.
- Viewport width defaults to 390px and page padding to 16px a side, and the available text width is the viewport minus twice the padding.
- Family width factors are 0.5em average for a humanist sans, 0.55em for a serif and 0.6em for a monospace face, so the same size produces different line lengths on each.
- Characters per line is the available width divided by the size multiplied by that factor, which is the figure the measure check reads.
- Four checks are scored: body text at 16px or more, an absolute floor of 12px, the iOS auto zoom condition for form inputs, and a measure between 45 and 75 characters.
- The text role selector covers body text, caption, form input and heading, and the size that would give a 65 character measure is reported alongside the checks.
The iOS auto zoom check is the one that catches people out. Safari on iOS enlarges the whole page when a focused text input is smaller than 16px, so a 15px input can make a page appear to jump on first use, and the check exists to catch that case before it reaches a device. The reference table that follows gives the guidance band per element: 16px for body text and 16 to 18px comfortable, 12px minimum for secondary and caption text, 16px for form inputs with the same auto zoom reason, 14px for a button label, and 20px for a page heading. The note under the table says plainly that WCAG itself sets no absolute font-size minimum, which is why the 16px figure is presented as a widespread norm rather than as a requirement.
- The character width factors are averages, so a condensed or wide face will drift from the estimate, and the panel tells you to re-measure with the real typeface when the design is tight.
- The measure check assumes a single column: a layout with a sidebar or a card grid has less usable width than the calculation assumes.
- No leading is modelled, and the 45 to 75 character band says nothing about line height.
- Device coverage is limited to whatever viewport and padding you enter, so a design has to be checked once per breakpoint rather than once for phones in general.
- The auto zoom check is stated for iOS Safari and does not describe every mobile browser's behaviour.
Run it per breakpoint whenever a fluid size or a clamp is being introduced, since a size that reads well at 390 can fall under the measure band at 320 and over it on a large phone. When the characters per line figure keeps missing, the paragraph width optimizer works through the same problem with more variables, the WCAG font size checker supplies the spacing minimums that apply at the chosen size, and a fluid type scale is the structural answer rather than a per-breakpoint size fix, which is the CSS fluid typography builder's job.
How to use Mobile Font Size Checker
- Enter the viewport width and the page padding so the available text width matches the real layout at that breakpoint.
- Set the font size, choose the family width factor that matches the face, and pick the text role being checked.
- Read the characters per line figure and the suggested size for a 65 character measure, then compare against the four checks.
- Repeat for each breakpoint you ship, and raise any form input below 16px before it triggers the iOS auto zoom behaviour on a device.
When to use Mobile Font Size Checker vs related tools
Use it when a type scale is being adapted for mobile, when a clamp or fluid size is tuned, or when a body size chosen on a desktop layout needs to be justified at 390 pixels. It is also the quickest way to catch a form input that will zoom the whole page on an iPhone, which is a defect rather than a preference. When the measure itself is the problem, the paragraph width optimizer works it through properly, the WCAG font size checker states the spacing minimums at the chosen size, and where several breakpoints need one continuous scale, the CSS fluid typography builder is the structural fix.
Privacy & Security
This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.