Variable Font Playground
Explore variable font axes interactively. Adjust weight, width, slant, and optical size to see how axis values affect letterforms in real time.
Font Axes
Current Axis Values
Preview
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%^&*()_+-=
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. How vexingly quick daft zebras jump. Sphinx of black quartz, judge my vow.
Generated CSS
About Variable Fonts
Variable fonts contain multiple styles in a single file, controlled through axes. Standard axes include:
- wght — Weight: Controls stroke thickness (100 Thin to 900 Black)
- wdth — Width: Controls character width (75% condensed to 125% expanded)
- slnt — Slant: Controls oblique angle (-12 to 0 degrees)
- ital — Italic: Toggles true italic forms (0 or 1)
- opsz — Optical Size: Adjusts details for size (8pt caption to 144pt display)