Design · Tip
Mobile App Typographic Hierarchy Guide
A practical font sizing and hierarchy framework for mobile UI design.
This guide provides recommended type scales and sizing ranges for designing mobile application interfaces. It establishes clear visual hierarchy from main screen headers down to body copy using a consistent 1.5x scaling rule.
How it works
Recommended mobile font sizes and hierarchy:
- Page Headers: 34+ pt (the largest element on screen to confirm page context)
- Section Headers:
- Screens with many sections: 16–21 pt
- Screens with few sections: 18–26 pt
- Group Headers: 14–18 pt (nested headings within a section or card)
- Paragraphs / Body: Keep the same point size as group headers (14–18 pt) but use a lighter/thinner font weight, or scale down by 2 to 4 points.
- Scaling rule: Each tier is roughly 1.5x the font size of the tier below it.
What it's for
- Set up consistent typographic scales in mobile design systems
- Improve scannability across mobile app screens and card layouts
- Differentiate nested sections and group headers from body text
Key points
- Set page headers at 34+ pt as the primary visual anchor
- Size section headers between 16–21 pt for dense screens, or 18–26 pt for sparse screens
- Use 14–18 pt for group headers inside nested cards or sections
- Match body text to group header sizes using lighter font weights, or scale down by 2–4 pt
- Apply an approximate 1.5x scale multiplier between hierarchy tiers
Pricing
Free
Details
- Type
- Tip
- Category
- Design
- Topic
- Typography
- Open source
- No
- Platforms
- other
- For
- UI/UX designers and mobile developers
- Tags
- typography, mobile design, ui design, design system, font size
Why it was saved
- @uibucket: Helps UI/UX designers create intuitive information architecture that lets users scan pages, sections, and items effortlessly.
Related
Type foundry offering modern display fonts and free typography assets
Free, professional fonts from the Indian Type Foundry for personal and commercial use.
Curated gallery of free and open-source typefaces organized by style
Web-based interactive typography tools for distorting and styling text
Browser-based kinetic typography tool for generating animated 2D and 3D text
Browser tool to generate aligned type specimens using equal-width words
Updated