Typography Tokens

Font Families

:root {
  --s-font-sans: system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --s-font-serif: Georgia, Cambria, 'Times New Roman', Times, serif;
  --s-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo,
               Consolas, 'Liberation Mono', monospace;
}

Customizing Fonts

:root {
  --s-font-sans: 'Inter', system-ui, sans-serif;
  --s-font-mono: 'JetBrains Mono', monospace;
}

Font Sizes

Fluid typography that scales with viewport:

Token	Min Size	Max Size	Class
--s-text-xs	0.75rem	0.75rem	.s-text-xs
--s-text-sm	0.875rem	0.875rem	.s-text-sm
--s-text-base	1rem	1rem	.s-text-base
--s-text-lg	1.125rem	1.125rem	.s-text-lg
--s-text-xl	1.25rem	1.25rem	.s-text-xl
--s-text-2xl	1.5rem	1.5rem	.s-text-2xl
--s-text-3xl	1.875rem	1.875rem	.s-text-3xl
--s-text-4xl	2.25rem	2.25rem	.s-text-4xl
--s-text-5xl	3rem	3rem	.s-text-5xl
--s-text-6xl	3.75rem	3.75rem	.s-text-6xl
--s-text-7xl	4.5rem	4.5rem	.s-text-7xl
--s-text-8xl	6rem	6rem	.s-text-8xl
--s-text-9xl	8rem	8rem	.s-text-9xl

Using Font Size Tokens

.headline {
  font-size: var(--s-text-4xl);
}

.caption {
  font-size: var(--s-text-sm);
}

Font Weights

Token	Value	Class
--s-font-thin	100	.s-font-thin
--s-font-extralight	200	.s-font-extralight
--s-font-light	300	.s-font-light
--s-font-normal	400	.s-font-normal
--s-font-medium	500	.s-font-medium
--s-font-semibold	600	.s-font-semibold
--s-font-bold	700	.s-font-bold
--s-font-extrabold	800	.s-font-extrabold
--s-font-black	900	.s-font-black

Using Font Weight Tokens

.title {
  font-weight: var(--s-font-bold);
}

.subtitle {
  font-weight: var(--s-font-medium);
}

Line Heights

Token	Value	Class
--s-leading-none	1	.s-leading-none
--s-leading-tight	1.25	.s-leading-tight
--s-leading-snug	1.375	.s-leading-snug
--s-leading-normal	1.5	.s-leading-normal
--s-leading-relaxed	1.625	.s-leading-relaxed
--s-leading-loose	2	.s-leading-loose

Using Line Height Tokens

.body-text {
  line-height: var(--s-leading-relaxed);
}

.display-text {
  line-height: var(--s-leading-tight);
}

Letter Spacing

Token	Value	Class
--s-tracking-tighter	-0.05em	.s-tracking-tighter
--s-tracking-tight	-0.025em	.s-tracking-tight
--s-tracking-normal	0em	.s-tracking-normal
--s-tracking-wide	0.025em	.s-tracking-wide
--s-tracking-wider	0.05em	.s-tracking-wider
--s-tracking-widest	0.1em	.s-tracking-widest

Typography Presets

Headings

h1 {
  font-size: var(--s-text-4xl);
  font-weight: var(--s-font-bold);
  line-height: var(--s-leading-tight);
  letter-spacing: var(--s-tracking-tight);
}

h2 {
  font-size: var(--s-text-3xl);
  font-weight: var(--s-font-bold);
  line-height: var(--s-leading-tight);
}

h3 {
  font-size: var(--s-text-2xl);
  font-weight: var(--s-font-semibold);
  line-height: var(--s-leading-snug);
}

Body Text

body {
  font-family: var(--s-font-sans);
  font-size: var(--s-text-base);
  font-weight: var(--s-font-normal);
  line-height: var(--s-leading-normal);
}

Code

code, pre {
  font-family: var(--s-font-mono);
  font-size: var(--s-text-sm);
}

Customizing Typography

Base Size

Changing the base size affects all relative typography:

:root {
  --s-font-base: 1.125rem;  /* Larger base (18px) */
}

Custom Scale

:root {
  --s-text-xl: 1.5rem;
  --s-text-2xl: 2rem;
  --s-text-3xl: 2.5rem;
}

Responsive Typography

For responsive typography, use CSS custom properties with media queries or container queries:

.headline {
  font-size: var(--s-text-2xl);
}

@media (min-width: 768px) {
  .headline {
    font-size: var(--s-text-4xl);
  }
}

@media (min-width: 1024px) {
  .headline {
    font-size: var(--s-text-5xl);
  }
}

Or use fluid typography with clamp():

.headline {
  font-size: clamp(var(--s-text-2xl), 5vw, var(--s-text-5xl));
}

Best Practices

Hierarchy

Use consistent sizing for visual hierarchy:

.page-title { font-size: var(--s-text-4xl); }
.section-title { font-size: var(--s-text-2xl); }
.card-title { font-size: var(--s-text-lg); }
.body-text { font-size: var(--s-text-base); }
.caption { font-size: var(--s-text-sm); }

Readability

• Body text: 16-18px with 1.5-1.75 line height
• Long-form content: Limit line length to 60-75 characters
• Use appropriate contrast ratios (4.5:1 minimum)