Skip to content

By Bob Poláček, updated

Copy page

Type scale

A type scale is the set of text sizes an interface uses, each a step with its own size, line height and weight. Apple names its steps Dynamic Type text styles, such as body and title1, and Material 3 names them roles, such as bodyLarge and headlineSmall.

Copy page

By Bob Poláček, updated

On this page
  1. At a glance
  2. In the kit
  3. In practice
  4. Questions
  5. Sources
  6. Related

Type scale on iOS and Android

Also called Dynamic Type, iOS font sizes. The same idea in each system, with the values Appetite UI gives it.

Type scale at a glance, iOS, Android, Appetite UI
iOSAndroid (Material 3)Appetite UI
NameDynamic Type text styles, largeTitle to caption2Type scale roles: display, headline, title, body, labelTypography collection, steps xs to 6xl

In the kit

The components, drawn live from the kit’s tokens. Tap them: they behave as the Figma prototype does.

Type scale, live componentsKit geometry, light and dark

  • 6xl60 / 64 · tracking -1.2 (-2%)Inter Display · wrap balance

    Hero numerals

  • 5xl48 / 52 · tracking -0.96 (-2%)Inter Display · wrap balance

    Display

  • 4xl36 / 40 · tracking -0.54 (-1.5%)Inter Display · wrap balance

    Display small

  • 3xl30 / 36 · tracking -0.45 (-1.5%)Inter Display · wrap balance

    Headline large

  • 2xl24 / 32 · tracking -0.24 (-1%)Inter Display · wrap balance

    Headline, screen titles

  • xl20 / 28 · tracking 0Inter · wrap balance

    Title large, card and sheet headers

  • lg18 / 28 · tracking 0Inter · wrap pretty

    Title, list section headers

  • base16 / 24 · tracking 0Inter · wrap pretty

    Body, the default reading size

  • sm14 / 20 · tracking +0.1Inter · wrap pretty

    Body small, secondary text and list subtitles

  • xs12 / 16 · tracking +0.1Inter · wrap pretty

    Caption and label, badges, timestamps, tab labels

In practice

Both systems let people change the text size on their phone, Dynamic Type on iOS and font scale on Android, so a step is a starting size that the app scales, not a fixed number.

Appetite UI has one scale for both platforms, from xs 12 to 6xl 60 in Inter and Inter Display, and maps each step to the Apple text style and the Material 3 role that resolve to it. Its System mode returns the platforms’ own published sizes instead, such as Apple’s 17 point body and Material’s 57 sp displayLarge.

Each step beside the Apple text style and the Material 3 role that resolve to it
StepApple text styleMaterial 3 role
6xl 60nonedisplayLarge
5xl 48nonedisplayMedium
4xl 36largeTitledisplaySmall
3xl 30title1headlineLarge, headlineMedium
2xl 24noneheadlineSmall
xl 20title2, title3titleLarge
lg 18headline, bodynone
base 16callouttitleMedium, bodyLarge
sm 14subheadlinetitleSmall, bodyMedium, labelLarge
xs 12footnote, caption1, caption2, tabBarLabelbodySmall, labelMedium, labelSmall

Questions

How do Material 3 type roles map to iOS text styles?

Through the step they share. In Appetite UI, base 16 is Apple’s callout and Material’s titleMedium and bodyLarge, sm 14 is subheadline and titleSmall, bodyMedium and labelLarge, and xs 12 holds footnote and the captions beside bodySmall and the small labels. The table on this page lists every step.

Does a Figma file support Dynamic Type?

A Figma file draws the default size; scaling with the reader’s text size happens in the app. Appetite UI’s System mode gives each step the platform’s published default, such as Apple’s 17 point body, so a frame can show the native sizes without being rebuilt.

Sources

The pages the facts above rest on.

  1. Apple Human Interface Guidelines: Typography, read October 13, 2026
  2. Material Design 3: Type scale tokens, read October 13, 2026