Typography
Global typography foundation tokens. These are the font sizes, weights, and line heights that are used throughout the design system.
Components set type through the text style tokens below. Each style maps to base family, size, weight and line height tokens, so brand themes can change a brand’s type without touching component styles. The Action and Eyebrow styles also set letter spacing.
.eyebrow {
font-family: var(--nbhd-typography-eyebrow-fontFamily);
font-size: var(--nbhd-typography-eyebrow-fontSize);
font-weight: var(--nbhd-typography-eyebrow-fontWeight);
letter-spacing: var(--nbhd-typography-eyebrow-letterSpacing);
line-height: var(--nbhd-typography-eyebrow-lineHeight);
}Typescale
10pxA Supercharged Growth Opportunity11pxA Supercharged Growth Opportunity12pxA Supercharged Growth Opportunity13pxA Supercharged Growth Opportunity14pxA Supercharged Growth Opportunity16pxA Supercharged Growth Opportunity18pxA Supercharged Growth Opportunity20pxA Supercharged Growth Opportunity24pxA Supercharged Growth Opportunity28pxA Supercharged Growth Opportunity32pxA Supercharged Growth Opportunity34pxA Supercharged Growth Opportunity36pxA Supercharged Growth Opportunity40pxA Supercharged Growth Opportunity46pxA Supercharged Growth Opportunity48pxA Supercharged Growth Opportunity55pxA Supercharged Growth Opportunity64pxA Supercharged Growth Opportunity88pxA 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) |
No font size match.
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 |
No font weight match.
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 |
No line height match.
Text Styles
| Style | Family | Size | Large screens | Weight | Line height | Letter spacing |
|---|---|---|---|---|---|---|
Display |
var(--nbhd-typography-display-fontFamily) |
3rem |
— | 700 |
1.2 |
— |
Headline |
var(--nbhd-typography-headline-fontFamily) |
1.5rem |
2.125rem |
700 |
1.2 |
— |
Subheading |
var(--nbhd-typography-subheading-fontFamily) |
1.125rem |
— | 700 |
1.3 |
— |
Eyebrow |
var(--nbhd-typography-eyebrow-fontFamily) |
0.8125rem |
— | 700 |
1.4 |
5px |
Body |
var(--nbhd-typography-body-fontFamily) |
1rem |
— | 400 |
1.5 |
— |
Body Small |
var(--nbhd-typography-bodySmall-fontFamily) |
0.875rem |
— | 400 |
1 |
— |
Label |
var(--nbhd-typography-label-fontFamily) |
1rem |
— | 600 |
1 |
— |
Supporting |
var(--nbhd-typography-supporting-fontFamily) |
0.8125rem |
— | 400 |
1 |
— |
Action |
var(--nbhd-typography-action-fontFamily) |
0.6875rem |
0.6875rem |
700 |
1 |
2px |
Control |
var(--nbhd-typography-control-fontFamily) |
1.125rem |
— | 500 |
1 |
— |
Badge |
var(--nbhd-typography-badge-fontFamily) |
0.625rem |
— | 700 |
1 |
— |