Variable Fonts: One File, Infinite Styles
Variable fonts pack an entire typeface's variations—from thin to bold, condensed to wide—into a single file. This avoids multiple HTTP requests for different font weights, giving you a continuous range of styles with CSS.
Why it exists
Traditional web typography forces a trade-off between design flexibility and performance. To use multiple font styles (e.g., regular, bold, light, condensed), you must load a separate file for each one. This increases HTTP requests and total download size, slowing down your site.
The mental model
A variable font is like a graphics equalizer for typography. Instead of a binary switch for 'bold' (on/off), you get a slider for 'weight' that you can set to any value between its minimum and maximum. The same applies to other axes like width or slant. All these controls are packed into a single, efficient file.
How it works
A variable font is a single OpenType file that contains all the information needed to render any variation of a typeface. Instead of discrete font files, it defines 'variation axes' like weight, width, or slant. In CSS, you load this single file with one @font-face rule. You can then use standard properties like font-weight or the more powerful font-variation-settings to access any point along an axis, not just predefined steps like 400 or 700.
When to use it
Use variable fonts when you need fine-grained typographic control or want to use multiple font styles without a performance penalty. They are ideal for responsive designs where you might slightly adjust font weight or width for different screen sizes to maintain readability. For example, you can use a slightly narrower width for data-dense tables on mobile or make headings bolder as they get larger.
When not to use it
The primary footgun is compatibility. If your site must have perfect visual consistency on very old operating systems (like macOS before 10.13) or legacy browsers, you must implement a robust fallback strategy using static fonts. If you only need a single, specific font style (e.g., just 'Roboto Regular'), a single static font file will be smaller and simpler to manage.
One canonical example
A typical site might load four static font files for body copy: regular, italic, bold, and bold italic, totaling around 80KB. A single variable font file containing that entire range (and more) might be 50KB. This one file replaces four HTTP requests and gives you access to every weight in between, like semi-bold and extra-light, which would have required even more files.
Interview question
A developer needs to implement a responsive design that dynamically adjusts font weight and width across various screen sizes while minimizing HTTP requests. Which approach is most effective?
- a.Employing web fonts from a CDN that automatically optimizes font delivery.
- b.Converting all text elements into raster images to ensure consistent rendering.
- c.Loading separate static font files for each required weight and width variation.
- d.Using a single variable font file that defines multiple variation axes.Correct
Why? this is the answer
Variable fonts allow a single file to contain all variations along axes like weight and width, enabling fine-grained adjustments via CSS without multiple HTTP requests, which is ideal for responsive design and performance. Loading separate static files (Option C) would increase HTTP requests and download size, directly contradicting the goal of minimizing requests.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on css — each one lists the topics its interview covers.
See open roles