Typography
Global typography foundation tokens. These are the font sizes, weights, and line heights that are used throughout the design system.
Typescale
10px
A Supercharged Growth Opportunity
11px
A Supercharged Growth Opportunity
12px
A Supercharged Growth Opportunity
13px
A Supercharged Growth Opportunity
14px
A Supercharged Growth Opportunity
16px
A Supercharged Growth Opportunity
18px
A Supercharged Growth Opportunity
20px
A Supercharged Growth Opportunity
24px
A Supercharged Growth Opportunity
28px
A Supercharged Growth Opportunity
32px
A Supercharged Growth Opportunity
34px
A Supercharged Growth Opportunity
36px
A Supercharged Growth Opportunity
40px
A Supercharged Growth Opportunity
46px
A Supercharged Growth Opportunity
48px
A Supercharged Growth Opportunity
55px
A Supercharged Growth Opportunity
64px
A Supercharged Growth Opportunity
88px
A Supercharged Growth Opportunity
Font Family
| Token | CSS Variable | Value |
|---|---|---|
base.font.family.sans
|
var(--nbhd-base-font-family-sans)
|
sans-serif |
Font Size
| Token | CSS Variable | Value |
|---|---|---|
base.font.size.10
|
var(--nbhd-base-font-size-10)
|
0.625rem (10px) |
base.font.size.11
|
var(--nbhd-base-font-size-11)
|
0.6875rem (11px) |
base.font.size.12
|
var(--nbhd-base-font-size-12)
|
0.75rem (12px) |
base.font.size.13
|
var(--nbhd-base-font-size-13)
|
0.8125rem (13px) |
base.font.size.14
|
var(--nbhd-base-font-size-14)
|
0.875rem (14px) |
base.font.size.16
|
var(--nbhd-base-font-size-16)
|
1rem (16px) |
base.font.size.18
|
var(--nbhd-base-font-size-18)
|
1.125rem (18px) |
base.font.size.20
|
var(--nbhd-base-font-size-20)
|
1.25rem (20px) |
base.font.size.24
|
var(--nbhd-base-font-size-24)
|
1.5rem (24px) |
base.font.size.28
|
var(--nbhd-base-font-size-28)
|
1.75rem (28px) |
base.font.size.32
|
var(--nbhd-base-font-size-32)
|
2rem (32px) |
base.font.size.34
|
var(--nbhd-base-font-size-34)
|
2.125rem (34px) |
base.font.size.36
|
var(--nbhd-base-font-size-36)
|
2.25rem (36px) |
base.font.size.40
|
var(--nbhd-base-font-size-40)
|
2.5rem (40px) |
base.font.size.46
|
var(--nbhd-base-font-size-46)
|
2.875rem (46px) |
base.font.size.48
|
var(--nbhd-base-font-size-48)
|
3rem (48px) |
base.font.size.55
|
var(--nbhd-base-font-size-55)
|
3.4375rem (55px) |
base.font.size.64
|
var(--nbhd-base-font-size-64)
|
4rem (64px) |
base.font.size.88
|
var(--nbhd-base-font-size-88)
|
5.5rem (88px) |
Font Weight
| Token | CSS Variable | Value |
|---|---|---|
base.font.weight.100
|
var(--nbhd-base-font-weight-100)
|
100 |
base.font.weight.200
|
var(--nbhd-base-font-weight-200)
|
200 |
base.font.weight.300
|
var(--nbhd-base-font-weight-300)
|
300 |
base.font.weight.400
|
var(--nbhd-base-font-weight-400)
|
400 |
base.font.weight.500
|
var(--nbhd-base-font-weight-500)
|
500 |
base.font.weight.600
|
var(--nbhd-base-font-weight-600)
|
600 |
base.font.weight.700
|
var(--nbhd-base-font-weight-700)
|
700 |
base.font.weight.800
|
var(--nbhd-base-font-weight-800)
|
800 |
Line Height
| Token | CSS Variable | Value |
|---|---|---|
base.font.lineHeight.100
|
var(--nbhd-base-font-lineHeight-100)
|
1 |
base.font.lineHeight.120
|
var(--nbhd-base-font-lineHeight-120)
|
1.2 |
base.font.lineHeight.125
|
var(--nbhd-base-font-lineHeight-125)
|
1.25 |
base.font.lineHeight.130
|
var(--nbhd-base-font-lineHeight-130)
|
1.3 |
base.font.lineHeight.140
|
var(--nbhd-base-font-lineHeight-140)
|
1.4 |
base.font.lineHeight.150
|
var(--nbhd-base-font-lineHeight-150)
|
1.5 |
base.font.lineHeight.200
|
var(--nbhd-base-font-lineHeight-200)
|
2 |
Text Styles
Display
- Font Family
typography.display.family➝base.font.family.sans➝ sans-serif- Font Size
typography.display.size➝base.font.size.48➝ 3rem- Font Weight
typography.display.weight➝base.font.weight.700➝ 700- Line Height
typography.display.lineHeight➝base.font.lineHeight.120➝ 1.2- Font Size-bp Lg
typography.display.size-bpLg➝base.font.size.64➝ 4rem
Headline
- Font Family
typography.headline.family➝base.font.family.sans➝ sans-serif- Font Size
typography.headline.size➝base.font.size.24➝ 1.5rem- Font Weight
typography.headline.weight➝base.font.weight.700➝ 700- Line Height
typography.headline.lineHeight➝base.font.lineHeight.120➝ 1.2- Font Size-bp Lg
typography.headline.size-bpLg➝base.font.size.34➝ 2.125rem
Subheading
- Font Family
typography.subheading.family➝base.font.family.sans➝ sans-serif- Font Size
typography.subheading.size➝base.font.size.18➝ 1.125rem- Font Weight
typography.subheading.weight➝base.font.weight.700➝ 700- Line Height
typography.subheading.lineHeight➝base.font.lineHeight.130➝ 1.3
Eyebrow
- Font Family
typography.eyebrow.family➝base.font.family.sans➝ sans-serif- Font Size
typography.eyebrow.size➝base.font.size.13➝ 0.8125rem- Font Weight
typography.eyebrow.weight➝base.font.weight.700➝ 700- Line Height
typography.eyebrow.lineHeight➝base.font.lineHeight.140➝ 1.4
Body
- Font Family
typography.body.family➝base.font.family.sans➝ sans-serif- Font Size
typography.body.size➝base.font.size.16➝ 1rem- Font Weight
typography.body.weight➝base.font.weight.400➝ 400- Line Height
typography.body.lineHeight➝base.font.lineHeight.150➝ 1.5
Body Small
- Font Family
typography.bodySmall.family➝base.font.family.sans➝ sans-serif- Font Size
typography.bodySmall.size➝base.font.size.14➝ 0.875rem- Font Weight
typography.bodySmall.weight➝base.font.weight.400➝ 400- Line Height
typography.bodySmall.lineHeight➝base.font.lineHeight.100➝ 1
Label
- Font Family
typography.label.family➝base.font.family.sans➝ sans-serif- Font Size
typography.label.size➝base.font.size.16➝ 1rem- Font Weight
typography.label.weight➝base.font.weight.600➝ 600- Line Height
typography.label.lineHeight➝base.font.lineHeight.100➝ 1
Supporting
- Font Family
typography.supporting.family➝base.font.family.sans➝ sans-serif- Font Size
typography.supporting.size➝base.font.size.13➝ 0.8125rem- Font Weight
typography.supporting.weight➝base.font.weight.400➝ 400- Line Height
typography.supporting.lineHeight➝base.font.lineHeight.100➝ 1
Action
- Font Family
typography.action.family➝base.font.family.sans➝ sans-serif- Font Size
typography.action.size➝base.font.size.11➝ 0.6875rem- Font Weight
typography.action.weight➝base.font.weight.700➝ 700- Line Height
typography.action.lineHeight➝base.font.lineHeight.100➝ 1- Font Size-bp Md
typography.action.size-bpMd➝base.font.size.11➝ 0.6875rem
Control
- Font Family
typography.control.family➝base.font.family.sans➝ sans-serif- Font Size
typography.control.size➝base.font.size.18➝ 1.125rem- Font Weight
typography.control.weight➝base.font.weight.500➝ 500- Line Height
typography.control.lineHeight➝base.font.lineHeight.100➝ 1
Badge
- Font Family
typography.badge.family➝base.font.family.sans➝ sans-serif- Font Size
typography.badge.size➝base.font.size.10➝ 0.625rem- Font Weight
typography.badge.weight➝base.font.weight.700➝ 700- Line Height
typography.badge.lineHeight➝base.font.lineHeight.200➝ 2