For mobile reading, the optimal body text font size sits between 16px and 18px, paired with a font weight of 400 (regular). Anything smaller forces squinting. Anything heavier competes with headings and exhausts the eye. This simple combination forms the backbone of every readable mobile screen, and getting it right is the single most impactful decision a designer or content creator can make.
Mobile screens occupy a fraction of the space available on desktop monitors. Readers hold them 10 to 14 inches from their faces closer than a laptop, but with far less viewport width. At this distance, every pixel of font size carries measurable weight in comprehension speed and eye fatigue.
Research from the Nielsen Norman Group consistently shows that body text below 16px on mobile increases reading errors and reduces session duration. Font weight below 400 (light or thin) vanishes on low-brightness screens or in direct sunlight. Both problems are avoidable with deliberate choices.
A 16px base size translates well across operating systems. iOS and Android both use it as a practical minimum for comfortable reading. At 18px, you gain breathing room ideal for longer articles, older audiences, or content that prioritizes comprehension over density.
The 400 weight (standard regular) provides enough stroke thickness to remain legible without visual heaviness. For secondary text like captions or metadata, dropping to 300 can work but never for primary body content. Reserve 500 or 600 for subheadings and interactive labels.
Not every page reads the same way. Your adjustments depend on context:
Line height is the silent partner of font size. For 16px body text, a line height of 24px to 26px (roughly 1.5×) prevents lines from crashing into each other. Measure width also matters aim for 35 to 45 characters per line on mobile. Wider than that, and the eye loses its return path.
Font rendering varies by device. Test your choices on both OLED and LCD screens. Fonts that look crisp on a flagship phone may blur on budget hardware. Stick with system fonts (San Francisco, Roboto) or well-hinted web fonts like Inter or Source Sans Pro for reliable rendering.
The most frequent error is designing body text at 14px because it "looks clean" on a desktop mockup. On a real phone, it becomes a readability barrier. The fix is straightforward: increase to 16px and test on an actual device, not a simulator.
Another pitfall is using font weight 300 (light) for body text. It appears elegant in Figma but disappears on screens with reduced brightness or outdoor glare. Switch to 400 and apply 300 only to large display headings where stroke thickness is less critical.
A third mistake involves ignoring user font-size preferences. Respect the system's accessibility settings by using relative units (rem or em) instead of fixed pixels. This ensures your text scales correctly for users who have adjusted their default size.
rem).Readable mobile text is not a design preference it is a functional requirement. Start with 16px, weight 400, and a tested line height. Adjust from there based on your audience and content type. Every other typographic decision on mobile builds on this foundation. Download Now
Best Body Text Fonts for Long-Form Articles: a Readability Guide
Best Font Pairings for Small Screen Text Readability Guide
Serif vs Sans-Serif: Which Is More Readable for Body Copy?
Most Readable Google Fonts for Website Paragraphs in 2024
Best Serif Fonts for Body Text: Top Picks for Readability
How to Choose Serif Fonts for Long-Form Readability: a Complete GuidePerfect Free Fonts for Every Body