What Are Variable Fonts? A Beginner’s Guide

One font file. Every weight, width, and style your project needs. That’s the promise behind variable fonts, and after nearly a decade since their introduction, the technology is delivering on it.

So what are variable fonts, exactly? They’re single OpenType files that replace entire families of static font files by storing continuous design variations along adjustable axes. The result is fewer HTTP requests, smaller total file sizes, and typographic flexibility that static fonts simply can’t match.

This guide covers how variable font axes work, where performance gains actually show up, how to implement them in CSS and design tools, where to find them, and when you’re better off sticking with static fonts.

What Are Variable Fonts

A variable font is a single font file that contains an entire range of design variations. Weight, width, slant, optical size. All packed into one file instead of twelve separate ones.

Traditional static fonts require a different file for every style you want to use. Regular, bold, italic, light, semi-bold. Each one is a standalone file that your browser has to download individually. A typeface family like Helvetica Neue might ship with 12 or more separate files just to cover its full range of styles.

Variable fonts flip that model. One file handles everything. You get infinite variations between those predefined styles, not just the fixed stops.

The technology is built on the OpenType Font Variations specification (version 1.8), which was announced jointly by Adobe, Apple, Google, and Microsoft at the ATypI conference in Warsaw on September 14, 2016. That level of cross-company cooperation was unusual for the font industry, which had spent decades in what people called “the font wars.”

HTTP Archive’s 2024 Web Almanac found that 33% of websites now use variable fonts, up from 29% in 2023 and roughly 11% in 2020. The growth has been significant, though it’s slowing down compared to the near-tripling that happened between 2020 and 2022.

Both .ttf and .woff2 file formats support variable font data. WOFF2 is the preferred format for the web because of its compression, and it’s used on 81% of desktop websites for font delivery according to the same HTTP Archive data.

How Variable Fonts Differ from Static Fonts

The difference comes down to how information is stored.

Static fonts contain one fixed set of outlines per file. If you want Roboto in regular weight, that’s one file. Roboto bold is a completely separate file. Roboto italic, another file. Each glyph is drawn at one specific set of proportions and that’s it.

Variable fonts store multiple “master” designs inside a single file. The font rendering engine interpolates between those masters at display time, generating any variation you request on the fly. Think of it less like picking from a menu and more like adjusting a slider.

A single Roboto static variant weighs roughly 165-175KB in TTF format. The Roboto variable font is 3.36MB in TTF, but when compressed to WOFF2, it drops to about 1.40MB. If you’re using 6+ weights from a static family, the variable version wins on total payload.

The OpenType 1.8 Specification

OpenType Font Variations didn’t appear out of nowhere. The concept traces back to Apple’s TrueType GX Variations from the early 1990s and Adobe’s Multiple Master format from the same era. Neither caught on. The industry wasn’t ready, computers weren’t fast enough, and the companies were competing instead of collaborating.

By 2016, web fonts and mobile devices had changed the conversation. Responsive design created demand for delivering more typographic variations without ballooning file sizes. So the four biggest players in font technology sat down and built something together.

The specification integrates variations into nearly every part of the OpenType format. It works with both TrueType and CFF glyph outlines, supports TrueType hinting, and ties into OpenType Layout mechanisms. All major browsers added support relatively quickly. Chrome, Firefox, Safari, and Edge all handle variable fonts today, giving the technology a browser compatibility score of 92 out of 100 according to LambdaTest.

How Variable Font Axes Work

Every variable font is organized around axes. An axis is a single dimension of variation. Weight is an axis. Width is an axis. Slant is an axis.

Each axis has three values: a minimum, a default, and a maximum. The font rendering engine can produce any value within that range. So if the weight axis runs from 100 to 900, you can set it to 437 if you want. You’re not locked to the preset increments.

According to HTTP Archive’s 2022 data, the weight axis (wght) appears on 82-87% of pages using variable fonts. Width (wdth) and optical size (opsz) each appear on about 4-5% of pages, with slant and italic trailing behind.

Registered Axes

The OpenType specification defines five registered axes. These are standardized, meaning every font that uses them follows the same naming and value conventions.

Weight (wght): Controls stroke thickness. Maps directly to the CSS font-weight property, accepting values like 100 through 900 and everything between.

Width (wdth): Adjusts the horizontal scaling of characters. Connects to font-stretch in CSS, expressed as a percentage where 100% is normal width.

Italic (ital): A binary switch between upright (0) and italic (1) designs. Not a gradual transition. The font contains two separate sets of outlines for this one.

Slant (slnt): Skews characters at a specified angle. Unlike italic, this is continuous. You can set any degree of slant within the axis range.

Optical size (opsz): Adjusts letterforms based on the display size. At small sizes, counters open up and stroke contrast reduces for better legibility. At large sizes, the font can show finer details. This axis helps maintain typographic hierarchy across sizes without manually switching fonts.

Custom Axes

Type designers can invent their own axes. Custom axis tags are always written in uppercase to distinguish them from the registered ones.

Some examples that show what’s possible:

• GRAD (Grade): Changes visual weight without altering the text’s width or line length. Useful when switching between light and dark modes
• CASL (Casual): Found in fonts like Recursive, it shifts between a formal and a handwritten feel
• MONO (Monospace): Also in Recursive, transitions between proportional and fixed-width spacing

The Japanese marketing agency SHIFTBRAIN commissioned TypeType to build a custom variable font capable of stretching to extreme horizontal widths for their 20th anniversary interactive website. That kind of project-specific customization is where custom axes really shine.

Global Growth Insights reported that the font and typeface market hit $1.14 billion in 2024, with a projected climb to $1.66 billion by 2034. Variable fonts and custom typography solutions are a big part of what’s driving that growth.

Performance Benefits of Variable Fonts

Fewer files. Fewer HTTP requests. Potentially smaller total payload. That’s the pitch.

And the real-world numbers back it up, at least when you’re using three or more weights from the same family.

Source Sans Pro tells the story well. A single static weight in OTF format weighs about 243KB. All weights combined hit roughly 1,170KB. The variable font version? 405KB in OTF. Drop it into WOFF2 and it compresses to around 112KB, nearly the same size as a single static weight.

DeveloperUX documented a case where switching to a Roboto variable font cut page load time by 30% (from 700ms to 490ms) and halved the first contentful paint time from 1.6 seconds to 0.8 seconds. An e-commerce site they tracked reduced its font payload from 376KB to 89KB, improving Largest Contentful Paint by 22%.

But here’s the part that gets overlooked. If you’re only loading two font files (say, regular and bold), the static versions might actually be smaller and faster. The 640KB Acumin variable font that caused frustration in an Adobe Fonts community thread is a good reminder. You’d need over 40 different weights before that variable font justified itself on file size alone.

The real performance win is often about HTTP requests, not just kilobytes. Each request means a round trip to the server. Consolidating to a single font file reduces that overhead, which matters more on mobile connections.

Google Performance Insights found that optimized fonts and compressed images reduce Largest Contentful Paint by up to 25%. Fonts are a frequent bottleneck for Core Web Vitals, and variable fonts give you one of the simpler paths to improving those scores.

Using Variable Fonts in CSS

The CSS implementation is surprisingly clean. If you’ve set up @font-face rules before, you already know most of what you need.

The key difference is that instead of declaring a single value for font-weight in your @font-face rule, you declare a range. Same goes for font-stretch and font-style.

Web fonts are now found on roughly 88% of all websites according to HTTP Archive’s 2025 data, and about a third of those are using variable font technology. The CSS tooling has caught up completely.

The @font-face Setup

Here’s what a variable font declaration looks like in practice. You specify the weight range, the stretch range, and point to a single WOFF2 file.

Once declared, you use standard CSS properties. Set font-weight: 450 and it just works. Set font-stretch: 87% and the font adjusts to that exact width. No extra files to load, no new @font-face rules.

For registered axes, stick with the higher-level CSS properties. font-weight for wght, font-stretch for wdth, font-style for ital and slnt. Browsers map these to the right axes automatically, and they provide better fallback behavior if the variable font fails to load.

For custom axes, you’ll need the font-variation-settings property. This is also where you can do fine-grained control over any axis:

font-variation-settings: 'wght' 625, 'GRAD' 80, 'CASL' 0.5;

The font spacing between characters stays consistent because the font itself handles the metrics. Unlike faking bold with -webkit-text-stroke or faking italics with transforms, variable font axes produce properly designed letterforms at every point along the range.

Animating Variable Font Properties

This is where things get fun.

Because variable font axes accept numeric values, they’re animatable with CSS transitions and keyframes. You can smoothly animate a heading from light to bold on hover. You can transition width on scroll. You can create movement effects that would’ve been impossible with static fonts.

The performance cost is low because interpolation happens at the rendering level. No new font files are loading during the animation. The browser is just recalculating outlines from the same master data.

Took me a while to realize how much creative control this opens up. You can create motion graphics-style text effects purely in CSS. Hover states, scroll-triggered changes, emphasis shifts on focus. The kind of responsive typography that used to require JavaScript or multiple font loads is now just a transition property away.

Variable Fonts in Design Tools

Browser support was the first hurdle. Design tool support was the second. Both are largely solved now.

Adobe Creative Cloud added variable font support in its 2018 release. Photoshop and Illustrator both expose axis sliders in their character panels. Figma followed. Sketch supports them too, though with some limitations on custom axes.

Monotype’s 2024 Font Use & Forecasting Survey found that 83% of designers view typography as playing a critical role in branding and communication. And 76% prioritize readability and accessibility in their font choices. Variable fonts address both needs in a way that static fonts can’t easily match.

How it works in practice: you load a variable font file into your design tool, and sliders appear for each available axis. Drag the weight slider to 623 and see the result instantly. No hunting through a dropdown of 12 separate styles. It’s direct manipulation of design elements at the character level.

The tricky part is consistency between design and production. A weight of 623 in Figma needs to translate to font-weight: 623 in CSS for the output to match the mockup. This is actually one of the wins. With static fonts, designers picked “Semi-Bold” and developers had to figure out what numeric value that corresponded to. With variable fonts, the value is the value.

Not every design tool exposes every custom axis though. If a font has a GRAD axis or something unusual, Figma might not surface it in the UI. You’d need to check tool documentation or fall back to the browser for testing custom axis values.

Where to Find Variable Fonts

Google Fonts is the obvious starting point. It’s free, it’s massive, and it’s already serving variable fonts to 92% of websites that use the technology (down from 97% in 2022 as more sites move to self-hosting, per HTTP Archive 2024).

As of 2025, Google Fonts hosts roughly 468 variable font families out of its total library of 1,826 font families. You can filter by “Show only variable fonts” in the directory. Noto Sans JP, Open Sans, and Montserrat are the most widely used variable fonts on the web right now.

Adobe Fonts: Included with Creative Cloud subscriptions. Good selection, tight integration with Adobe tools. Variable concept versions of Source Sans, Source Serif, Acumin, and Myriad are available.

Independent foundries worth checking:

• DJR (David Jonathan Ross) builds variable fonts with unusual custom axes
• Grilli Type offers high-quality variable families for branding work
• OH no Type Co focuses on personality-driven variable display fonts
• Dinamo produces experimental and forward-looking variable type

Open-source picks: Inter, Recursive, Source Sans 3, and Roboto Flex are all solid. Recursive is particularly interesting because it uses custom axes for casual and monospace variations, which is something you rarely see.

For testing and exploration, axis-praxis.org and v-fonts.com let you play with variable font axes directly in the browser. These are great for understanding how axes work before committing to a specific font for a project. Your mileage may vary with some of the more obscure fonts listed there, but the popular ones render well.

Common Problems with Variable Fonts

Variable fonts solve a lot of problems. They also create a few new ones that catch people off guard.

The technology is mature enough for production use, but you’ll hit friction points, especially when your project spans multiple operating systems or involves strict performance budgets. Some of these issues are fixable with tooling. Others you just have to plan around.

Font Rendering Across Operating Systems

Windows and macOS handle font rendering differently at a fundamental level. Windows relies heavily on font hinting, snapping character strokes to the pixel grid for crisp edges. macOS prioritizes preserving the original shape of the letterforms, even if it means softer edges.

Variable fonts amplify this gap. A weight of 450 that looks balanced on a Mac might appear too thin or too chunky on Windows, depending on the display’s DPI and ClearType settings.

CFF2-based variable fonts caused specific issues on Windows, where the text rendering engine sometimes blanked out UI text entirely. Microsoft patched this with the KB5032278 update in 2023, but the incident shows how OS-level rendering quirks can bite you.

According to the HTTP Archive 2022 data, 99.99% of variable fonts on the web use the glyf format rather than CFF2. Sticking with glyf-based variable fonts avoids the worst rendering bugs.

Subsetting and File Size Optimization

A variable font file can be large. The Acumin variable font from Adobe weighs 640KB, which frustrated developers on a public sector web project who needed to meet strict page weight budgets.

Subsetting fixes this. Two tools handle most of the work:

• fonttools/pyftsubset: Python-based, industry standard. Google Fonts reportedly uses it for their own subsets. Can strip unused character ranges, OpenType features, and output directly to WOFF2
• glyphhanger: Built by Zach Leatherman at Filament Group. Crawls your site, finds which characters you actually use, then subsets accordingly. Uses pyftsubset under the hood

One subsetting case study showed that converting iA Writer Quattro from TTF to WOFF2 alone reduced file size by 70% before any character removal. Subsetting the Recursive variable font by content reduced its weight by an additional 30%.

Fallback and Browser Edge Cases

Not every browser handles custom axes the same way. If a browser doesn’t recognize a custom axis tag, it ignores it silently. No error, no warning. The font just renders at the axis default.

The bigger issue is fallback behavior when the variable font fails to load entirely. Your CSS needs a solid font stack. If you’ve been setting font-weight: 623 in your styles (because the variable font supports it), a static fallback font will round that to the nearest available weight, usually 400 or 700.

Using font-display: swap in your @font-face declaration reduces CLS-related text shifts by 22% according to Web.dev data. That’s the single easiest thing you can do to handle font loading failures gracefully.

Variable Fonts and Accessibility

Accessibility is where variable fonts stop being a performance optimization and start being a genuine usability tool.

WCAG doesn’t specify which fonts to use. It doesn’t set a minimum font size either. But it does require that text can be resized to 200% without losing content or functionality (Success Criterion 1.4.4), and that color contrast between text and background meets specific ratios (4.5:1 for normal text, 3:1 for large text under WCAG 1.4.3).

Variable fonts make it easier to meet those requirements in practice.

Adjustable Weight for Low Vision Users

People with low vision often need heavier font weights to read comfortably. With static fonts, that means loading an extra file. Maybe your site only loaded regular and bold, and the user needs something between 600 and 800 to read at their preferred contrast level.

A variable font weight axis solves this without any additional HTTP requests. The same file that serves your design team’s preferred weight of 400 also serves an accessibility-adjusted weight of 700, or 583, or anything the user needs.

Hanyi launched an accessibility-focused font series in 2024. About 44% of educational platforms and 39% of government websites integrated these fonts, according to Global Growth Insights.

Optical Size and Grade Axes

The optical size axis is subtle but significant. At small text sizes (12px, 14px), letter counters automatically open wider and stroke contrast reduces. At large sizes, finer details come through. This happens without any CSS changes because browsers can map font-size directly to the opsz axis.

The grade axis (GRAD) is particularly useful for dark mode adjustments. Light text on dark backgrounds tends to look visually heavier than dark text on light backgrounds. GRAD lets you reduce the perceived weight slightly without changing the text’s actual width or reflowing lines. Your leading, line lengths, and layout stay the same.

Section508.gov notes that while WCAG doesn’t dictate specific typefaces, government websites need clear, consistent visual hierarchy and highly legible text. Variable fonts give more control over both without multiplying the number of font files in your stack.

When Not to Use Variable Fonts

Variable fonts aren’t always the right call. Sometimes a static font is faster, simpler, and perfectly adequate.

Knowing when to skip the technology matters as much as knowing how to use it.

Single Weight Projects

If you only need one or two font weights, static fonts win.

A single static Roboto weight is around 165-175KB in TTF. The variable Roboto is 3.36MB in TTF (1.40MB in WOFF2). The math doesn’t work unless you’re using at least three or four weights from the same font family.

LogRocket’s performance testing confirmed this. When only four static font variations were used, page load times beat the Roboto variable font. The crossover happens somewhere around 6+ weights, where the single-request advantage of variable fonts starts to outweigh the larger file.

Email and Legacy Environments

Email HTML is a different world.

Can I Email data shows that @font-face support in email clients sits at roughly 24%. Gmail doesn’t support custom web fonts at all (aside from Roboto and Google Sans, which it uses internally). Outlook for Windows uses Microsoft Office’s rendering engine, which has its own long list of quirks.

Variable fonts in email? Forget it. Stick with email-safe fonts like Arial, Verdana, Georgia, and Times New Roman.

Legacy environments present the same problem. Older Android WebViews, IE11, and some embedded browser contexts don’t support variable fonts. If your audience still includes these platforms, you’ll need static font fallbacks anyway, which defeats the point.

When the Typeface Doesn’t Exist as Variable

Not every typeface has a variable version. Some iconic fonts from established foundries are still static-only.

If your brand guidelines specify a particular serif or sans-serif font that hasn’t been rebuilt as a variable font, that’s the end of the conversation. Font licensing also comes into play. Some licenses cover web use but not variable font distribution, or vice versa.

Photutorial reports that Google Fonts now hosts 468 variable font families out of 1,826 total. That’s about a quarter of the library. The selection is growing, but it’s far from comprehensive.

Bottom line: check whether the font you need actually ships as variable before building your web design workflow around it. And if you’re pairing fonts, make sure both work as variable. Mixing a variable heading font with static body text is fine technically, but you lose some of the file-size advantages.

FAQ on What Are Variable Fonts

What is the difference between a variable font and a static font?

A static font is one file per style (regular, bold, italic). A variable font packs all those styles into a single file, letting you access any weight, width, or slant value within its defined range.

Do variable fonts work in all browsers?

Yes, all major browsers support them. Chrome, Firefox, Safari, and Edge handle variable fonts fully. LambdaTest rates browser compatibility at 92 out of 100. Legacy browsers like IE11 don’t support them.

Are variable fonts faster than static fonts?

They can be. If you’re loading three or more weights from the same family, a single variable font file typically reduces total payload and HTTP requests. For one or two weights, static fonts are often smaller.

How do variable font axes work?

Each axis controls one dimension of variation, like weight or width. Axes have a minimum, default, and maximum value. The rendering engine interpolates between master designs to produce any value within that range.

What CSS properties control variable fonts?

Standard properties like font-weight and font-stretch map to registered axes. For custom axes or fine-grained control, use font-variation-settings. Both work inside a standard @font-face declaration with range values.

Can I animate variable font properties?

Yes. Because axis values are numeric, you can animate them with CSS transitions and keyframes. Weight, width, and slant all transition smoothly. The browser recalculates outlines from the same file, so no extra downloads happen.

Where can I download variable fonts for free?

Google Fonts hosts around 468 variable font families for free. Popular choices include Inter, Roboto Flex, Recursive, and Source Sans 3. Testing playgrounds like axis-praxis.org let you experiment before downloading.

Do design tools support variable fonts?

Figma, Adobe Illustrator, and Photoshop all support them. Axis sliders appear in the character panel for adjusting weight, width, and other properties. Some tools may not expose every custom axis though.

What is the optical size axis in a variable font?

The optical size axis (opsz) adjusts letterforms based on display size. At small sizes, counters open wider and stroke contrast drops for better readability. At large sizes, finer details appear. Browsers can map this automatically.

Should I use variable fonts in email campaigns?

No. Email client support for custom web fonts sits at roughly 24%. Gmail, Outlook, and Yahoo don’t reliably render them. Stick with email-safe fonts like Arial or Georgia, and save variable fonts for your website.

Conclusion

Understanding what are variable fonts comes down to one shift in thinking: a single file replaces an entire font family. The OpenType 1.8 specification made that possible, and browser support has caught up completely.

The performance math favors variable fonts when you’re using three or more weights. Below that threshold, static fonts still make sense. Context matters.

For responsive typography across screen sizes, adjustable axes like weight, width, and optical size give you control that separate font files never could. The accessibility benefits alone, particularly for users who need custom text density, justify the adoption for most web projects.

Start with Google Fonts, test with axis-praxis.org, subset with fonttools, and measure the difference in your Core Web Vitals. The tooling is ready. Your font stack probably isn’t.

• Author
• Recent Posts

Bogdan Sandu

Bogdan Sandu is a seasoned designer who has been designing websites since 2008.

Renowned for his expertise in logo design and visual branding, Bogdan has developed a multitude of logos for various clients.

His skills extend to creating posters, vector illustrations, business cards, and brochures. Additionally, Bogdan's UI kits were featured on marketplaces like Visual Hierarchy and UI8.

He also wrote in the past years on sites like Design Your Way, WebDesignerDepot, WPDean, Designmodo, Speckyboy, Slider Revolution, and more.

Latest posts by Bogdan Sandu (see all)

• What Is an Oblique Font and When Should You Use It? - 1 August 2026
• Anime AI Video Generator: How to Choose the Right Tool for Character Animation - 31 July 2026
• The Bolt Logo History, Colors, Font, And Meaning - 30 July 2026