Tune variable font axes with sliders in real time. Copy CSS font-variation-settings in one click.
🎛️ Preview
The quick brown fox
CSS code

How to use

  1. Enter sample text and pick a variable font.
  2. Adjust weight / width / slant / opsz axes via sliders.
  3. Preview updates live.
  4. Copy the generated CSS to your project.
  5. Recursive has unique CASL (casual) and MONO (monospace) axes.

Key features

  • 5 popular variable fonts built in (Inter, Roboto Flex, Recursive, Outfit, DM Sans)
  • 6 main axes sliders (wght, wdth, slnt, opsz, CASL, MONO)
  • Auto-generated font-variation-settings CSS
  • Real-time preview with Latin + numerals
  • Loads directly from Google Fonts

Use cases

  • Design systems — one font, infinite weight/width variations
  • Web font size savings — 1 variable font replaces 10 static files
  • Motion design — animate wght for smooth transitions
  • Responsive typography — opsz for screen-size-aware weight
  • Special effects — Recursive's CASL toggles formal ↔ casual

What are variable fonts?

Variable fonts are an OpenType 1.8 (2016) addition that pack multiple weights, widths, and styles in a single file. Where Roboto needed 9 files for 9 weights, Roboto Flex's single file delivers any weight 100–1000. Axes like wght, wdth, slnt, opsz are tuned via CSS font-variation-settings. Supported by all modern browsers.

FAQ

Are all fonts variable?

No. Only fonts designed as variable. Look for "Variable" tag on Google Fonts.

font-weight: 400 vs font-variation-settings: "wght" 400?

Same outcome, but font-variation-settings is more precise and required for non-standard axes like wdth and slnt.

Browser support?

Chrome 62+, Safari 11+, Firefox 62+. All post-2018 browsers work.

What about CJK variable fonts?

Pretendard Variable, IBM Plex Sans CJK exist, but this tool ships with Latin variable fonts only.