Tokens
Typography
53 tokensFont families, sizes, weights, leading, and tracking. Inter handles UI; Megafield is reserved for display headlines.
Families#
Two families. Inter for everything UI, Megafield for editorial display.
Sans
Inter
Aa
The quick brown fox jumps over the lazy dog.
Display
Megafield
Aa
The quick brown fox jumps over the lazy dog.
Sizes#
Display, Heading, and Body ramps. Pair each size with its matching line height.
Display Title screen
64 / 70 px
Display Title section
56 / 62 px
Display Title subsection
50 / 56 px
Display Title body
44 / 50 px
Display Title group
40 / 46 px
Display Title small
36 / 42 px
Heading Title screen
30 / 34 px
Heading Title section
26 / 32 px
Heading Title subsection
22 / 28 px
Heading Title block
20 / 26 px
Heading Title body
18 / 24 px
Heading Title group
16 / 22 px
Body XL
24 / 32 px
Body Large
16 / 24 px
Body Default
14 / 22 px
Body Small
12 / 16 px
Weights#
Foren
Light
Foren
Book
Foren
Medium
Foren
SemiBold
Foren
Bold
Foren
Black
Letter spacing#
Values are percentages — applied as em (1em = 100%).
Tight
-1%Default
0%Wide
0.5%Wider
1%Heading · Title screen
-2.5%Heading · Title section
-1.5%Heading · Title subsection
-1.5%Heading · Title block
-1%Heading · Title body
-1%Heading · Title group
1.5%Body · Large
-0.5%Body · Default
0%Body · Small
0.5%Line height#
Display · Title screen70px
Display · Title section62px
Display · Title subsection56px
Display · Title body50px
Display · Title group46px
Display · Title small42px
Heading · Title screen34px
Heading · Title section32px
Heading · Title subsection28px
Heading · Title block26px
Heading · Title body24px
Heading · Title group22px
Body · XL32px
Body · Large24px
Body · Default22px
Body · Small16px