Dev-mode

Typography

Type scale and font families used on this documentation website only. For product typography, see Foundations.

Font Families

Primary TT Satoshi The quick brown fox jumps over the lazy dog All UI text, headings, body copy
Monospace JetBrains Mono The quick brown fox jumps over the lazy dog Code snippets, tokens, technical values

Type Scale

4xl / 64px Headline Large
3xl / 48px Headline Medium
2xl / 32px Headline Small
xl / 24px Body XL — lead paragraph text
lg / 20px Body LG — descriptions and introductions
base / 16px Body MD — default body text for paragraphs
sm / 14px Body SM — secondary text, captions, labels
xs / 12px Body XS — overlines, badges, micro text

Line Height

SizeLine HeightRatio
64px (Headline Large)76px119%
48px (Headline Medium)56px117%
32px (Headline Small)40px125%
24px (Body XL)34px142%
20px (Body LG)32px160%
16px (Body MD)24px150%
14px (Body SM)20px143%
12px (Body XS)16px133%

Text Style Classes

text-styles.css css 
/* Headlines */
.headline-lg { font-size: 64px; line-height: 76px; letter-spacing: -2.08px; font-weight: 500; }
.headline-md { font-size: 48px; line-height: 56px; letter-spacing: -1.44px; font-weight: 500; }
.headline-sm { font-size: 32px; line-height: 40px; letter-spacing: -0.80px; font-weight: 500; }

/* Body */
.body-xl         { font-size: 24px; line-height: 34px; letter-spacing: -0.48px; font-weight: 500; }
.body-xl-strong  { font-size: 24px; line-height: 34px; letter-spacing: -0.48px; font-weight: 600; }
.body-lg         { font-size: 20px; line-height: 32px; letter-spacing: -0.32px; font-weight: 500; }
.body-lg-strong  { font-size: 20px; line-height: 32px; letter-spacing: -0.32px; font-weight: 600; }
.body-md         { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; font-weight: 500; }
.body-md-strong  { font-size: 16px; line-height: 24px; letter-spacing: -0.16px; font-weight: 600; }
.body-sm         { font-size: 14px; line-height: 20px; letter-spacing: -0.08px; font-weight: 500; }
.body-sm-strong  { font-size: 14px; line-height: 20px; letter-spacing: -0.08px; font-weight: 600; }
.body-xs         { font-size: 12px; line-height: 16px; letter-spacing: 0px;     font-weight: 500; }
.body-xs-strong  { font-size: 12px; line-height: 16px; letter-spacing: 0px;     font-weight: 600; }
Page tokens