Variable Fonts and font-variation-settings

What a Variable Font Is

A traditional font family ships as separate files for each weight and style - regular, bold, italic, and so on. A variable font packs every one of those variations into a single file, with continuous axes that can be dialed to any value in between, not just the few fixed steps a designer originally shipped.

Using font-variation-settings

h1 {
  font-family: "Inter Variable", sans-serif;
  font-variation-settings: "wght" 650, "slnt" -3;
}

Here, "wght" and "slnt" are axis tags defined by the font itself - weight and slant in this example - and each is set to a precise numeric value rather than picking from preset keywords like bold.

Common Standard Axes

A Practical Benefit: Smooth Transitions

.btn {
  font-variation-settings: "wght" 400;
  transition: font-variation-settings 0.2s ease;
}
.btn:hover {
  font-variation-settings: "wght" 650;
}

Because the weight axis is a continuous number, it can be transitioned smoothly on hover - something impossible with fixed-weight font files, which can only jump between the separate files that were shipped.

Why Variable Fonts Matter

A single variable font file often replaces what would otherwise be six or more separate font files, reducing the total download size while giving far more typographic flexibility.