TokensTypography

Typography

Fluid typography scales using CSS clamp() for responsive sizing. Choose between two modular scales based on your content needs.

11
Type Sizes
6
Line Heights
8
Font Weights
2
Type Scales

Type Scale Comparison

Major Second (1.125)

Conservative scale with subtle size progression

Best for: Dashboards, data-dense interfaces, admin panels
Major Third (1.25)

Expressive scale with dramatic size contrast

Best for: Marketing sites, editorial content, landing pages

Type Scale

11 fluid sizes from caption to hero · Click variable to copy

Token
Semantic Use
Size Range
Clamp Value
Preview
2XS
Caption
8px → 13px
Aa
XS
Label
10px → 16px
Aa
SM
Body Small
13px → 20px
Aa
MD
Body
16px → 25px
Aa
LG
Lead
20px → 31px
Aa
XL
H6
25px → 39px
Aa
2XL
H5
31px → 49px
Aa
3XL
H4
39px → 61px
Aa
4XL
H3
49px → 76px
Aa
5XL
H2
61px → 95px
Aa
6XL
H1/Hero
76px → 119px
Aa

Line Heights

6 unitless ratio values · Click variable to copy

1

None

Text only

1.25

Tight

Headings

1.375

Snug

Compact

1.5

Normal

Body default

1.625

Relaxed

Comfortable

2

Loose

Max readability

Font Weights

8 weight values from thin (100) to black (900)

Thin

Light

Normal

Medium

Semibold

Bold

Extrabold

Black

Usage Example

/* Use Major Third scale (mt) for marketing sites */
.hero-heading {
  font-size: var(--font-size-6xl--mt);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* Use Major Second scale (ms) for dashboards */
.dashboard-heading {
  font-size: var(--font-size-4xl--ms);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.body-text {
  font-size: var(--font-size-md--mt);
  line-height: var(--line-height-normal);
}

Related Pages