Variable fonts are a very exciting and powerful new addition to the toolbox of web design. A lot of the demonstrations of the power of variable fonts are showing how it can be used to make letter-by-letter adjustments. So in this post we`ve collected 25 CSS Variable Fonts Tutorials, Tools & Demos to help you get started with variable fonts.

• Tutorials

Variable fonts guide

Variable fonts are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. They let you access all the variations contained in a given font file via CSS and a single @font-face reference. This article will give you all you need to know to get you started using variable fonts.

How to start with variable fonts on the web

Variable fonts are the font technology made for the digital era. They have the power to bring more typographic richness to the web at a lower file size. But with new possibilities and advantages new challenges and complexity arise. So what’s so hot about the next big thing since the introduction of web fonts (at least to all type nerds) and how can you use it?

Implementing a variable font with fallback web fonts

With variable fonts, more typographic richness and influence is coming to the web and this at a relatively low file size. You want to benefit from that in your next web project, but still, you don’t want to bet everything on this new technique? This article will show you how to integrate a variable font in your website and use classic web fonts as a fallback.

User Interfaces for Variable Fonts

The tools we design with have a unique effect on the way we work, constraining and empowering us while we explore, examine and create. Variable fonts give us a new, wide open typographic space with which to work. Instead of prescribing value to individual UI elements in a vacuum, we should take a hybrid and calculated approach to variable font interfaces. How do we structure our design tools to adapt to the new advantages variable fonts provide us with?

One File, Many Options: Using Variable Fonts on the Web

Font weights can be far more than just bold and normal—most professionally designed typefaces are available in variants ranging from a thin hairline ultralight to a black extra-heavy bold. To make use of all those weights, we would need a separate file for each. While a design is unlikely to need every font-weight, a wider variety than bold and normal adds visual hierarchy and interest to a page.

How to use variable fonts in the real world

Getting your variable fonts working in a basic fashion is fairly straight forward. At the time of writing Safari and Chrome have the most complete support. If you’re following along with these steps, you’ll need one of those browsers to start off with.

Finding the axes of a variable font

OpenType defines five axis tags that are standard across variable fonts. Variable fonts may support all or none of these, and font designers can choose to define and expose more. That’s where it becomes tricky.

Creating a Variable Font

This tutorial covers a workflow for app version 2.5. Keep in mind that, while Glyphs can export working Variable Fonts, the implementation is currently in beta.

I Can Variable Font

Notes and tips for generating a simple variable font on a Mac. These assume you’re already familiar with the UFO format, creating masters that can be interpolated, and have some comfort using Terminal.

Amstelvar Font Breakdown

Amstelvar also contains a “Width” axis, that reduces the transparent (white) shapes and spaces of the letters only, leaving the opaque (black) to the variations of the weight axis alone. Between these two, what I call “single parametric axes,” the “normal” weights and widths of a font family are found, along with the grades, which are different weights on the same metrics. This is currently a single-pole axis, i.e. from the default font, it only gets narrower.

• Tools

Font Playground

The most fun place to experiment with layouts using variable fonts, and export front-end code right from this little web app.

Variable Fonts

A simple resource for finding and trying variable fonts.

Axis-Praxis

Discover 30+ variable fonts. Experiment with the typographic controls in the right panel on this default layout, or choose a typeface specimen from the left column. Every textbox is fully editable: change font, font size, alignment, line-spacing as well as the variation sliders. And type your own text, of course.

variableFont.js

JavaScript library for using variable fonts. Extends the functionality of opentype.js. You must also install opentype.js to use this library.

A GlyphsApp plugin

Variable Fonts are the next big thing in (web) typography. So next and so big, that their potential isn’t even fully discovered by designers. What is clear already is that they bring incredible new opportunities do design and web experiences. Along with those new chances come challenges for the type designers who create v-Fonts.

Font Dimensions

A tool to visualize dimensions of a variable font. Tested to work for variable fonts with less than 8 axes in the latest Chrome and Safari browsers.

The Font Gauntlet

It is a nice tool for testing #variablefonts, and it now it includes a feature to generate static font instances from a variable font

• Demos

Variable Fonts

OpenType Font Variations make it possible to access multiple typefaces within a family from a single resource. Take an expedition into the typographical variety available via variable fonts.

Animated Horse Using Variable Font

Here’s the HTML + CSS for the animated horse, taking 388 bytes. The font file in WOFF2 format is 3,960 bytes.

Decovar

It is a modular parametric display font with a variety of skeletons and terminals designed by David Berlow for Google.

Still I Rise

A test for variable fonts using the poem Still I Rise by Maya Angelou.

Pappardelle Party

It is a variable color font with contextual alternates.

Foreday

Is is a font where you can change it’s serifyness

Fit Variable Font

It is also a great example of how variablefonts can work on the web.

Next

Abstract editable CSS text effect with variable fonts.