Tutorial #1: Using Variable Fonts on the Web

Since their comeback in 2016, variable fonts (VFs) have been rapidly adopted by major browsers, operating systems, and software. At Dinamo, we’ve been exploring the potential of this technology in a variety of ways—using internally developed tools via our Darkroom to stumble on new iterations of our own font designs, or teasing fonts-in-progress that slide from sans to san serif using a face filter.

We’ve found that the web is currently the best medium to experiment with the potential of VFs—both while designing them, but also when designing with them. Developers can make the position of a cursor—or even the weather in the Bahamas, or the wax and wane of a currency—affect the output of a variable font. Is it dark outside? Your font can swell to its most Bold weight. Is the stock market crashing? Your font can ricochet from Upright to Italic in a nervous feed-back loop.

Now is the time in our newly variable existence to begin efficiently and creatively utilizing this technology on the web. In this guide, we’ve documented how to implement—and exploit the potential of—VFs on the web using CSS and JavaScript.

What Are VFs?

A variable font is a special type of font file which contains multiple fonts within it. These internal fonts can either be accessed seamlessly along defined variations axes, or as predefined instances or states. The axes allow us to interpolate through a typeface’s design space, rather than being restricted to its defined poles. Essentially, this technology enables static fonts to become dynamic and shift their appearance.

The “Axes” of a VF

We like to think of a VF’s axis as the scenic road from one place to another… Berlin to Basel, for example. Before VFs, there were no stops in our road trip: we drove directly to our destination, no sightseeing allowed! With variable fonts, we can stop at any town or patch of grass along the way. Maybe we decide to stop and take a long break at a the gas station pizza parlor, for instance (before it gets taken over by Whole Foods).

The Advantages of Using VFs

VFs aren’t only fun and games. They also offer several practical and aesthetic advantages compared to traditional “static” font files. For example, VFs…

  • Are supported by all major browsers
  • Have a smaller download size compared to many static fonts
  • Consist of just one font file, containing all styles
  • Help address accessibility and readability issues via context-responsive type display settings
  • Allow for typographic forms of interactivity
  • Last but not least, with variable fonts, you can animate typography. See for yourself by streaming one of our variable fonts directly on this website, or using our Dinamo Pipeline, widely known as the “Netflix for Variable Fonts”

Loading the File

VFs can be served in the WOFF2, WOFF, and TTF file formats and are loaded like any other web fonts—with the @font-face declaration—except the format strings are a little different, as they specify that the loaded font contains “variations.”

@font-face {
  font-family: "Favorit Variable";
  src: url("/fonts/FavoritVariable.woff2") format("woff2-variations"),
       url("/fonts/FavoritVariable.woff") format("woff-variations"),
       url("/fonts/FavoritVariable.ttf") format("truetype-variations");
}

If you need to support older browsers that aren’t able to support VFs, specify a fallback font and it will be loaded if the VF can’t.

// Variable font
@font-face {
  font-family: "Favorit Variable";
  src: url("/fonts/ABCFavoritVariable.woff2") format("woff2-variations"),
       url("/fonts/ABCFavoritVariable.woff") format("woff-variations");
}

// Fallback static font
@font-face {
  font-family: "Favorit";
  font-weight: normal;
  src: url("/fonts/ABCFavorit-Regular.woff2") format("woff2"),
       url("/fonts/ABCFavorit-Regular.woff") format("woff");
}

body {
  font-family: "Favorit Variable", "Favorit", sans-serif;
}

Styling Variable Fonts

There are a few different ways to set the axes of variable text, depending on which axes you’re using. In general: use the CSS properties font-weight, font-stretch and font-variation-settings. Below we’ve covered how to use them.

While it’s preferable to use font-weight and font-stretch due to their greater support, using font-variation-settings is necessary for controlling axes besides weight and width.

Weight

The property font-weight corresponds to the weight of a font. We provide the range of the weight axis when defining our @font-face , which then allows us to use the font-weight property elsewhere.

@font-face {
  // ...
  font-weight: 300 700;
}

.my-variable-text {
  font-family: "Favorit Variable";
  font-weight: 550;
  // OR
  font-variation-settings: "wght" 550;
}
.favorit-wght { font-family: "Favorit Variable"; font-size: 7vw; color: black; user-select: none; cursor: pointer; font-variation-settings: "wght" var(--favorit-wght-range); }
Favorit

Width

The property font-stretch corresponds to the width of a font. As with font-weight, we need to provide the range of the width axis when defining our @font-face. Just remember to use the %!

@font-face {
  // ...
  font-stretch: 50% 150%;
}

.my-variable-text {
  font-family: "Favorit Variable";
  font-stretch: 80%;
  // OR
  font-variation-settings: "wdth" 80;
}
.favorit-wdth { font-family: "Favorit Variable wdth"; font-size: 7vw; color: black; user-select: none; cursor: pointer; font-variation-settings: "wght" 400, "wdth" var(--favorit-wdth-range); }
Favorit

Other Axes

To use font-variation-settings, you need to use the "slug" of the axes you’re defining. Each axis of is a four letter slug, which you can place between " followed by the axis’ value.

.my-variable-text {
  font-family: "Favorit Variable";
  font-variation-settings: "wght" 550, "ital" 6;
}
.favorit-all { font-family: "Favorit Variable"; font-size: 7vw; color: black; user-select: none; cursor: pointer; font-variation-settings: "wght" 400, "ital" 0; }
Favorit

If you don’t know the ranges or four letter slugs of the axes in a font, you can drop the font into fontgauntlet.com and check out its metadata. The Font Gauntlet is our web tool for animating and previewing variable fonts. It’s mainly used by type designers to proof their fonts, but also offers valuable information about variable fonts for web development.

User Interactions

Once you’re up and running, it’s dead easy to create interactive user-based VF effects. In the example below, we used the CSS :hover selector to dynamically shift the weight of our grotesque font Favorit when a user hovers over the big, blue pill-button.

Notice how we added the CSS transition rule with a transition defined for the font-variations-settings, which makes the hover effect buttery smooth.

.my-variable-text {
  font-family: "Favorit Variable";
  font-variation-settings: "wght" 300, "ital" 0;
  transition: font-variation-settings 0.3s ease;
}

.my-variable-text:hover {
  font-variation-settings: "wght" 700, "ital" 12;
}
.embed button.my-variable-text3 { font-family: "Favorit Variable"; font-variation-settings: "wght" 200, "ital" 0; transition: font-variation-settings 0.3s ease; font-size: 7vw; background-color: blue; color: white; letter-spacing: 0; border-radius: 6vw; padding: 1vw 3vw 1vw; outline: none; border: none; }.embed button.my-variable-text3:hover { font-variation-settings: "wght" 700, "ital" 12; }

Hover over the button!

Adjusting Based on Screen Properties

VFs can be utilized as a responsive design tool by making them react to screen size, orientation, or other readability factors.

Below, we adjusted the width of Favorit to help conserve space when the screen width is small. This is especially useful for headline text, which needs to fill space on desktop screens, while being preserved on mobile devices (to avoid nasty word breaks).

.my-text {
  font-family: "Favorit Variable";
  font-variation-settings: "wdth" 100;
}

.my-variable-text-01 {
  font-family: "Favorit Variable";
  font-stretch: 80%;
  // OR
  font-variation-settings: "wdth" 80;
}
.favorit-wdth-01 { font-family: "Favorit Variable wdth"; font-variation-settings: "wdth" 5; font-size: 4.5vw; color: black; user-select: none; cursor: pointer; }
Favorit Favorit Favorit
.favorit-wdth-02 { font-family: "Favorit Variable wdth"; font-variation-settings: "wdth" 6; font-size: 4.5vw; color: black; user-select: none; cursor: pointer; }
Favorit Favorit Favorit
.favorit-wdth-03 { font-family: "Favorit Variable wdth"; font-variation-settings: "wdth" 7; font-size: 4.5vw; color: black; user-select: none; cursor: pointer; }
Favorit Favorit Favorit

The world’s sudden (and somewhat crazed…) obsession with Dark Mode has re-ignited the need for using lighter-weight fonts on dark backgrounds (as white-on-black text appears bolder to the eye than black-on-white text). Using the new CSS media query prefers-color-scheme, you can adjust a VF’s axes depending on the user’s current color “scheme” or “mode.”

.my-text {
  font-family: "Favorit Variable";
  font-variation-settings: "wght" 400;
}

@media (prefers-color-scheme: dark) {
  .my-text {
    font-variation-settings: "wght" 300;
  }
}
.dark-mode-text { font-size: 5vw; color: black; font-family: "Favorit Variable"; font-variation-settings: "wght" 400; }.dark-mode-block { width: 100%; padding: 6vw; display: flex; align-items: center; justify-content: center; box-sizing: border-box; background-color: #f0f4f6; position: relative; }.dark-mode-block button { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
Favorit
Favorit

Setting the Axes with JavaScript

You can also set an element’s axis values using JavaScript, which opens up a magnitude of possibilities for interactivity and experimentation. The font-variation-settings, font-weight and font-stretch parameters are all editable—just make sure that your input values are formatted correctly to avoid trouble.

myText.style.fontVariationSettings = "\"wght\" 550, \"ital\" 6";
myText.style.fontWeight = 550
myText.style.fontStretch = "150%"

Below, we randomized the axes of our own Ginto so that it shifts every second, creating a wacky title effect.

function randomizeText() {
  randomWeight = Math.random() * (200 - 35) + 35;
  randomWidth = Math.random() * (200 - 100) + 100;
  myText.style.fontVariationSettings = "\"wght\" " + randomWeight + ", \"wdth\" " + randomWidth;
}

setInterval(randomizeText, 1000);
.ginto-switch { font-family: "Ginto Variable"; transition: font-variation-settings 0.3s ease; font-size: 10vw; color: black; user-select: none; cursor: pointer; font-variation-settings: "wght" 400, "wdth" 100; }
Ginto

And here, we use changed the font’s axes dependent on the user’s mouse position on the screen.

function updateText(e) {
  multiplierWidth = e.offsetX / window.innerWidth;
  multiplierHeight = e.offsetY / window.innerHeight;
  randomWeight =  multiplierWidth * (200 - 35) + 35;
  randomWidth =  multiplierHeight * (200 - 100) + 100;
  myText.style.fontVariationSettings = "\"wght\" " + randomWeight + ", \"wdth\" " + randomWidth;
}

window.addEventListener("mousemove", updateText)
.ginto-switch2 { font-family: "Ginto Variable"; font-size: 10vw; color: black; user-select: none; cursor: pointer; }.embed-bottom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }
Ginto

Move your mouse!

Animating with CSS Keyframes

The simplest way to animate variable fonts is with CSS @keyframes, which allows you to create simple and smooth animations. While these can’t be controlled as easily as Javascript animations, it works a treat for most situations.

@keyframes ginto-animation {
  from {
    font-variation-settings: "wght" 0, "ital" 0, "NORD" 100;
  }
  to {
    font-variation-settings: "wght" 200, "ital" 100, "NORD" 200;
  }
}

.my-variable-text {
  font-family: "Ginto Variable";
  transition: font-variation-settings 0.3s ease;
  animation-name: ginto-animation;
  animation-duration: 1.5s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

This creates simple and smooth animations.

@keyframes ginto-animation { from { font-variation-settings: "wght" 100, "ital" 0, "wdth" 100; } to { font-variation-settings: "wght" 900, "ital" 12, "wdth" 200; } }.ginto-animation { font-family: "Ginto Variable"; transition: font-variation-settings 0.3s ease; color: black; user-select: none; cursor: pointer; animation-name: ginto-animation; animation-duration: 1.5s; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-play-state: paused; font-size: 10vw; }
Ginto

Animating with JavaScript

JavaScript can be utilized to animate VFs in evolving and more complex ways than CSS. Any JS libraries containing animation engines can be used for this particular task, such as jQuery, anime.js, Velocity, and GSAP. Alternatively, our own library—the Dinamo Font Animator—has been written specifically for animating VFs. It comes with a variety of handy features relevant specifically for VF animations. Visit the GitHub page to download it and find out more.

Below is a simple example detailing how to use our Font Animator. Visit the GitHub page to download the library and find out more. NOTE: the GitHub link for the Font Animator is coming soon!

var fontAnimator = new FontAnimator(document.getElementById("text"), {
  playing: true,
  axes: [
    {
      name: "wght",
      min: 30,
      max: 200,
      speed: 1500
    }
  ]
});

Animation Performance Issues

You’ll soon find that animating variable fonts with either CSS keyframes or JavaScript can cause devices to run real hot and become slow or unresponsive, especially when the animations have been running for a while. This will hopefully be optimized in subsequent browser releases, but until then, you’ll just have to minimize browser repainting. We’ve found that using an IntersectionObserver works great, and allows us to stop the animations whenever the variable text is off-screen.

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

We actually used this technique on this very page, for all of the animations above!

@font-face { font-family: "Ginto Variable"; src: url("data:font/woff2;base64,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") format("woff2-variations"); }
@font-face { font-family: "Favorit Variable wdth"; font-stretch: 100% 200%; src: url("data:font/woff2;base64,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") format("woff2-variations"); }
@font-face { font-family: "Favorit Variable"; font-weight: 200 700; src: url("data:font/woff2;base64,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") format("woff2-variations"); }
.embed { background-color: #f0f4f6; padding: 10px; box-sizing: border-box; position: relative; }.embed.bleed { padding: 0; }.embed button { appearance: none; -webkit-appearance: none; outline: none; border: none; font-family: Monument Grotesk Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace; font-size: 12px; letter-spacing: 0.04em; padding: 4px 6px; background-color: #cecece; border-radius: 6px; color: black; text-align: center; user-select: none; }.embed button.value { background-color: #00e7ff; min-width: 38px; }.embed .range { margin: 10px; display: flex; flex-direction: row; align-items: center; }.embed .range > * { margin-right: 10px; }.embed input[type=range] { -webkit-appearance: none; background: transparent; max-width: 200px; width: 100%; }.embed input[type=range]:focus { outline: none; }.embed input[type=range]::-webkit-slider-runnable-track { -webkit-appearance: none; width: 100%; height: 1px; margin: 8px 0; background: black; }.embed input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -8px; background: red; border-radius: 50%; }