Tools
Variable Font Tester
A variable font packs an entire family into one file by exposing typed axes such as weight, width, optical size, and slant. This variable font tester renders real Google Fonts in your browser and lets you drag each axis to see the letterforms respond, then copy the resulting font-variation-settings CSS.
What Are Variable Fonts?
A variable font is a single font file that exposes one or more typed axes. Each axis has a four-character tag, a minimum, a maximum, and a default. The browser interpolates the letterforms in real time as you change the axis values, so one file replaces what used to require six or more static files.
The OpenType specification defines registered axes (lowercase tags) and lets foundries declare custom axes (uppercase tags, like SOFT on Fraunces). Registered axes cover the common cases. Custom axes carry a foundry-specific meaning, such as rounding, grade, or informality. The Microsoft OpenType variable font specification is the canonical reference for axis definitions, and the W3C CSS Fonts Level 4 specification defines the font-variation-settings property used to drive them.
Variable fonts matter for three reasons. The payload is smaller, because one file replaces many. The type can be fluid, animating between weights as the viewport changes. And optical sizing can run automatically, tuning letterforms for 12-pixel body copy and 96-pixel headlines from the same file.
Variable Font Axes Explained
The most common registered axes appear in the table below. Custom axes are uppercase and behave however the foundry defines them.
| Tag | Name | What it does | Typical range |
|---|---|---|---|
| wght | Weight | Stroke thickness from thin to black. | 100 to 900 |
| wdth | Width | Condenses or expands the letterforms horizontally. | 75 to 125 |
| opsz | Optical size | Tunes letterforms for small body text or large display. | 8 to 144 |
| slnt | Slant | Linear slant, distinct from the italic style. | -12 to 0 |
| ital | Italic | Swaps to the italic alternate forms (0 or 1). | 0 to 1 |
| GRAD | Grade | Changes weight without changing text width. | -200 to 150 |
| SOFT | Soft (Fraunces) | Rounds the sharp serif terminals on Fraunces. | 0 to 100 |
How to Use the Variable Font Tester
The tester opens on a single selected font with all its available axes. Drag any axis slider to see the preview update immediately.
- Pick a font. The dropdown shows every variable font in the Font Blend catalog. Each entry shows the font name and its axis count. Select a font to load it in the preview.
- Drag the axis sliders. Each registered axis appears as a labeled slider. Drag left or right to change the value and watch the letterforms respond in the preview. The wght axis has the most visible effect on most fonts.
- Change the preview size. The size slider goes from 24 to 120 pixels. Some fonts show noticeably different letterforms at the extremes, especially fonts with an opsz axis that tunes for small or large sizes.
- Copy the CSS. Click the copy button below the preview to copy the font-variation-settings CSS string. Paste it into your stylesheet where you set the font-family. The string uses the exact axis tags and values from the sliders.
- Reset to defaults. Click reset to return all axes to their default values. The reset button restores the font to its original state without reloading the page.
Common Tasks for Variable Fonts
- Fluid weight across breakpoints
- Use CSS clamp() to set the weight axis dynamically as the viewport changes. Set font-variation-settings: "wght" var(--weight) and define the CSS custom property with clamp(400, 4vw, 700). The weight shifts smoothly as the user resizes the window.
- Optical sizing for articles
- Set opsz to match the font size. At 12 to 18 pixels, opsz should be low. At 48 to 96 pixels, opsz should be high. Some variable fonts have an opsz axis that responds automatically when you set font-optical-sizing: auto, but you can also set it explicitly to override the automatic behavior.
- Condensed layouts
- For sidebar text or narrow columns, use the wdth axis to compress the letterforms. Most sidebar text sits between 85 and 95 on the width axis. Over-compressing makes text harder to read, so test at the actual column width before committing.
- Italic simulation
- The slnt axis drives a linear slant, not the same as a true italic. If the font has an ital axis, use it instead: set font-variation-settings: "ital" 1 for proper italic forms. The slnt axis is for fonts that do not have a designed italic but allow the letterforms to be sheared.
Frequently Asked Questions
- Which browsers support variable fonts?
- All modern browsers support variable fonts. Chrome, Firefox, Safari, and Edge all render font-variation-settings correctly. Internet Explorer does not support variable fonts, but it has negligible market share in 2026. The browser handles the interpolation on the GPU, so performance impact is minimal.
- Do variable fonts work in email clients?
- Most email clients do not support variable fonts. Apple Mail and the iOS mail app have partial support. Gmail and Outlook strip variable font declarations and fall back to a static font. If your emails reach a broad audience, use a static font for the body and reserve variable fonts for email clients where you can confirm support.
- What is the performance cost of variable fonts?
- Variable fonts are typically smaller than the equivalent set of static fonts. A family with Thin through Black (9 weights) loads as one file instead of nine. The file size is roughly comparable to two or three static weights. For most projects, the file size savings outweigh any rendering overhead.
- Can I animate between two axis values?
- Yes. CSS transitions and animations work on font-variation-settings. You can animate the weight axis smoothly between two values with a CSS transition. This is how fluid typography works in modern CSS. The interpolation happens in the browser as the animation plays.
Related Tools
The variable font tester connects to three other tools. The font browser lists every font in the dataset. The playground lets you put a variable font into a real layout. The type scale calculator shows how variable weight reads at every size.