Back to Blog
typographyiosandroidmobile-designfontsui-design

App Typography Guide: iOS vs Android Font Best Practices (2026)

·12 min read·By GenDesigns Team

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.

StyleDefault SizeWeightUse Case
Large Title34ptBoldScreen titles, major headings
Title 128ptBoldSection headers
Title 222ptBoldSubsection headers
Title 320ptSemiboldCard titles, list headers
Headline17ptSemiboldImportant labels, buttons
Body17ptRegularPrimary content
Callout16ptRegularSecondary content
Subheadline15ptRegularSupporting text
Footnote13ptRegularTimestamps, metadata
Caption 112ptRegularLabels, tags
Caption 211ptRegularFine 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.

swift
// Always use text styles, not fixed sizes
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

Your 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.

RoleSizeWeightLine HeightUse Case
Display Large57spRegular64spHero text, major announcements
Display Medium45spRegular52spLarge promotional text
Display Small36spRegular44spSection headers
Headline Large32spRegular40spScreen titles
Headline Medium28spRegular36spCard titles
Headline Small24spRegular32spSubsection titles
Title Large22spRegular28spList item titles
Title Medium16spMedium24spTabs, buttons
Title Small14spMedium20spSupporting titles
Body Large16spRegular24spPrimary content
Body Medium14spRegular20spSecondary content
Body Small12spRegular16spCaptions, labels
Label Large14spMedium20spButtons, menu items
Label Medium12spMedium16spSmall buttons, chips
Label Small11spMedium16spTags, 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.

kotlin
// 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

AspectiOSAndroid
System FontSan FranciscoRoboto
Rounded AlternativeSF RoundedProduct Sans (limited use)
Default Body Size17pt16sp
Minimum Readable11pt12sp
Touch Target44pt48dp

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:

  1. Use each platform's type scale — Don't force iOS sizes onto Android
  2. Respect weight conventions — Semibold on iOS, Medium on Android
  3. Test text scaling — Both platforms need to handle size adjustments
  4. 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:

  1. Primary — What is this screen? (Large Title, Headline Large)
  2. Secondary — What are the sections? (Title, Headline Small)
  3. 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


Related reading: