Updated October 3, 2026

Typography

Two families, ten sizes, three weights. Every text style reads its size, line height, weight and tracking from 33 variables, so the whole ramp moves together.

Copy page

Updated October 3, 2026

On this page

Typefaces
Type scale
Weights
iOS and Material 3
Tokens

Which typefaces does the kit use?

Inter Display for headlines from 6xl to 2xl and Inter for everything from xl to xs. A third variable, System, holds the face for what the operating system draws.

Inter Display

typography/fontFamily/Heading. The optical cut drawn for large sizes, used by the styles 6xl to 2xl.

Pack my box with five dozen quality UI tweaks

Inter

typography/fontFamily/Body. The text cut, used by the styles xl to xs. typography/fontFamily/System is Inter too and is bound only inside the iOS and Material mirrors.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 & @ # % ( ) [ ] / ? ! . , : ;

What type scale should a mobile app use?

Ten sizes from 12 to 60, each with a matched line height. Use xl to xs for interface text and 2xl to 6xl for headlines. Every line below is set in the step it names.

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

Tracking tightens as the size grows. Each display size from 2xl to 6xl has its own value, from -0.24 at 2xl to -1.2 at 6xl, which is -1% to -2% of the size. xl, lg and base sit at 0, and sm and xs open to +0.1. Line height has its own tell: 18 and 20 both set on 28, so lg and xl share one rhythm.

Text wrap is part of the style. Balance evens out the lines of xl to 6xl, which are short and often wrap to two lines. Pretty avoids a single word on the last line of xs to lg.

Which weights does the system use?

Three weights, each with one job. default is 400, heading is 500 and emphasized is 600. Each of the ten steps ships twice, as /default and as /emphasized.

5xl48 / 52 · tracking -0.96 (-2%)
5xl/default · Regular 400
Balance
5xl/emphasized · Medium 500
Balance
2xl24 / 32 · tracking -0.24 (-1%)
2xl/default · Regular 400
Balance
2xl/emphasized · Semi Bold 600
Balance
base16 / 24 · tracking 0
base/default · Regular 400
Balance
base/emphasized · Semi Bold 600
Balance

Use emphasized for labels, buttons and titles up to 2xl. From 3xl up, the /emphasized style takes the heading weight of 500, because a semibold starts to look heavy at headline size. 2xl is where the two meet: its /emphasized style is the one Inter Display style at 600.

Limiting the weights keeps hierarchy in size and spacing. Size, line height and tracking are identical across the pair.

How does the scale map to Dynamic Type and Material roles?

Every Apple text style and every Material 3 type role resolves to one of the ten steps, through variables in the Platform Bridge collection.

Each step beside the Apple text style and the Material 3 role that resolve to it
Step	Apple text style	Material 3 role
6xl 60	none	`displayLarge`
5xl 48	none	`displayMedium`
4xl 36	`largeTitle`	`displaySmall`
3xl 30	`title1`	`headlineLarge`, `headlineMedium`
2xl 24	none	`headlineSmall`
xl 20	`title2`, `title3`	`titleLarge`
lg 18	`headline`, `body`	none
base 16	`callout`	`titleMedium`, `bodyLarge`
sm 14	`subheadline`	`titleSmall`, `bodyMedium`, `labelLarge`
xs 12	`footnote`, `caption1`, `caption2`, `tabBarLabel`	`bodySmall`, `labelMedium`, `labelSmall`

That table is Brand mode. The same variables have a System mode that returns the platform's own published numbers instead, such as Apple's 17 pt body and Material's 57 sp displayLarge, so a mirror screen can switch platform without being rebuilt. Set the mode on the frame and everything inside follows.

The bridge carries the size and only the size. Line height, weight and tracking stay on the Appetite UI side, so a step keeps its rhythm whichever platform name you reach it by. Dynamic Type and Material scaling are runtime behavior that no Figma file can model, so read every number here as the default size class.

Tokens

20 text styles resting on 33 variables. The styles are what you apply to a layer, and the variables are what move when you change your mind.

Text styles, their family, their size and line height, their tracking and what each is for
Style	Family	Size / line	Tracking	Role
6xl	Inter Display	60 / 64	-1.2	Hero numerals and splash headlines. Rare in mobile.
5xl	Inter Display	48 / 52	-0.96	Display. Onboarding hero and large balances.
4xl	Inter Display	36 / 40	-0.54	Display small. Screen hero titles.
3xl	Inter Display	30 / 36	-0.45	Headline large. Section heroes.
2xl	Inter Display	24 / 32	-0.24	Headline. Screen titles and modal headers.
xl	Inter	20 / 28	0	Title large. Card titles and sheet headers.
lg	Inter	18 / 28	0	Title. List section headers and emphasized body.
base	Inter	16 / 24	0	Body. The default reading size.
sm	Inter	14 / 20	0.1	Body small. Secondary text and list subtitles.
xs	Inter	12 / 16	0.1	Caption and label. Badges, timestamps, tab labels.

Each row is two styles. x/default is Regular 400 and x/emphasized is Medium 500 from 3xl up and Semi Bold 600 from 2xl down. base is the only style with paragraph spacing, 16, because it is the only one that regularly runs past a line.

The typography variables, their value and what each one reaches
Variable	Value	Reaches
`typography/fontFamily/Heading`	Inter Display	The styles 6xl to 2xl
`typography/fontFamily/Body`	Inter	The styles xl to xs
`typography/fontFamily/System`	Inter	Operating system surfaces inside the mirrors. No text style reaches it
`typography/fontWeight/default`	400	The ten /default styles
`typography/fontWeight/heading`	500	The /emphasized styles of 6xl, 5xl, 4xl and 3xl
`typography/fontWeight/emphasized`	600	The /emphasized styles of 2xl to xs
`typography/letterSpacing/6xl`	-1.2	6xl, -2% of the size
`typography/letterSpacing/5xl`	-0.96	5xl, -2% of the size
`typography/letterSpacing/4xl`	-0.54	4xl, -1.5% of the size
`typography/letterSpacing/3xl`	-0.45	3xl, -1.5% of the size
`typography/letterSpacing/2xl`	-0.24	2xl, -1% of the size
`typography/letterSpacing/normal`	0	xl, lg and base
`typography/letterSpacing/wide`	0.1	sm and xs
`typography/fontSize/xs to 6xl`	12, 14, 16, 18, 20, 24, 30, 36, 48, 60	One per step
`typography/lineHeight/xs to 6xl`	16, 20, 24, 28, 28, 32, 36, 40, 52, 64	One per step. The lg styles bind lineHeight/xl, which is also 28

Both family variables hold the family name as plain text, so changing one moves every style bound to it in Figma and in generated code.

Read from the Typography collection and the text styles of the Figma file on October 2, 2026.