Mobile Font Size Guide: Best Practices for iOS and Android Apps
Complete guide to mobile typography with recommended font sizes, spacing, and UX best practices for creating readable and accessible mobile applications.
Typography is one of the most critical aspects of mobile app design. Getting font sizes right can make the difference between a user-friendly app and one that frustrates users with poor readability. This guide provides comprehensive recommendations for mobile font sizes across different UI elements.
Why Mobile Typography Matters
Mobile screens are small, and users interact with them in various lighting conditions and contexts. Poor typography choices can lead to:
- Reduced readability and user frustration
- Accessibility issues for users with vision impairments
- Increased cognitive load when scanning content
- Poor user engagement and higher bounce rates
Font Size Hierarchy for Mobile Apps
Here's a comprehensive breakdown of recommended font sizes for different types of content:
| Type | Font Size | Usage Example |
|---|---|---|
| Heading 1 (H1) | 32–36px | Main titles, screen titles |
| Heading 2 (H2) | 24–28px | Section headers, major UI elements |
| Heading 3 (H3) | 20–22px | Subheaders, card titles |
| Body Large | 18px | Main readable content, important text |
| Body Medium | 16px | Standard readable content |
| Body Small | 14px | Descriptions, notes, meta information |
| Caption | 12px | Labels, tooltips, helper text |
| Tiny | 10–11px | Rare: disclaimers, legal information |
UX Best Practices
The 16px Baseline Rule
16px is the golden standard for body text in mobile applications. This size ensures optimal readability across different devices and user conditions. It's large enough to be easily readable without being overwhelming on small screens.
Minimum Font Size Guidelines
Never go below 14px for any interactive or important content. Smaller sizes should only be used for:
- Helper text
- Muted information
- Legal disclaimers
- Copyright notices
Line Height Consistency
Use consistent line height ratios of 1.4–1.6x the font size. This provides adequate breathing room between lines and improves readability significantly.
Dark Mode Considerations
When implementing dark mode:
- Increase contrast slightly
- Consider adding font weight for better visibility
- Test readability in various lighting conditions
- Use lighter font weights on dark backgrounds to prevent text from appearing too bold
Element-Specific Sizing Recommendations
Interactive Elements
| Element | Size | Notes |
|---|---|---|
| Button text | 16–18px | Never smaller than 16px for accessibility |
| Input fields | 16–18px | Must be clear and prevent zoom on iOS |
| Tabs & navigation labels | 12–14px | Short, punchy, easy to tap |
| CTA headlines | 24px+ | Grab attention and drive action |
Content Elements
- Article headlines: 28-32px for maximum impact
- Card titles: 18-20px for hierarchy without overwhelming
- List items: 16px for comfortable scanning
- Meta information: 12-14px for context without distraction
Platform-Specific Considerations
iOS Guidelines
- Follow Apple's Human Interface Guidelines
- Use San Francisco font family for consistency
- Consider Dynamic Type support for accessibility
- Test across different device sizes (iPhone SE to Pro Max)
Android Guidelines
- Follow Material Design typography guidelines
- Use Roboto font family as the default
- Implement scalable font sizes for accessibility
- Test on various screen densities and sizes
Implementation Tips
Design Systems
Use a Type Scale System with predefined sizes:
xs: 12px
sm: 14px
base: 16px
lg: 18px
xl: 20px
2xl: 24px
3xl: 28px
4xl: 32px
Design Tokens
Link your typography to design tokens for consistency across:
- Design files (Figma, Sketch)
- Development frameworks (React Native, Flutter)
- Platform-specific implementations
Testing Recommendations
- Device Testing: Test on actual devices, not just simulators
- Accessibility Testing: Use accessibility tools to verify readability
- User Testing: Gather feedback from actual users in real conditions
- A/B Testing: Test different font sizes for key elements like CTAs
Accessibility Considerations
WCAG Compliance
- Ensure sufficient color contrast ratios
- Support dynamic font sizing
- Test with screen readers
- Provide alternative text for decorative fonts
User Preferences
- Respect system font size settings
- Implement scalable typography
- Provide font size options in app settings
- Test with users who have vision impairments
Common Mistakes to Avoid
- Using fonts too small for critical information
- Inconsistent line heights across the app
- Ignoring platform conventions and user expectations
- Not testing on actual devices in real conditions
- Forgetting dark mode typography adjustments
- Overlooking accessibility requirements
Conclusion
Effective mobile typography is about finding the perfect balance between aesthetics, functionality, and accessibility. By following these guidelines and consistently testing with real users, you'll create mobile experiences that are both beautiful and highly usable.
Remember that these recommendations are starting points – always test with your specific content, target audience, and brand requirements to find what works best for your app.
Quick Reference Checklist
- Use 16px as your body text baseline
- Never go below 14px for important content
- Maintain consistent line height ratios (1.4-1.6x)
- Test on actual devices in various lighting conditions
- Consider dark mode typography adjustments
- Implement accessible, scalable font sizes
- Use a consistent type scale system
- Follow platform-specific guidelines