Typography can make or break your app. Users might not consciously notice good typography, but they instantly feel when something's off. Text that's too small, fonts that clash, or inconsistent sizing creates friction that drives users away.
Here's the thing: iOS and Android have different typography systems. What works beautifully on iPhone might look awkward on a Pixel. This guide covers both platforms so your app looks native and professional everywhere.
Why Typography Matters More Than You Think
Bad typography is death by a thousand cuts. Users won't say "the line height is wrong"—they'll just feel like the app is cheap or hard to use. Good typography:
- Improves readability — Users can scan and consume information faster
- Establishes hierarchy — People know what's important at a glance
- Creates trust — Professional type signals a professional product
- Reduces cognitive load — The right fonts don't make users work to read
Instagram, Airbnb, and Spotify obsess over typography because they know it directly impacts how people feel using their apps.
iOS Typography: The San Francisco System
Apple uses San Francisco (SF Pro) as the system font across all their platforms. It's designed specifically for screens and comes in two optical sizes.
SF Pro vs SF Pro Rounded
SF Pro — The default system font. Clean, neutral, professional. Use this for most apps.
SF Pro Rounded — Softer, friendlier feel. Good for apps targeting younger audiences or products that want to feel more approachable (think fitness apps, habit trackers).
iOS Text Styles
Apple defines a type scale that adapts to user accessibility settings. Using these styles means your app automatically supports Dynamic Type.
| Style | Default Size | Weight | Use Case |
|---|---|---|---|
| Large Title | 34pt | Bold | Screen titles, major headings |
| Title 1 | 28pt | Bold | Section headers |
| Title 2 | 22pt | Bold | Subsection headers |
| Title 3 | 20pt | Semibold | Card titles, list headers |
| Headline | 17pt | Semibold | Important labels, buttons |
| Body | 17pt | Regular | Primary content |
| Callout | 16pt | Regular | Secondary content |
| Subheadline | 15pt | Regular | Supporting text |
| Footnote | 13pt | Regular | Timestamps, metadata |
| Caption 1 | 12pt | Regular | Labels, tags |
| Caption 2 | 11pt | Regular | Fine print |
iOS Typography Rules
Minimum touch target: 44pt height for tappable text
Line height: Apple recommends 1.2x to 1.5x the font size for body text
Letter spacing: SF Pro is optimized for default tracking. Only adjust for display text.
Maximum width: Keep body text under 70 characters per line. On iPhone, that's usually handled by screen width, but watch out on iPad.
Dynamic Type: Not Optional
Supporting Dynamic Type isn't just nice—it's expected on iOS. Users who increase text size will be frustrated by apps that ignore their preferences.
// Always use text styles, not fixed sizes
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = trueYour designs should accommodate text scaling from 50% smaller to 300% larger than default.
Android Typography: The Roboto & Material System
Android uses Roboto as the system font, with Material Design 3 providing the type system guidelines.
Roboto vs Roboto Flex
Roboto — The workhorse system font. Clean and highly readable across sizes.
Roboto Flex — A variable font version offering more control over weight and width. Great for brands wanting subtle customization while staying native.
Material Design 3 Type Scale
Material Design 3 defines roles rather than just sizes, making it clearer when to use each style.
| Role | Size | Weight | Line Height | Use Case |
|---|---|---|---|---|
| Display Large | 57sp | Regular | 64sp | Hero text, major announcements |
| Display Medium | 45sp | Regular | 52sp | Large promotional text |
| Display Small | 36sp | Regular | 44sp | Section headers |
| Headline Large | 32sp | Regular | 40sp | Screen titles |
| Headline Medium | 28sp | Regular | 36sp | Card titles |
| Headline Small | 24sp | Regular | 32sp | Subsection titles |
| Title Large | 22sp | Regular | 28sp | List item titles |
| Title Medium | 16sp | Medium | 24sp | Tabs, buttons |
| Title Small | 14sp | Medium | 20sp | Supporting titles |
| Body Large | 16sp | Regular | 24sp | Primary content |
| Body Medium | 14sp | Regular | 20sp | Secondary content |
| Body Small | 12sp | Regular | 16sp | Captions, labels |
| Label Large | 14sp | Medium | 20sp | Buttons, menu items |
| Label Medium | 12sp | Medium | 16sp | Small buttons, chips |
| Label Small | 11sp | Medium | 16sp | Tags, timestamps |
Android Typography Rules
Minimum touch target: 48dp height for tappable elements
Scalable units: Always use SP (scale-independent pixels) for text, not DP
Line height: Material recommends specific line heights for each style (see table above)
Content width: Aim for 40-60 characters per line for optimal readability
Supporting Font Scaling
Like iOS, Android users can adjust system-wide text size. Use SP units and avoid fixed heights on text containers.
// Don't do this
textView.textSize = 16f // fixed px
// Do this
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16f)See great typography in context: Generate app screens with proper type hierarchy — GenDesigns applies platform-appropriate sizing and weights automatically.
iOS vs Android: Key Differences
Understanding platform differences helps you create designs that feel native on both. For a broader look at platform-specific patterns beyond typography, see our guide on iOS vs Android design differences.
Font Defaults
| Aspect | iOS | Android |
|---|---|---|
| System Font | San Francisco | Roboto |
| Rounded Alternative | SF Rounded | Product Sans (limited use) |
| Default Body Size | 17pt | 16sp |
| Minimum Readable | 11pt | 12sp |
| Touch Target | 44pt | 48dp |
Visual Differences
iOS tends toward:
- Slightly larger default text
- Bolder weight for emphasis
- Less contrast between hierarchy levels
- Centered titles in navigation bars
Android tends toward:
- More distinct hierarchy levels
- Medium weight for emphasis (not bold)
- Left-aligned titles
- Larger touch targets
Practical Implications
If you're designing one app for both platforms:
- Use each platform's type scale — Don't force iOS sizes onto Android
- Respect weight conventions — Semibold on iOS, Medium on Android
- Test text scaling — Both platforms need to handle size adjustments
- Mind the touch targets — Android's 48dp vs iOS's 44pt matters for button design
Choosing Custom Fonts
Sometimes system fonts aren't right for your brand. Here's how to choose custom fonts that work on mobile.
Readability First
Pretty fonts that are hard to read will hurt your app. Test any custom font at:
- Body text size (14-17pt)
- On actual devices (not just Figma)
- In low light and bright sunlight
- With long-form content (not just headlines)
Safe Custom Font Choices
These fonts are battle-tested on mobile:
Sans-Serif:
- Inter — Open source, highly readable, excellent for apps
- Nunito — Friendly and approachable, great for consumer apps
- Source Sans Pro — Clean and professional, Adobe's open source workhorse
- Poppins — Geometric, modern, popular for tech products
- Lato — Warm and stable, good for finance/health apps
Serif (use sparingly):
- Source Serif Pro — Readable at small sizes
- Merriweather — Designed for screens
- Lora — Elegant but legible
Fonts to Avoid
- Display fonts for body text — Fonts designed for headlines become illegible at small sizes
- Thin weights — Anything below 400 weight struggles on screens
- Overly stylized fonts — That quirky font looks fun until users need to read 500 words
- Fonts with poor hinting — Some fonts look blurry on Android's rendering engine
Font Loading Considerations
Custom fonts impact app performance:
- Each font file adds to your app bundle
- Multiple weights multiply the impact (Regular + Bold = 2 files)
- Variable fonts can reduce file count but aren't supported everywhere
For most apps, stick to 2 weights maximum: Regular and Semibold/Bold.
Building Type Hierarchy
Good hierarchy means users can scan your interface and understand what matters.
The Three-Level Rule
Most screens need only three levels of hierarchy:
- Primary — What is this screen? (Large Title, Headline Large)
- Secondary — What are the sections? (Title, Headline Small)
- Body — What's the content? (Body text)
More levels create visual noise. If you need a fourth level, you probably have too much on the screen.
Creating Contrast
Hierarchy needs contrast. You have four tools:
Size — Larger text draws attention first
Weight — Bold stands out from regular
Color — Darker or accent colors create emphasis
Space — More whitespace around important elements
Use at least two of these for each hierarchy jump. Size alone often isn't enough.
Example: Settings Screen
[Large Title] Settings → Primary
[Headline] Account → Secondary
[Body] Email: user@example.com → Body
[Caption] Last updated 2 hours ago → Supporting
[Headline] Notifications → Secondary
[Body] Push notifications → Body
[Footnote] Receive alerts about activity → Supporting
Notice how each level is visually distinct without needing five different text styles.
Typography for Accessibility
Accessible typography isn't just ethical—it's legally required in many contexts and improves usability for everyone.
Minimum Sizes
- Body text: 16sp/16pt minimum (14 acceptable for secondary text)
- Labels and buttons: 14sp/14pt minimum
- Fine print: 12sp/12pt minimum, but don't rely on it for important info
Color Contrast
WCAG 2.1 requires:
- 4.5:1 contrast ratio for normal text
- 3:1 contrast ratio for large text (18pt+ or 14pt bold+)
Light gray text on white backgrounds fails these requirements. Test with a contrast checker.
Line Length and Spacing
- Line length: 45-75 characters for body text (optimal: 66)
- Line height: 1.4x to 1.6x the font size
- Paragraph spacing: At least 1.5x the line height between paragraphs
Touch Targets (Again)
Buttons with text need adequate size regardless of font size:
- iOS: 44pt minimum height
- Android: 48dp minimum height
Small text inside a small button is a double accessibility failure.
Common Typography Mistakes
Mistake 1: Too Many Fonts
Using three or four different fonts creates visual chaos. Stick to one font family, maybe two if you have a specific reason (like a display font for branding).
Fix: One typeface, 2-3 weights.
Mistake 2: Inconsistent Sizing
Random font sizes throughout the app make hierarchy impossible to parse.
Fix: Define a type scale and stick to it religiously. Don't use 14pt here and 15pt there.
Mistake 3: Ignoring Platform Conventions
Using iOS typography rules on Android (or vice versa) makes your app feel foreign.
Fix: Study each platform's guidelines. When in doubt, use system fonts.
Mistake 4: Centered Everything
Center alignment works for headlines but makes body text harder to read. Our eyes need a consistent left edge to track lines.
Fix: Left-align body text. Reserve center alignment for short, prominent text.
Mistake 5: Poor Contrast
Light gray text on white backgrounds is everywhere and fails accessibility standards.
Fix: Use contrast checkers. When in doubt, go darker.
Mistake 6: Neglecting Line Height
Default line height is often too tight for comfortable reading, especially on mobile where your face is close to the screen.
Fix: 1.4x to 1.6x font size for body text.
Typography in AI Design Tools
When using AI tools to generate app designs, typography quality depends heavily on your prompts.
Prompts That Get Good Typography
Weak:
Create a finance app
Strong:
Create a finance app with clean typography. Use a modern
sans-serif font with clear hierarchy between account
balances (prominent), transaction amounts (medium), and
timestamps (subtle). Ensure enough contrast for easy
reading.
What to Specify
- Style: Modern, classic, playful, professional
- Hierarchy: Call out what should be most prominent
- Platform: iOS or Android conventions
- Accessibility: "High contrast" or "accessible text sizes"
Refining AI Typography
After generation, look for:
- Is the hierarchy clear?
- Are text sizes consistent across screens?
- Does body text look readable?
- Are there accessibility concerns?
Request changes like "increase the contrast of secondary text" or "make the hierarchy more distinct between titles and body."
Quick Reference: Typography Checklist
Typography is just one piece of the puzzle — pair this with our full mobile app design checklist to make sure every element is covered. Before shipping any screen, verify:
- Body text is minimum 16sp/16pt
- Color contrast meets 4.5:1 ratio
- Touch targets are 44pt (iOS) or 48dp (Android) minimum
- Only 2-3 hierarchy levels per screen
- Line height is 1.4x+ for body text
- Custom fonts are tested on real devices
- Text scales properly with system settings
- Only 1-2 font families used
- Weight is used meaningfully (not randomly)
- Platform conventions are followed
Resources
- Apple Human Interface Guidelines - Typography
- Material Design 3 - Typography
- Google Fonts - Free fonts optimized for web and mobile
- Contrast Checker - Verify accessibility compliance
- GenDesigns - AI app design with typography-aware generation
Related reading:
- iOS vs Android Design: The 7 Differences That Actually Matter - Platform-specific design
- Mobile App Color Schemes 2026 - Color palette guide
- Mobile App Design Checklist - Complete design checklist
