Free Typography Tools
Variable Font Axis Tester
Preview weight, width, slant, and optical-size CSS axes on editable text.
What this tool does
The preview writes CSS font-variation-settings directly so supported axes can be tested without guessing syntax.
Preview weight, width, slant, and optical-size CSS axes on editable text.
The preview writes CSS font-variation-settings directly so supported axes can be tested without guessing syntax.
Use the tool
Explore variable-font axes
Enter a variable font family and adjust the axis controls.
Font family and axes
Unsupported axes are ignored by the font. Confirm the family’s documented axis ranges.
Variable-axis preview
Variable type can adapt without losing its voice.
font-variation-settings: 'wght' 500, 'wdth' 100, 'slnt' 0, 'opsz' 48;How to use it
Three quick steps
- 1Enter a variable font family and adjust the axis controls.
- 2Copy the resulting CSS variation declaration.
- 3Verify the result in its real production context. Only axes actually supported by the loaded font will affect rendering.
Worked example
Example: Variable Font Axis Tester
Test weight and width combinations for a variable headline family before choosing production instances.
FAQ
Questions about the variable font axis tester
Practical details about using the tool and understanding its result.
Keep working
Related tools
Font Preview Tester
Preview editable display, heading, paragraph, and label copy in any named Google Fonts family.
Open toolFont Pairing Tester
Search open-source Google Fonts, load any public family by name, and compare realistic heading and body hierarchy.
Open toolLetter-spacing Preview
Preview tracking changes on editable copy and copy the equivalent em value.
Open toolFrom one asset to the whole workflow
Keep this decision connected to the work, feedback, and final approval.
Draftroom keeps projects, creative files, feedback, revisions, and approvals connected in one workspace.