How Variable Fonts Work: A Visual Guide
An interactive visual guide to variable fonts. Learn about weight, width, slant, and optical size axes, plus how to use them in CSS with font-variation-settings.
Variable fonts are a single font file that contains an entire range of styles -- from thin to bold, narrow to wide, and everything in between. Instead of loading separate files for Regular, Medium, Bold, and Extra Bold, a variable font packages all variations into one file that can smoothly interpolate between any point on its design axes. This guide explains how they work and how to use them.
The Problem Variable Fonts Solve
Traditional web fonts are static: each weight, width, and style requires a separate file. Loading Inter in Regular, Medium, Bold, and Extra Bold means four HTTP requests and roughly 200-400KB of font data. Variable fonts solve this by encoding the design space as mathematical interpolation between master outlines. A single Inter variable file (~100KB) provides continuous access to every weight from 100 (Thin) to 900 (Black) and everything between -- weight 350, weight 647, or any arbitrary value.
Understanding Font Axes
A variable font axis is a dimension of variation. The most common axes are: wght (weight, typically 100-900), wdth (width, e.g. 75-125%), ital (italic, binary 0 or 1), slnt (slant, e.g. -12 to 0 degrees), and opsz (optical size, adjusts letter shapes for different sizes). Some fonts define custom axes -- Inter has a 'Tabular Numbers' axis, and Recursive has a 'Casual' axis that interpolates between a strict linear style and a handwritten casual style. Each axis has a minimum, maximum, and default value.
How to Use Variable Fonts in CSS
The simplest way is with standard CSS properties. font-weight accepts any number, not just 100/200/300 multiples: font-weight: 450; creates a weight between Regular (400) and Medium (500). For non-standard axes, use font-variation-settings: font-variation-settings: 'wght' 450, 'wdth' 90, 'CASL' 0.5; The first value is the four-character axis tag, the second is the value. Registered axes (wght, wdth, ital, slnt, opsz) use lowercase tags. Custom axes use uppercase tags.
Variable Fonts and Performance
A variable font file is typically larger than a single static weight but smaller than 3+ static weights combined. For example, Inter static Regular is about 25KB, but Inter variable is about 100KB. If you only need Regular, the static file is smaller. But if you need Regular + Medium + Bold + Black (4 files, ~100KB total), the single variable file is equivalent in size while offering infinitely more flexibility. The performance benefit grows as your design uses more weight or width variations. Variable fonts also enable CSS animations and transitions along axes, creating smooth weight changes on hover without loading additional files.
Best Variable Fonts on Google Fonts
Inter: wght (100-900) + opsz. The gold standard for UI typography. Roboto Flex: wght + wdth + opsz + GRAD + slnt. One of the most axis-rich variable fonts available. Montserrat: wght (100-900). Clean geometric sans-serif. Source Sans 3: wght (200-900) + ital. Adobe's workhorse. Recursive: wght + CASL + slnt + CRSV + MONO. Five axes including a linear-to-casual interpolation. Fraunces: wght + opsz + SOFT + WONK. An old-style serif with a 'wonkiness' axis. All of these are free, open-source, and supported in all modern browsers.
Browser Support and Fallbacks
Variable fonts are supported in all modern browsers: Chrome 66+, Firefox 62+, Safari 11+, Edge 17+, and all Chromium-based browsers. This covers over 97% of global web traffic. For the small percentage of users on older browsers, the font will fall back to the default value of each axis (typically Regular weight). Use @supports (font-variation-settings: normal) to detect support and provide static font fallbacks if needed.
Conclusion
Variable fonts represent the future of web typography -- fewer files, better performance, and infinitely more design flexibility. If you are starting a new web project, consider making variable fonts your default choice.
Explore our tools to put these ideas into practice:
- Font Tools — Customize and export Google Fonts
- Text Effects — Create stunning visual text graphics
- Text Generators — Generate fancy Unicode text
- Online Keyboards — Type in any language
More Guides
Best Google Fonts for Web Design in 2026
A curated list of the 15 best Google Fonts for modern web design projects. Includes serif, sans-serif, display, and monospace picks with usage tips and pairing suggestions.
How to Change Fonts on Instagram Bio & Captions
Step-by-step guide to using custom fonts on Instagram. Learn how to change fonts in your bio, captions, stories, and DMs using Unicode text generators.
The Complete Guide to Unicode Text for Social Media
Everything you need to know about Unicode text generators: how they work, where they work, platform compatibility, and best practices for Instagram, Discord, TikTok, and more.
How to Use Custom Fonts in Discord
Learn how to use bold, italic, cursive, gothic, and other fancy text styles in Discord using Unicode text generators. Works for usernames, messages, and server descriptions.