What is the difference between Variable fonts and regular fonts

Question

I was reading about variable fonts and I don't get the concept.

There are 5 registered axes wght, wdth, ital, slnt, opsz. Font weight already pre-existed and we use it daily in our css.

So what is the difference here between a variable font and a regular font?

Also, if I put a range of font-weight: 100 500 and then use font-weight: 600 in <p> elements, I don't see any difference.

The weight 600 continues to work even tho I have limited it to 500.

@font-face {
  font-family: "sketch_3dregular";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2 supports variations"),
    url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/57225/IBMPlexSansVar-Roman.woff2")
    format("woff2-variations");
  font-weight: 100 500;
  font-stretch: 85% 100%;
}

html {
  font-size: 10px;
  margin: 0;
  font-family: "sketch_3dregular";
}

p {
  font-size: 1.4rem;
  line-height: 1.6;
  word-spacing: 0.6rem;
  font-weight: 600;
}

Answer 1

The main difference between variable fonts and regular fonts is that variable fonts are a single file. That one file holds every weight. With regular fonts, however, every weight has its own file.

Also, variable fonts can be set to any weight under the sun. Seriously; while regular fonts are limited to weights like "light", "regular", and "bold", variable fonts can be set to arbitrary weights like 375 and 458, all the way up to 1000.

A big use for having variable weight is animation. You can actually animate the font's weight, making for cool effects. Check out this CodePen for a great example.

Finally, variable fonts can have other variables besides weight. Check out https://v-fonts.com and you'll see fonts with variable width, slant, and more.

For more information, I'd recommend reading this article from MDN.

Answer 2

Fonts have glyph outline data. If you have regular fonts for "regular" and "bold", then each of those has separate outlines. But in a variable font, there is one set of outlines plus additional "delta" data in which the font designer describes how the outline can be varied in a design-variation space of one or more axes. The delta data provides a maximal change along an axis, and you end up with a continuum from the original outline to the maximal modification, and any variation along that continuum can be selected.

So, a variable font can be described as being a whole family of fonts in a single file, but it's even more than that since that family now includes every small, incremental change along whatever axes are supported --- so not just a family with "light", "regular" and "bold" but also a continuous range of possibilities in between.

Animation was mentioned as a possible use. But even more significant for Web developers are access to greater typographic palette and smaller/fewer files to download.

I recommend a recent presentation by Mandy Michael, Very Responsive Typography with Variable Fonts, and also an article she wrote on performance, The performance benefits of Variable Fonts.

If you want to understand the technical details about how the variable font format works, there's an overview chapter in the OpenType spec, here.

The MDN guide is also excellent.

As for your specific question about declaring a range font-weight: 100 500 and then using font-weight: 600 but not seeing anything different, any value outside the declared range will be invalid, and the UA will use the closest valid value. So in your example, font-weight: 600 should give the same result as font-weight: 500.