Variable Font Explorer
Interact with variable font configurations using live sliders. Adjust weight, slant, and optical sizing axes dynamically to generate CSS output.
Variable Axes
Weight (wght)400
Slant/Italic (ital)0
Optical Size (opsz)14
Flexible type variation
Generated CSS Code
Frequently Asked Questions
What is a variable font?
A variable font is a single font file that contains multiple variations of a typeface design. Instead of loading separate files for bold, light, or italic, a variable font interpolates sizes along continuous axes (like weight or width).
What are the common axes of variable fonts?
The standard axes are Weight (wght), Width (wdth), Slant (slnt), Italic (ital), and Optical Size (opsz). Some fonts also support custom creative axes.
How do I use variable fonts in CSS?
Use the `font-variation-settings` CSS property to control axes manually. For example: `font-variation-settings: 'wght' 650, 'wdth' 85;`