Skip to content
Foundations
/
Typography
Dark

Typography

Ten sizes, two weights, one typeface. Every text style reads its size, line height and tracking from variables, so the whole ramp moves together.

Preview

One typeface carries the system. Inter, ten sizes, two weights, the same in Figma and in every target the tokens generate.

Aa
Inter

fontFamily/Heading and fontFamily/Body both alias one family variable. Repoint that one value and headings and body move together, so a brand swaps the whole system with a single edit.

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & @ # % ( ) [ ] / ? ! . , : ;

Figma lists the face as Inter Variable and ships Regular and Semi Bold as named styles. In code the family is Inter. One face, two names, one variable behind both.

Scale

Ten steps, and that is the whole vocabulary. Every line below is set in the step it names, at its real size, with its own line height and letter spacing applied.

Letter spacing moves in three bands, not per step. Wide +0.1 on xs and sm, normal 0 on base, lg and xl, tight -0.4 on 2xl and up. That is the file’s own rule, and it is why the ramp holds at both ends: small text opens, large text closes. Line height has its own tell. 18 and 20 both set on 28, so lg and xl share one rhythm.

Weights

Two weights. Regular 400 is Default, Semi Bold 600 is Emphasized. Each of the ten steps ships twice, once in each, and the pair shares one size, one line height and one letter spacing.

Two weights is a decision, not a gap. No text style and no variable defines a Medium, so there is nothing to bind a layer to and nothing to drift toward. Hierarchy comes from size and spacing.

Platforms

The ramp is wired to both platforms as variables, not as a note in a description. Every Apple text style and every Material 3 type role resolves to a step below.

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
bodySmall, labelMedium, labelSmall

That is Brand mode. The same variables have a System mode that returns the platform’s own published numbers instead, Apple’s 17pt body and Material’s 57sp displayLarge among them, 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 side, so a step keeps its rhythm whichever platform name you reach it by. Dynamic Type and Material scaling are runtime behaviour no Figma file can model: read every number here as the default size class.

Tokens

Twenty text styles resting on twenty eight variables. The styles are what you apply to a layer; the variables are what move when you change your mind.

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

Each row is two styles, not one. 3xl/default is Regular 400 and 3xl/emphasized is Semi Bold 600; size, line height and tracking are identical across the pair. base is the only style carrying paragraph spacing, 16, because it is the only one that regularly runs past a line.

Variable
Value
Reaches
fontFamily/Body
Inter
Aliases platform/font/brand
fontFamily/Heading
Inter
The same alias. One face by design
fontFamily/System
Inter
Operating system surfaces only. No style reaches it
fontWeight/default
400
The ten /default styles
fontWeight/emphasized
600
The ten /emphasized styles
letterSpacing/tight
-0.4
2xl, 3xl, 4xl, 5xl, 6xl
letterSpacing/normal
0
base, lg, xl
letterSpacing/wide
0.1
sm, xs

Ten sizes and ten line heights complete the collection, one matched pair per step. The family variables are no longer the control point on their own: both resolve through platform/font/brand, so repoint that one value and the whole system moves, Figma and generated code together. Change a family variable alone only if headings should break away from body.