What are typography tokens?

Typography tokens are named design variables for font families, sizes, weights, line heights, and letter spacing. They create a single source of truth shared between design tools and code.

Should I use rem or px for typography tokens?

Use rem for font sizes so tokens respect user browser settings. Use unitless values for line height. Define spacing tokens in rem for consistency with your type scale.

How do I export typography tokens for Tailwind CSS?

Use this tool to generate a Tailwind theme extension with fontSize, fontFamily, and lineHeight entries. Paste the output into your tailwind.config file under theme.extend.

Typography Token Exporter

Generate a complete typography token set from a modular scale — export as CSS custom properties, Tailwind theme extension, or JSON for design systems.

Base size (rem)

Scale ratio

Sans / UI

Serif / reading

Mono / code

Line height strategy

Step	rem	px
xs	0.563	9
sm	0.75	12
base	1	16
lg	1.333	21.3
xl	1.777	28.4
2xl	2.369	37.9
3xl	3.157	50.5
4xl	4.209	67.3
5xl	5.61	89.8
6xl	7.478	119.7

:root {
  /* Font families */
  --font-family-sans: var(--font-inter);
  --font-family-serif: var(--font-source-serif);
  --font-family-display: var(--font-instrument-serif);
  --font-family-mono: var(--font-geist-mono);

  /* Font sizes */
  --font-size-xs: 0.563rem;
  --font-size-sm: 0.75rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.333rem;
  --font-size-xl: 1.777rem;
  --font-size-2xl: 2.369rem;
  --font-size-3xl: 3.157rem;
  --font-size-4xl: 4.209rem;
  --font-size-5xl: 5.61rem;
  --font-size-6xl: 7.478rem;

  /* Line heights */
  --line-height-body: 1.5;
  --line-height-heading: 1.2;
  --line-height-caption: 1.4;
  --line-height-tight: 1.15;
  --line-height-relaxed: 1.65;
}

What this token exporter does

This typography token exporter generates a complete type token set from a modular scale. Export as CSS custom properties, Tailwind theme extension, or JSON for design systems and engineering handoff.

How to use it

Set your base font size and modular scale ratio.
Configure font families for headings, body, and monospace.
Review the generated token names and values across the scale.
Copy CSS, Tailwind, or JSON output into your project.
Read the Typography Tokens chapter for naming conventions and usage rules.

For deeper context, read the Typography Tokens chapter in the Typography Master guide.

Frequently asked questions

What are typography tokens?: Typography tokens are named design variables for font families, sizes, weights, line heights, and letter spacing. They create a single source of truth shared between design tools and code.
Should I use rem or px for typography tokens?: Use rem for font sizes so tokens respect user browser settings. Use unitless values for line height. Define spacing tokens in rem for consistency with your type scale.
How do I export typography tokens for Tailwind CSS?: Use this tool to generate a Tailwind theme extension with fontSize, fontFamily, and lineHeight entries. Paste the output into your tailwind.config file under theme.extend.

Related resources

Typography Tokens
Build a single source of truth for font families, sizes, and weights.