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

In addition to @Peter Constable's answer and referring to the OP's comments:

Variable fonts can be used to combine multiple weights in a single font file since variable fonts provide the option to interpolate between the specified weight (or width, slant etc) ranges.

Responding to the OP's comment:

You can have different font weights in a single file without variable fonts

That's not correct. Sure we have formats like ttc (TrueType Collections) a kind of archive format including multiple font variations in a single file. However, this format is not supported by any browser and therefore not relevant for any web application.

@font-face rules are agnostic to intrinsic font properties

In other words: although the browser parses a font file and this font may flawlessly support a "native" font weight of e.g 600 – once the element based weight exceeds the range of the font-face definition – we get "faux-bold" so a artificially boldened font rendering. BTW each font rendering engine has different concepts for faux-bolds – no predictable cross-browser rendering.

To illustrate the problem:

.grd{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1em;
}


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


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

.col-2{
    font-family: "IBMPlex_VF2";
}

body {
  font-family: "IBMPlex_VF";
  font-size: 15vmin;
  margin: 0;
}

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

.noFaux{
  font-synthesis: none;
}

.wgt100{
    font-weight: 100;
}

.wgt200{
    font-weight: 200;
}
.wgt300{
    font-weight: 300;
}
.wgt400{
    font-weight: 400;
}

.wgt500{
    font-weight: 500;
}

.wgt600{
    font-weight: 600;
}

<div class="grd">
  <div class="col">
    <p class="wgt100">Hamburglefonstiv</p>
    <p class="wgt200">Hamburglefonstiv</p>
    <p class="wgt300">Hamburglefonstiv</p>
    <p class="wgt400">Hamburglefonstiv</p>
    <p class="wgt500">Hamburglefonstiv</p>
    <p class="wgt600">Hamburglefonstiv (Faux bold)</p>
    <p class="wgt600 noFaux">Hamburglefonstiv</p>
  </div>

  <div class="col col-2">
    <p class="wgt100">Hamburglefonstiv</p>
    <p class="wgt200">Hamburglefonstiv</p>
    <p class="wgt300">Hamburglefonstiv</p>
    <p class="wgt400">Hamburglefonstiv</p>
    <p class="wgt500">Hamburglefonstiv</p>
    <p class="wgt600">Hamburglefonstiv (600)</p>
    <p class="wgt600 noFaux">Hamburglefonstiv</p>
  </div>
</div>

The solution is to always define the font-face weight/width/stretch ranges according to the supported design axis ranges.

Browsers won't auto-fix discrepancies. Some browsers may add some extra logic/fallbacks which inevitably results in unpredictable cross-browser renderings.

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.

Answer 3

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.