Breaking through the limitations, the charm of CSS font-variation variable fonts

Today, I saw a very interesting effect on CodePen -- GSAP 3 ETC Variable Font Wave , which is implemented with the help of the JS animation library GSAP, let's take a look:

I wondered if I could use CSS to fork a version, and after fiddling around for a while, I successfully achieved the original effect with pure CSS.

The core of the above effect is the animation of the text. The text changes continuously from , which is thinner and tighter, to , thicker and farther . Some would think this is transform: scale() , but it's not.

scale is to zoom in and out of an object in equal proportions, and if you observe the above effects carefully, it is obvious that there are changes in the thickness of the font and the width of the font. Here, in fact, a relatively new feature of CSS is used -- variable font , which is font-variation .

In this article, I will use this effect to introduce what CSS font-variation is.

What is CSS font-variation, variable fonts?

According to MDN -- Variable fonts , Variable fonts (Variable fonts) is an evolution on the OpenType font specification that allows multiple variants of the same font to be combined into a single font file. There is no need to split fonts with different font widths, font weights or styles into different font files. We can get the various font variants contained in this single file simply by referencing it via CSS with a line @font-face .

Emm, the concept is a bit difficult to understand, please explain briefly.

Corresponding to the variable font is the standard (static) font .

standard (static) font is a font file that only represents a combination of a specific width/weight/style of the font. Usually, the font files we introduce on the page are all of this type, which only represent a specific font of the font. A combination of width/weight/style.

And if we want to introduce a font family (such as Roboto font family), it may contain "Roboto Regular" (regular weight), "Roboto Bold" (bold), or "Roboto Bold Italic" (bold + italic) ) and a series of font files. This means that we may need 20 or 30 different font files to count as a whole font family (for large fonts with different widths, this number is several times higher).

And variable font -- font-variation , it can be understood as all in one , by using variable font, all permutations and combinations of word weight, word width, italics, etc. can be loaded into a file. Of course, this file may be larger than a regular single font file.

Limitations of static fonts

For example, in the Google Font , I randomly select a standard static font and implement a change animation of the font font-weight :

<p>CSS font-variation</p>
<p>CSS font-variation</p>
<p>CSS font-variation</p>
<p>CSS font-variation</p>
<p>CSS font-variation</p>
<p>CSS font-variation</p>

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300&display=swap');
p {
    font-family: 'Lato', sans-serif;
    font-size: 48px;
}
p:nth-child(1) {
    font-weight: 100;
}
p:nth-child(2) {
    font-weight: 200;
}
p:nth-child(3) {
    font-weight: 300;
}
p:nth-child(4) {
    font-weight: 400;
}
p:nth-child(5) {
    font-weight: 500;
}
p:nth-child(6) {
    font-weight: 600;
}

Check out the results:

It is not what we imagined, because the font thickness is from 100 to 600, so the font becomes thicker in turn, there are only two font weights:

1. When font-weight: at 100 - 500, it is actually font-weight: normal ;
2. When font-weight: 600 , it actually hit font-weight: bold .

This is also the limitation of traditional static fonts. In fact, in a single font file, there will not be all types of thickness and width of the font.

Variety of variable fonts

Next, we switch to variable fonts.

The syntax for loading variable fonts is very similar to other web fonts, with some notable differences provided through an upgrade to the legacy @font-face syntax available in modern browsers.

The basic syntax is the same, but the font technology is different, and variable fonts can provide allowable ranges for descriptors like font-weight and font-stretch , instead of being named according to the loaded font file.

Next, we'll load a AnyBody variable font that supports font weights from 100 to 900 , and font scaling support from 10% to 400% .

@font-face {
    font-family: 'Anybody';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');
    font-display: block;
    font-style: normal italic;
    font-weight: 100 900;
    font-stretch: 10% 400%;
}
p {
    font-family: 'Anybody', sans-serif;
    font-size: 48px;
}
p:nth-child(1) {
    font-weight: 100;
}
// ...
p:nth-child(6) {
    font-weight: 600;
}

The same is to set the font weight from 100 - 600, the effect is as follows:

This time, it can be seen that the font has an obvious uniform change, supporting the gradual change from font-weight: 100 to font-weight: 600 . This is the magic of variable fonts.

Understanding font-variation-settings

In addition to directly controlling the thickness of variable fonts through font-weight , CSS also provides a new property font-variation-settings to control multiple properties of variable fonts at the same time.

At the heart of the new format for variable fonts is the concept of a variable axis , which describes the allowable range of variation for a feature in a font design.

All variable fonts have at least 5 property axes that can be controlled by font-variation-settings , they are registered axes (registered) and can map existing CSS properties or values.

They are:

• Word weight axis "wght": corresponds to font-weight , controls the thickness of the font
• Width axis "wdth": corresponds to font-stretch , which controls the expansion and contraction of the font
• Slope axis "slnt" (slant): corresponds to font-style: oblique + angle of the font, which controls the inclination of the font
• Italic axis "ital": corresponds to font-style: italic of the font, which controls the inclination of the font (note that it is not the same inclination as font-style: oblique )
• Optical size axis "opsz": corresponds to font-optical-sizing of the font, controls the optical size of the font

Well, there may be a little bit of confusion, it's okay, you can understand what it means right away with an example.

Still using the above variable font, we use font-variation-settings to implement an animation of font thickness change:

<p>Anybody</p>

@font-face {
    font-family: 'Anybody';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');
    font-display: block;
    font-style: normal italic;
    font-weight: 100 900;
    font-stretch: 10% 400%;
}
p {
    font-family: 'Anybody';
    font-size: 48px;
    animation: fontWeightChange 2s infinite alternate linear;
}
@keyframes fontWeightChange {
    0% {
        font-variation-settings: 'wght' 100;
    }
    100% {
        font-variation-settings: "wght" 600;
    }
}

The effect is as follows:

Among them, it can be understood that the animation using the change of font-variation-settings: "wght" is equivalent to the animation of font-weight change:

Use font-variation-settings to change multiple features of fonts at the same time

OK, then if it's the same effect, why bother font-variation-settings ?

That's because font-variation-settings not only supports font thickness changes, but also supports the above-mentioned multiple style attribute changes set by the registered axis, as well as some font style attribute changes of the custom axis .

This time, in addition to the font weight, we will add the change of "wdth" , that is, the expansion and contraction of the font.

<p>Anybody</p>

@font-face {
    font-family: 'Anybody';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');
    font-display: block;
    font-style: normal italic;
    font-weight: 100 900;
    font-stretch: 10% 400%;
}
p {
    font-family: 'Anybody';
    font-size: 48px;
    animation: fontWeightChange 2s infinite alternate linear;
}
@keyframes fontWeightChange {
    0% {
        font-variation-settings: 'wght' 100, 'wdth' 60;
    }
    100% {
        font-variation-settings: "wght" 600, 'wdth' 400;
    }
}

This time, the animation effect of font weight from 100 to 600 and font scaling from 60% to 400% is performed. The effect is as follows:

That is to say, it is very important that font-variation-settings supports multiple font styles to change together at the same time.

At this point, in fact, we can already use this to achieve the effect shown in the title image. We simply transform, add multiple lines, and set a negative animation delay for each line:

<div class="g-container">
    <ul>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
        <li>ANYBODY</li>
    </ul>
</div>

Simplifying the code with SCSS, the core of the following code is to add the same animation font-variation-settings animation to each li , and set the equal difference animation-delay in turn:

li {
    animation: change 0.8s infinite linear alternate;
}
@for $i from 1 to 9 {
    li:nth-child(#{$i}) {
        animation-delay: #{($i - 1) * -0.125}s;
    }
}
@keyframes change {
    0% {
        font-variation-settings: 'wdth' 60, 'wght' 100;
        opacity: .5;
    }
    100% {
        font-variation-settings: 'wdth' 400, 'wght' 900;
        opacity: 1;
    }
}

The effect is as follows:

Ok, next, use CSS 3D to simply construct a 3D scene. The complete CSS code is as follows:

@font-face {
    font-family: 'Anybody';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/ETCAnybodyPB.woff2') format('woff2-variations');
    font-display: block;
    font-style: normal italic;
    font-weight: 100 900;
    font-stretch: 10% 400%;
}
.g-container {
    position: relative;
    margin: auto;
    display: flex;
    font-size: 48px;
    font-family: 'Anybody';
    color: #fff;
    transform-style: preserve-3d;
    perspective: 200px;
}
ul {
    background: radial-gradient(farthest-side at 110px 0px, rgba(255, 255, 255, 0.2) 0%, #171717 100%);
    padding: 5px;
    transform-style: preserve-3d;
    transform: translateZ(-60px) rotateX(30deg) translateY(-30px);
    animation: move 3s infinite alternate;
    
    &::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        height: 45px;
        background: #141313;
        transform: rotateX(-230deg);
        transform-origin: 50% 100%;
    }
}
li {
    width: 410px;
    animation: change 0.8s infinite linear alternate;
}
@for $i from 1 to 9 {
    li:nth-child(#{$i}) {
        animation-delay: #{($i - 1) * -0.125}s;
    }
}
@keyframes change {
    0% {
        font-variation-settings: 'wdth' 60, 'wght' 100;
        opacity: .5;
    }
    100% {
        font-variation-settings: 'wdth' 400, 'wght' 900;
        opacity: 1;
    }
}
@keyframes move {
    100% {
        transform: translateZ(-60px) rotateX(30deg) translateY(0px);
    }
}

The effect is as follows, we basically restore the effect of the title map:

You can click here for the complete code and DEMO effect: CodePen Demo -- Pure CSS Variable Font Wave

Variable axis of font-variation -- registered axis and custom axis

Back to variable fonts themselves. The concept of variable axis is mentioned above. They are divided into registered axis and custom axis . The English is:

• Registered axes - registered axes
• Custom axes - custom axes

At the heart of the new format for variable fonts is the concept of a variable axis, which describes the allowable range of variation for a feature in a font design.

For example, the 'weight axis' describes the thickness of the font; the "width axis" describes the width of the font; the "italic axis" describes whether to use italic glyphs and can be toggled accordingly; and so on. Note that an axis can be either a range selection or a switch selection. Font weight might be between 1-999, while italics might just be a simple 0 or 1 (off or on).

As defined in the specification, there are two types of deformation axes, registered axes and custom axes:

• registration axis is the most common, and is often seen when the author of the specification felt that standardization was necessary. The five axes currently registered are weight, width, slant, italics and optical size.

In fact, the five registration axes have been listed above, and their use has been briefly introduced. To list again:

1. Word weight axis "wght": corresponds to font-weight , controls the thickness of the font
2. Width axis "wdth": corresponds to font-stretch , controls the expansion and contraction of the font
3. Slope axis "slnt" (slant): font-style: oblique + angle corresponding to the font, which controls the inclination of the font
4. Italic axis "ital": corresponds to font-style: italic of the font, which controls the inclination of the font (note that it is not the same inclination as font-style: oblique )
5. Optical size axis "opsz": corresponds to font-optical-sizing of the font, controls the optical size of the font

• Custom Axes is virtually limitless: font designers can define and delineate any axis they like, and just need to give it a four-letter label to identify it in the font file format itself.

Let's look at an example of custom axis :

<p>Grade</p>

p {
    font-family: "Amstelvar VF", serif;
    font-size: 64px;
    font-variation-settings: 'GRAD' 88;
}

The above font-family: "Amstelvar VF" is a variable font, and 'GRAD' belongs to one of the custom axes, meaning grade axis .

• Grade axis 'GRAD': The term 'GRAD' refers to the relative weight or density of a typeface design, but differs from traditional 'weight' in that the physical space occupied by the text does not change, so changing the text grade does not Changes the overall layout of the text or its surrounding elements. This makes level a useful axis of change, as it can change or animate without causing a reflow of the text itself.

There is a DEMO on MDN about changing the value of 'GRAD', corresponding to the font change, the effect is as follows:

It's worth noting that the custom axis can be any design variation axis the font designer imagines. There may be some that will gradually become quite common, and even evolve into registration axes as the specification evolves.

Where can I find variable fonts?

OK, if now I want to use variable fonts in my business to achieve an effect or animation, where can I find resources for variable fonts?

Here's a great site -- Variable Fonts .

A lot of Variable Fonts are collected above, and the range of font attributes they support on the registration axis is listed. For example, the supported font weight is from 100 to 700. We can freely debug and preview.

Can i Use（2022-02-20）

Are you able to start using variable fonts now?

Screenshot of Can i Use as of today:

The compatibility is already very good. If you don't consider the IE series, you can go to the actual production environment.

finally

There is currently very little introduction to CSS Font Variation. If you are very interested in it, here is a very good article worth perusing: Introduction to variable fonts on the web

This concludes this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdote 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which is continuously updated. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.