Choosing the right system font on mobile is not a minor detail.It's a product decision: it determines how easy we read, how quickly we navigate, how well we understand, and ultimately, how we convert and retain. In an environment where small screens dominate traffic, text becomes the primary interface.
It's not just aesthetics that matter; Typography has a direct impact on UX, accessibility, and brand consistency.A good choice improves readability effortlessly, reduces cognitive load, and conveys professionalism. When 95% of digital communication happens through text, putting typography front and center is a safe bet.
Why typography matters so much in mobile apps
Typography is no longer an ornament; is a pillar of interaction designIt affects readability, content comprehension, and perceived quality. If the reader struggles to read, it takes longer to understand, they interact less, and they abandon the text sooner.
From a technical point of view, a suitable font increases readability (especially in text-heavy apps), reinforces the overall experience and reflects the brand's personality. Adjusting size, contrast, line spacing, or line length isn't just about beauty—it improves usability and prevents friction.
It is advisable to validate these decisions with real users: A/B tests and tests with different profiles (ages, visual needs, devices) are the most reliable way to detect which settings generate the most reading, interaction and conversions.
How we read on screens: expectations and rhythm
On mobile, the reader usually looks for speed and focus; Scan more, dig less, and expect to be productive.Classic typographic literature already indicated that well-contrasted text on a screen can be read as efficiently as on paper; with today's screens, the technical barrier is even lower.
The key is to facilitate the visual journey: Not very long lines, generous line spacing, clear hierarchy and good contrastThese factors guide the eyes with less effort and make reading a fluid experience.
Key principles: size, line length, leading and spacing
Recommended base sizeOn mobile, 16px for body text is a very solid starting point. Apple recommends 11 to 17 points for iOS; on Android, the guidelines are very similar. If your chosen font feels small, compare it to a system font (e.g., Arial) and adjust.
Relative units. Use em/rem to scale proportionally and respect user preferences. This makes it easier to adapt to zooms and accessibility settings without breaking the layout.
Optimal line lengthOn mobile, aim for 35 to 50 characters per line; in many cases, 35–45 works better. This way, you won't lose the reader's attention or break the flow. You can control this with ch in CSS.
Line spacingA line height of 1.5–1.6 times the font size greatly improves readability. On small screens, 1.6 em works especially well; on larger screens, 1.5 em is usually sufficient.
BlanksDon't clutter every screen. Margins, paragraph spacing, and the air around calls to action increase clarity and conversion, especially on critical screens such as payment or subscription.
Contrast and color: WCAG as a baseline
The contrast is unavoidable: 4.5:1 for normal text and 3:1 for large text (≥18 pt or ≥14 pt bold). These ratios optimize readability and comply with WCAG 2.1 AA.
| Text size | Minimum contrast | Suggested use |
|---|---|---|
| Normal text (< 18pt) | 4.5:1 | Body, secondary navigation |
| Large text (≥ 18pt) | 3:1 | Headlines, subheadlines |
| Bold (≥ 14pt) | 3:1 | Section headings, emphasis |
In changing light contexts (street, interior, night), strong contrast is even more critical. If there are background images, add one overlap or adjust the layout so that the text remains legible.
Serif or sans serif: the eternal debate applied to mobile
In modern mobile interfaces, sans serif fonts are usually preferable for its clean lines and proportions designed for the screen. Android uses Roboto; iOS uses San Francisco (after Helvetica/Helvetica Neue). Both are sans serifs optimized for digital readability.
This does not prevent some serifs from working well in headlines or editorial content; The relevant thing is the clarity of forms, moderate contrast and a sufficient x-height to perform in small sizes.
Adaptive typography: allowing text to “breathe” according to the screen
Adapt the typography to each width and density. Define a base size and scale the rest with relative units, media queries, or functions like clamp(). Maintain consistent relationships between headings and body text, and control line length.
| Screen width | Suggested base | Line-height |
|---|---|---|
| Mobile (< 480px) | 16 px | 1.5 |
| Tablet (480–768 px) | 17 px | 1.55 |
| Desktop (> 768 px) | 18 px | 1.6 |
Furthermore, take care of the orientation: Vertically, shorter lines; horizontally, make sure the line length doesn't go too far and that the hierarchy remains clear.
Line length and reading pace
The goal is to minimize eye jerks or regressions. 35–45 characters per line on mobile It usually offers an excellent balance. You can apply something like this:
.content { max-width: 45ch; margin: 0 auto; padding: 0 1rem; }
On very small screens (<320 px), reduce to 35–40 characters; on tablets, you can go up to 60–75 or even use multiple columns for editorial content.
Hierarchy, weights and visual rhythm
A clear hierarchy speeds up understanding. It's not just about size: : weight, kerning, and top/bottom spacing also mark levels.
- Limit to 3–4 levels (H1–H3/H4 + body) on mobile to avoid noise.
- Use differentiated weights (Medium/Semibold for titles, Regular for body).
- Keep consistent spacing between levels to create predictable patterns.
For online stores or dense content, some useful weight guidelines: p in 400; H1 at 700; H2 at 600–700; H3 at 500–600; buttons/links at 500–600. Avoid Light (≤300) on small bodies.
h1 { font-size: 2rem; font-weight: 700; }
h2 { font-size: 1.75rem; font-weight: 600; }
h3 { font-size: 1.5rem; font-weight: 500; }
h4 { font-size: 1.25rem; font-weight: 400; }
p { font-size: 1.125rem; font-weight: 400; }
a, button { font-weight: 500; }
Accessibility: Beyond Size
Accessibility is non-negotiable. Respects system text size and user zoom, make sure your typography is compatible with screen readers and take care of the contrast.
- Line spacing 1.5–1.6x the font size for easy following.
- Letter-spacing: add 5–10% in dense fonts to prevent caking.
- Avoid ambiguous glyphs (0/O, l/I) or choose fonts where they are clearly distinguishable.
- Supports Dynamic Type (iOS) or equivalent scales on Android.
Consider users with dyslexia or low vision. Sufficient contrast, stable line rhythms and clear shapes make real differences in understanding and eye strain.
System fonts vs. custom fonts
Use native fonts like San Francisco (iOS) or Roboto (Android) It has clear advantages: performance, consistency with the system, accessibility compliance, zero licensing costs, and good representation in very diverse densities.
Now, there are branding projects that require their own typographic identity. Netflix Sans, Airbnb Cereal or VSCO Gothic These are examples of proprietary fonts created to differentiate, while maintaining legibility and performance on screen and in print.
If you are looking for high-quality free alternatives, IBM Plex (Sans/Serif/Mono) or Inter They perform wonderfully in small sizes and offer large, well-hinted families.
What to look for when choosing a font for your app
Beyond style, focus on performance and coverage. Check the x-height, stroke contrast, shape clarity, and weight availability.. Also check supported languages ​​if you operate in international markets.
- Readability in small sizes and low/high density displays.
- Adaptability: that scales without losing definition or blending into the background.
- File weight: WOFF2, character subset, font-display: swap.
- Licenses: : costs and restrictions on use in app (native/webview).
Pairings and families that work well
A simple rule: do not use more than two familiesIdeally, one for the body and one for the headliners (or a single family with various weights/widths). Some pairings and options:
- San Francisco / Roboto: Secure, native foundation for every platform.
- Inter for body + Montserrat for titles: clean and contemporary.
- Ubuntu (versatile) or Karla (minimalist) for apps with a human tone.
- Playfair Display o Abril Fatface for headlines with character, combined with neutral sans.
- Arvo o Price for body in designs that support robust serif or sans.
If you work on branding with specialized catalog families, there are collections that are very interface-oriented: TT Interphases Pro, TT Norms Pro, TT Fellows or TT Neoris (among others) combine neutrality, legibility and a variety of weights; and others that are more expressive such as TT Bluescreens, TT Autonomous, TT Firs Neue/TT Firs Text or TT Fors/TT Severs offer controlled accents in small sizes.
Useful CSS Techniques for Mobile Typography
For typography to respond well to screen changes, combines relative units with media queries and, where appropriate, fluid functions:
@media (max-width: 500px) { body { font-size: 16px; line-height: 1.5; } }
For fluid sizes with limits, clamp() It helps define minimum, preferred, and maximum values ​​without sudden jumps. Controls line width with ch and avoids excessively wide columns.
Performance and reliability: don't let the font slow down your app
Loading too many variants is a common trap. Optimize subsetting, use WOFF2, limit weights and styles and apply font-display: swap to not block initial rendering.
- Preload only what is essential and with priority.
- Well-chosen fallbacks (system stack) to avoid aggressive visual jumps.
- Audit block time and CLS by reflow when webfonts arrive.
Particular cases: dense text, huge headlines and microcopy
In very long or complex texts, Increase the base size by one point and reinforce the line spacing; in giant headlines, you can lighten the weight (300–400) if the family is robust to avoid visual smudging.
For microcopy (errors, labels, help), avoid falling below 14 px and increases contrast. For buttons, 500–600 weight improves visibility without being overly loud.
Continuous measurement: evaluate, learn, and adjust
Nothing replaces real evidence. Run A/B tests by varying base size, line spacing, weights, and contrast; monitors reading time, scroll depth, CTA clicks, and bounce rate on text-based screens.
Tools like heat maps and recorded sessions help identify areas of reading friction. Schedule periodic reviews and document typographic changes to understand their impact on business and accessibility.
Extra good practices that make a difference
On older devices or low-density displays, Regular/medium weights play better than light or extreme bold. in small sizes. The family's "hinting" also plays a role: prioritize fonts with good screen performance.
If your app is multilingual, check diacritics and special glyphs (tildes, eñes, signs), and that the number “1” and the lowercase “l” are not confusedThese are details that prevent errors in critical workflows such as login or checkout.
Quick guide to recommended sizes and fits
Her first book of poems, Cuerpo,: minimum 16 px; line spacing 1.5–1.6; 35–45 characters per line on mobile. Contrast 4.5:1.
Subtext/auxiliary: 14 px with high contrast and 1.5 line spacing. Avoid lines below 14 px except in highly controlled micro UIs.
Headlines: proportional scale with respect to the body; H1 700, H2 600–700, H3 500–600; reduce line spacing by 10–15% compared to the body.
Buttons and links: 500–600 weight; size consistent with touch target; minimum contrast 4.5:1 if button is text-dependent.
Featured sources by objective
For maximum neutrality and performance on mobile, Inter, Roboto, San Francisco, Karla, Ubuntu. For headlines with character, Playfair Display, April Fatface balanced with sober sans-serifs. For legible serifs in body type or specific sections, Arvo performs very well.
When the brand requires proprietary personality and high volume, it values ​​a tailor-made family, taking into account costs, readability and cross-platform support (Examples: Netflix Sans, Airbnb Cereal, VSCO Gothic). If you're on a budget, IBM Plex and Inter are great alternatives.
With all of the above in mind, Think of typography as a living layer of your product: It evolves with analytics, accessibility needs, and market feedback. Text is the most widely used interface; nurturing it has a direct return on business and user satisfaction.
