# 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 is 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](https://xiry.app/topics/design.md)
- Topic: [Typography](https://xiry.app/topics/design/typography.md)
- 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, 21 June 2023](https://www.instagram.com/reel/CtwJM-vtxLh/): Helps UI/UX designers create intuitive information architecture that lets users scan pages, sections, and items effortlessly.

## Related

- [Dirtyline Studio](https://xiry.app/resources/dirtyline-studio): Type foundry offering modern display fonts and free typography assets (Website, Freemium)
- [Fontshare](https://xiry.app/resources/fontshare): Free, professional fonts from the Indian Type Foundry for personal and commercial use. (Website, Free)
- [Free Faces](https://xiry.app/resources/free-faces): Curated gallery of free and open-source typefaces organized by style (Website, Free)
- [No Design Foundry](https://xiry.app/resources/no-design-foundry): Web-based interactive typography tools for distorting and styling text (Web app, Free)
- [Space Type Generator](https://xiry.app/resources/space-type-generator): Browser-based kinetic typography tool for generating animated 2D and 3D text (Web app, Free)
- [Stack & Justify](https://xiry.app/resources/stack-and-justify): Browser tool to generate aligned type specimens using equal-width words (Web app, Open source)

Updated 3 October 2026. Page: https://xiry.app/resources/mobile-app-typographic-hierarchy-guide

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.