--- title: Typography description: The Appetite UI type scale for Figma: ten sizes in Inter and Inter Display, three weights and tracking per size, mapped to iOS Dynamic Type and Material 3. group: Foundations source: https://www.appetiteui.com/docs/typography dateModified: 2026-10-03 --- # Typography Updated: October 3, 2026. 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. ## 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. Figure: the type ramp, one line per step. Figure: the type ramp, one line per step. Install Inter and Inter Display to see every text style correctly in Figma. Local fonts load in the Figma desktop app only. Inter and Inter Display are both under the SIL Open Font License, so the library stays license clean. To swap a family for the whole system, change the value of typography/fontFamily/Heading or typography/fontFamily/Body. ## 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. Figure: the type scale, every step with its size and line height. 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. Figure: the weights the family ships. 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. | 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. | 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. | 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. ## In the screens and the glossary - Glossary: [Type scale](https://www.appetiteui.com/academy/glossary/type-scale)