Variable Fonts Explained: One File, Every Weight

Traditional font families come as separate files: Thin, Light, Regular, Medium, Bold, Black and so on. A variable font packs that whole range into one file and lets you pick any point in between. It sounds technical, but it is one of the most useful improvements in typography in years.

How variable fonts work

A variable font contains one or more axes. The most common is weight, but fonts can also have width, slant, optical size or custom axes. Instead of choosing "Bold", you can choose weight 650, or 720, or anything the font supports.

The standard axes you will meet most often are:

• Weight (wght): from thin to black
• Width (wdth): from condensed to extended
• Slant (slnt) or italic (ital): upright to sloped

Why variable fonts are worth it

• Fine control. Get the headline weight exactly right instead of choosing between Bold and Black.
• Consistency. All weights come from the same source, so the family feels perfectly matched.
• Fewer files on websites. One variable file can replace several static files, which can mean fewer requests.
• Responsive typography. On the web you can even adjust weight at different screen sizes.

Using a variable font in design apps

Recent versions of Photoshop, Illustrator, InDesign, Figma and Affinity support variable fonts. After installing the variable file, look for a small sliders icon in the character or type panel. Drag the weight slider and the letters change smoothly.

Grift includes nine static weights with matching italics and a variable version, so you can use the static files in older software and the variable file in modern apps and on websites.

Using a variable font on a website

Upload the variable WOFF2 (or TTF if that is what is provided) and declare the weight range in CSS:

@font-face {
  font-family: "Grift";
  src: url("/fonts/grift-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
h1 { font-family: "Grift", sans-serif; font-weight: 780; }
p  { font-family: "Grift", sans-serif; font-weight: 420; }

The font-weight: 100 900 line tells the browser the file covers that whole range. Then you can use any value in between.

Things to keep in mind

• File size: a variable file is usually larger than one static weight, but smaller than loading many weights separately. If you only use one weight, a static file may be lighter.
• Older software: some older apps and office tools do not support variable fonts. Install the static versions for those.
• Do not install static and variable versions at the same time in the same app if it causes duplicate names; pick the one you need.

Creative uses

• Animated headlines that grow bolder on hover
• A brand system with precise weights for every heading level
• Slightly lighter text in dark mode, where bright text tends to look heavier

Should you switch to variable fonts?

If you use several weights of the same family, especially on a website, a variable font is usually worth it: fewer files, perfectly matched weights and more creative control. If you only ever use one weight, or you work in older software, static fonts are still perfectly fine. Many families, like Grift, include both, so you can choose per project.

Read more about file formats in OTF vs TTF vs WOFF2, or browse our font collection for families with lots of weights.