App Typography Guide: How to Pick Fonts Without a Designer
A Practical Guide for No-Code Builders With Font Sources, Sizes, and Pairings That Actually Ship
Typography is the part of app design most builders ignore until users complain it is hard to read. The right font system makes a five-screen app feel polished. The wrong one makes a brilliant app feel cheap. This guide gives you the rules professional designers use, the font pairings that work for each industry, and the WCAG sizes that keep your app accessible. If you are still planning your visual identity, our guide to mobile app color schemes covers the other half.
What You Will Learn
- The 2-font rule that simplifies every typography decision
- Font pairings for 6 major app industries
- The right font sizes for phones (with WCAG minimums)
- The 7 typography mistakes that hurt readability and retention
Backed by Apple Human Interface Guidelines, Google Material Design, and patterns we see across 10 million+ apps built on Appy Pie AI. Rated 4.7/5 on G2 from 1,388 reviews.
Build an App With Smart TypographyTL;DR Quick Summary
Use 2 fonts maximum: one for headings, one for body. Pick pairings that match your industry expectation. Set body text at 14 to 16 pixels with 1.5 line height. Hit WCAG accessibility minimums. The whole system takes under an hour to set up and works for the lifetime of your app.
Table of Contents
Jump to any section. This guide covers the 2-font rule, font hierarchy, industry pairings, sizes, accessibility, and how Appy Pie AI applies typography automatically.
- Why Typography Matters More Than Most Builders Think
- The 2-Font Rule: Heading + Body
- Typography Hierarchy: 5 Levels Every App Needs
- How to Choose Your Primary Font
- iOS vs Android System Fonts
- Industry Font Pairings: 6 Verticals
- Font Sizes That Actually Work on Phones
- Line Height, Letter Spacing, and Paragraph Spacing
- 7 Typography Mistakes That Hurt Readability
- How Appy Pie AI Handles Typography
- Frequently Asked Questions
- Conclusion
Why Typography Matters More Than Most Builders Think
Typography is roughly 95% of what users read in your app. Every word in every screen passes through your font system. Get it right and the app feels premium. Get it wrong and even the best functionality feels amateur.
Where Typography Affects Your App
- App store screenshots: Typography in your screenshots determines tap-through rates
- Onboarding screens: Bad type makes simple instructions feel confusing
- Buttons and CTAs: Font weight and size directly affect tap rates
- Content readability: Body text at the wrong size loses readers within seconds
- Brand perception: The right font signals premium, playful, serious, or fun before users read a word
Tab bars, icon labels, and navigation patterns all rely on legible typography. We covered the structural side in our app navigation patterns guide.
The 2-Font Rule: Heading + Body
Professional designers use the 2-font rule because it solves the entire typography decision tree in one sentence. You pick one font for headings and one for body text. That is it. Every other text style flows from those two choices.
Why 2 Fonts Work Better Than 4
- Visual cohesion: 2 fonts feel deliberate; 4 fonts feel chaotic
- Faster decisions: Once your 2 fonts are set, every typography choice flows from them
- Lower maintenance: Updating font sizes across the app is dramatically simpler
- Better performance: Each additional font file slows app and web loading
- Stronger brand: A consistent 2-font system reads as a brand; 4+ fonts read as inconsistent
The 3 Pairing Approaches
If you cannot decide, default to Approach 1: a single font with different weights. It is the safest and lowest-effort path to a clean app.
Typography Hierarchy: 5 Levels Every App Needs
Once you have your 2 fonts, you need to define the type scale. Most apps need exactly 5 text styles. More than 5 and you are over-engineering. Less and your app starts looking flat.
| Level | Use Case | iOS Size | Android Size | Weight |
|---|---|---|---|---|
| Display H1 | Screen titles, key headlines | 28-34px | 24-28sp | Bold (700-800) |
| Section H2 | Card titles, section headers | 20-22px | 18-20sp | Semibold (600) |
| Body | Paragraphs, descriptions | 14-16px | 14sp | Regular (400) |
| Caption | Metadata, timestamps, hints | 11-12px | 12sp | Regular (400) |
| Label / Button | Buttons, tags, UI labels | 14-15px | 14sp | Semibold (600) |
Keep proportional ratios across the hierarchy. The most common ratio is 1.25 (called the major third), where each level is 25% larger than the level below. This creates a visual rhythm that feels natural.
How to Choose Your Primary Font
The primary font (the one you use for body text) carries 90% of the typography load. Pick this font first. Everything else follows.
The 3 Sources to Pull From
- System fonts: SF Pro on iOS, Roboto on Android. Free, fast, optimized for mobile
- Google Fonts: Free, well-tested, easy to license. Inter, Open Sans, Nunito are reliable picks
- Premium type foundries: Hoefler, Commercial Type, Pangram Pangram. Pay for distinct visual identity
Free Font Sources Worth Knowing
- Google Fonts: Largest free library, easy to license
- Fontshare: Quality free fonts from premium foundries
- Befonts: Free fonts curated by independent designers
- DaFont: Decorative and display fonts (check licenses carefully)
What to Look for in a Body Font
- Wide x-height: Lowercase letters that appear tall make small text more readable
- Open counters: The empty spaces inside letters like “a” and “e” should be generous
- Multiple weights: At minimum, regular (400), medium (500), and bold (700)
- Multiple language support: If your app targets international users
For most builders, the default answer is Inter. It was designed specifically for screens, has 9 weights, supports 100+ languages, and is free.
iOS vs Android System Fonts
Both Apple and Google built mobile-optimized system fonts and made them free for developers. If you do not have a strong reason to pick a custom font, use the system font on each platform. Apps using system fonts feel native because they match every other app on the phone.
SF Pro (iOS)
- Designed by Apple specifically for iOS readability
- 10 weights from Ultralight to Black
- Includes optical sizes that adjust automatically based on font size
- Free to use in iOS apps
- Compatible with iOS dynamic type accessibility settings
Roboto (Android)
- Designed by Google for Android UI
- 12 weights including Roboto Flex variable font
- Excellent legibility at small sizes
- Free under Apache License
- Pairs well with Roboto Slab and Roboto Mono for variety
Industry Font Pairings: 6 Verticals
Match your typography to the visual conventions of your category. Each industry has fonts that feel native to it, and breaking the convention should be a deliberate choice.
Editorial serif headings paired with a clean sans-serif body. Sets a refined, appetizing tone for restaurant and recipe apps.
Playfair Display + InterGeometric, technical sans-serif throughout. Communicates precision, trust, and modern banking confidence.
IBM Plex Sans (Bold + Regular)Rounded, friendly sans-serif headings paired with a humanist body font. Approachable and reassuring.
Nunito + Open SansEditorial slab serif headlines with a clean sans-serif body. Classic newspaper feel adapted for mobile.
Merriweather + LatoPlayful rounded display font paired with a highly readable body. Friendly and approachable for young readers.
Quicksand + Open SansRefined serif display with a minimal sans-serif body. Quiet confidence for premium and high-end products.
Cormorant Garamond + Inter LightFont Sizes That Actually Work on Phones
Phone screens are small, hands shake, and lighting varies. Mobile typography is not desktop typography scaled down; it has its own rules. Here are the sizes that work in practice.
The Mobile Type Scale
| Element | iOS | Android | WCAG Min | When to Increase |
|---|---|---|---|---|
| Display H1 | 34px | 28sp | 18px | Always meets WCAG |
| Section H2 | 22px | 20sp | 18px | Always meets WCAG |
| Subhead H3 | 18px | 16sp | 14px bold | Always meets WCAG |
| Body | 16px | 14sp | 12px | Increase to 17-18px for readers 50+ |
| Caption | 12px | 12sp | 11px (with 4.5:1 contrast) | Never go below 11px |
Special Cases
- Older audiences: Bump body text to 17-18px for apps targeting users over 50
- Reading apps: Allow user-controlled text size (always honor system preferences)
- Children’s apps: Increase body to 16-18px for primary readers under 12
- Long-form reading: Set body to 17-18px and keep line length to 45-75 characters
- Localized apps: Some scripts (Arabic, Devanagari) need 1-2px more than Latin equivalents
Line Height, Letter Spacing, and Paragraph Spacing
Font choice gets the credit, but spacing does the work. The same font can feel premium or cluttered depending on how you space it.
Line Height (Leading)
- Body text: 1.5 to 1.6 of the font size (16px font = 24-26px line height)
- Headings: 1.1 to 1.3 (tighter for more impact)
- Captions: 1.4 to 1.5 (slightly looser to compensate for small size)
Letter Spacing (Tracking)
- Body text: 0 (default)
- Display headings: -0.01em to -0.02em (tighter for visual cohesion)
- All-caps labels and buttons: +0.05em to +0.1em (looser, since caps need air)
- Captions: 0 to +0.02em (slight increase for legibility)
Paragraph Spacing
- Between paragraphs: 1em to 1.5em of margin (one full line of empty space)
- Before headings: 2em (clear separation from previous content)
- After headings: 0.5em (heading visually anchors the content below)
If your app feels cramped, increase line height before changing the font. If your headings feel disconnected from their content, reduce the space below them. Spacing fixes more typography problems than font swaps.
7 Typography Mistakes That Hurt Readability
These are the most common typography issues we see across apps that struggle with engagement. Each one has a quick fix.
1. Using too many fonts
Three or more fonts in one app create visual chaos. Stick to 2 fonts maximum (heading + body). If you feel you need a third for variety, change the weight or color of the body font instead.
2. Body text under 14px
If users have to squint, they leave. Never go below 14px for body text on iOS, 14sp on Android. The space saved is not worth the readers lost.
3. Long line lengths on phones
Lines longer than about 50 to 60 characters are hard to follow on a small screen. Limit content width or use larger margins to keep lines short.
4. Centered body text
Centered alignment is fine for headings. For body text longer than two lines, centered alignment forces the eye to relocate the start of each line, slowing reading dramatically. Always left-align body text.
5. Pure black on pure white
True black on true white creates harsh contrast that strains the eye. Use #0F172A or #1E293B for body text and #FFFFFF or #F8FAFC for backgrounds.
6. Hairline weight at small sizes
Light or thin font weights look elegant in marketing materials but disappear at small sizes. Use medium or regular for any text under 18px.
7. Ignoring system font scaling
iOS and Android both let users increase text size system-wide for accessibility. If your app forces a fixed font size, you exclude users who need larger type. Always honor system preferences.
How Appy Pie AI Builder Handles Typography
If you are using a no-code platform, you do not have to manually pick a font system. Appy Pie AI AI App Generator picks a starter font pairing that fits your app description, then lets you customize from the editor.
What this looks like in practice
When you describe your app, the AI starts with a font pairing tuned to your category. Food apps default to a different stack than fintech or kids apps. The default works for most builders out of the box.
Once you submit your app idea, the AI begins generating both the structure and a typography system suitable for your category.
Customizing Fonts in the Editor
After the AI builds the initial app, the editor lets you adjust fonts globally or per element. Most builders never need to touch the defaults, but the option is there.
Testing Fonts on a Real Phone
The QR code preview is the fastest way to verify your font choices look right on actual hardware. Scan the code with your phone camera and the live app opens with your typography applied. Adjust in the editor and see the change on your phone in real time.
Generating Content That Matches the Type System
The AI also generates app content (headings, descriptions, labels) using a style consistent with the chosen typography. The result is an app where fonts, content tone, and visual rhythm all align without any manual styling.
How real Appy Pie AI apps use typography
Memorial Tacos uses a clean sans-serif throughout their food ordering app, keeping the visual focus on menu photography rather than fancy headlines. The typography stays out of the way so customers can scan menus quickly. Built in 12 days, the app shifted 35% of orders away from third-party platforms.
Frequently Asked Questions About App Typography
How many fonts should a mobile app use?
Two fonts maximum. One for headings, one for body text. Adding a third font almost always hurts more than it helps. If you feel like you need a third for variety, change the weight or color of the body font instead.
What is the best font for a mobile app?
It depends on the platform and category. For iOS-only apps, SF Pro is the safest choice. For Android, Roboto. For cross-platform, Inter is the most reliable neutral pick. For categories like food, finance, or kids, see our industry pairings section above.
What font size is best for mobile apps?
16px for body text on iOS, 14sp on Android. Display headings: 28-34px on iOS, 24-28sp on Android. Captions: 11-12px minimum, never lower. These sizes cover the WCAG accessibility minimums and read comfortably on most phones.
Are Google Fonts free for commercial apps?
Yes. All Google Fonts are licensed under the SIL Open Font License or Apache License, both of which allow free commercial use. You can embed them in apps, websites, and printed materials without paying licensing fees.
What is the 2-font rule?
The 2-font rule says: pick one font for headings and one for body text. Use those two consistently across your entire app. The most readable, professional-looking apps follow this rule. The rule prevents over-design and keeps your typography system manageable.
How do I make my app accessible for users with vision impairments?
Honor system font scaling so users can increase text size globally. Hit WCAG minimums (4.5:1 contrast for body text, 3:1 for UI components). Avoid hairline weights below 18px. Use clear sans-serif fonts for body content.
Should I use serif or sans-serif fonts in mobile apps?
Sans-serif for most body text. Sans-serif fonts are easier to read at small sizes on phone screens. Serif fonts work well for display headings, especially in news, food, and luxury apps where they signal editorial polish.
Can I change fonts in my Appy Pie AI app after publishing?
Yes. The Appy Pie AI editor lets you adjust typography at any time. Changes apply to your live app once you re-publish. Most builders refine their type system in the first 30 days based on real user feedback.
What is the most common typography mistake in apps?
Using too many fonts. The most common mistake we see is apps with 4 to 6 fonts mixed across screens. The fix takes minutes: pick one heading font, pick one body font, delete everything else. The app instantly looks more professional.
Where can I find good font pairings for my app?
Use our 6-vertical pairing guide above for industry-specific picks. For broader inspiration, FontPair and Figma Community typography files are excellent free resources. For platform comparisons that handle typography well, see our guide to the best AI app builders.
Ready to build an app with smart typography?
Join 10 million+ creators who have already built apps on Appy Pie AI. The AI picks a font system tuned to your industry, then you customize from there.
Try App BuilderAI App GeneratorTypography Is the Quiet Reason Apps Feel Premium
You do not need a design degree to build a great type system. Pick 2 fonts. Define 5 hierarchy levels. Hit the right sizes. Honor accessibility. Every successful app uses these same fundamentals. Get this right and your app feels professional within the first 10 seconds. Get it wrong and users cannot articulate why your app feels off, but they leave anyway. Build smarter with our complete app creation guide or check our breakdown of the color schemes that work for every app vertical.
Start Building Your App →