Build a complete typography token system as CSS custom properties: --font-family, --font-size-{xs,sm,base,lg,xl}, --font-weight-{light,regular,bold}, --line-height-{tight,normal,relaxed}.
Enter your font family name, base size, modular ratio, and weight presets
We generate a :root block with all typography tokens
Copy-paste into your design system stylesheet — referenced via var(--font-size-base)
0 bytes uploaded. Typography CSS Custom Properties Generator runs entirely in your browser using opentype.js and the File API. Your fonts never leave your device.
This tool requires the Free plan or higher.
One source of truth for type tokens, easy theming (dark mode tweaks, per-brand overrides), and runtime updates via JavaScript. No more search-and-replace across hundreds of stylesheets.
Tailwind-style by default: xs, sm, base, lg, xl, 2xl, 3xl. You can rename in the output before pasting.
Yes — toggle the fluid mode and each --font-size-* becomes a clamp() expression with viewport-based interpolation between two breakpoints.
Generate a full type scale (h1–h6, body, small) using a chosen modular ratio. Output is fluid clamp() CSS that scales smoothly between two viewport widths.
Open toolPick a min and max font size plus a viewport range and get a clamp() expression that interpolates smoothly. Single field — copy and paste.
Open toolBuild a complete @font-face declaration with WOFF2/WOFF/TTF fallbacks, font-display, unicode-range, and proper format() hints. Copy-paste ready.
Open tool