Monday, January 25, 2021

How to Use Variable Fonts on the Web

Are you wondering, "What are variable fonts?" Variable fonts were developed as the joint effort of the four biggest tech companies involved in type design—Apple, Google, Microsoft, and Adobe. 

Jollin Family - Variable Font
Download this and all the best variable fonts from Envato Elements

As the name suggests, variable fonts allow designers to derive an unlimited number of font variants from the same font file. This way it becomes possible to adjust the typeface to different devices, viewports, orientations, and other design constraints.

Check out this video for a full explanation of what variable fonts are, and if you like it, make sure to subscribe to our Envato Tuts+ YouTube channel!

Top 3 Variable Fonts From Envato Elements

If you're looking for the best variable fonts, subscribe to Envato Elements for a low monthly fee, and you’ll have access to unlimited variable fonts, web fonts, and thousands of other graphic and web assets!

Note: with the exception of the last example, these fonts are available in the recommended .woff2 format (read on to learn more about formats). To make the conversion to .woff2 yourself, you can use a tool such as convertio.co or Google’s woff2.

1. Knicknack (OTF, WOFF)

Knicknack

How’s this for a characterful, squishy typeface? Check out the demo on v-fonts.com and grab it with your Elements subscription.

This OpenType variable font features two styles and at least five weights. It comes with a variable font size slider to control the weight of the font. 

2. Manufaktur (OTF, TTF, WOFF)

Manufaktur

Industrious, gritty, and powerful, Manufactur stands up for itself. This premium variable font is inspired by old cast iron signs. The modern MANUFAKTUR is now an OpenType variable font with thousands of combinations of width and weight. You can control the variable font size, width, and weight via a slider or with code.

MANUFAKTUR consists of:

  • 5 weights (Light, Medium, Bold, Extra Bold, and Black)
  • 3 widths (Normal, Expanded, and Ultra Expanded)
  • 3 styles (Normal, Italic, and Rough) 

3. Figuera Variable Fonts (OTF, TTF, WOFF)

Figuera Variable Fonts

Figuera is a detailed decorative typeface, with many variants which you can control to your liking. This variable font was inspired by a serif Victorian typeface style. You can create a custom variable font size, width, and weight in the available font files.

Why Use Variable Fonts

Variable fonts significantly reduce the limitations of current font formats. Today’s web fonts are inflexible and don’t scale very well; they only provide us with some fixed styles with names like “Light”, “Bold”, or “Extra Bold”. 

There are even typefaces that only have one weight or slant variant. With a variable approach, however, we have access to an infinite flexibility of weight, slant, x-height, slabs, rounding, and other typographical attributes.

Better still, they improve performance. Web fonts as we know them need each font variant to be stored in a separate file. For instance, this is how the folder of the Roboto web font looks:

Contents of Roboto web font folder
Contents of Roboto web font folder

Variable fonts use a single font file that the browser only has to load once. Upon being loaded, it can serve all the variants from just that one binary. 

So here's a brief comparison:

  • Roboto: twelve font files, twelve variants
  • Variable fonts: one font file, unlimited variants

As you can already imagine, our typographical options grow incredibly with this newer approach. From practical options through subtle, all the way to the more... experimental!

From OTF and TTF to WOFF Font Format

So what file format do variable fonts use? In their earliest days, they were created as part of the OpenType font format:

“OpenType fonts may have the extension .OTF or .TTF, depending on the kind of outlines in the font and the creator's desire for compatibility on systems without native OpenType support.” – Microsoft Docs

To be completely accurate, the power to include variations was introduced in version 1.8 of the OpenType font file specification. OpenType is an extension of the TrueType font format, so variable fonts were available as either .otf or .ttf files.

However, nowadays most variable fonts are packaged as WOFF2 fonts (WOFF2 being the recommended upgrade from WOFF). These are still OTF or TTF fonts but use a specific web-safe compression technique. WOFF was the result of collaborative work by the Mozilla Foundation, Microsoft, and Opera Software.

“WOFF files are OpenType or TrueType fonts, with format-specific compression applied and additional XML metadata added.” – Wikipedia

As we mentioned with the downloadable examples above, not all font packages include the .woff or .woff2 format.

“You might download a variable font in TTF format rather than as a pre-compressed file. You’ll definitely want to convert it into .woff2. Google offer a command line tool predictably named woff2 to make it easy.” – Ollie Williams

What Are Design Axes?

With these new specifications come font variations that allow us to interpolate the font along numerous design axes—up to 64,000, according to the Adobe Typekit Blog.

The OpenType 1.8 specification defines five registered axis tags:

  1. weight <wght>
  2. width <wdth>
  3. optical size <opsz>
  4. slant <slnt>
  5. italic <ital>

Moreover, type designers can also define custom axes along with their own four-character tags in the “name” table of the font file.

Below, you can see a great illustration of how design axes work (from John Hudson’s article on Medium.com, referred to by Typekit as the non-official announcement of variable fonts). It demonstrates a three-axis variable font with weight, width, and optical size axes:

Design axes of a variable font
John Hudson

The red glyph in the middle represents the set of outlines stored in the font, the green glyphs represent the extremes of the three axes, and the orange glyphs represent the corner positions. 

The whole cube represents the design space we have access to if we use this three-axis variable font. It’s a cube only because the font has three dimensions (weight, width, optical size). With fewer axes, we would move downwards towards a rectangle (2-axis) or a line (1-axis), and with more axes, we would move upwards into a multi-dimensional hyperspace. 

And of course, a real-life 3-axis variable font wouldn’t necessarily be a cube but more likely a rectangular cuboid, as the different axes in most cases don’t have the same length.

Named Instances

Variable fonts still allow type designers to define named instances—specific font variants among the unlimited number of options. For instance, Adobe’s Variable Font Prototype contains two axes (weight and contrast) and eight named instances (Extra Light, Light, Regular, Semibold, Bold, Black, Black Medium Contrast, Black High Contrast).

Named instances are more important if we want to use a variable font with design programs such as Adobe Illustrator. On the web, we can easily generate any instance (named or unnamed) with CSS (e.g. in the Adobe Variable Font, the Extra Light named instance takes the minimum value of both the weight and contrast axis). 

How to Add Variable Fonts to a Web Page

We can add these fonts to a website using the @font-face rule at the top of the CSS file.

For instance, we can add the FF Meta variable font with the following CSS rule:

@font-face {
  font-family: 'FF Meta VF';
  src: url('MetaVariableDemo-Set.woff2') format('woff2');
}

You can find more examples on the Axis Praxis website, on v-fonts.com, on the GitHub pages of different type design companies (e.g. Type Network), and Typekit has also started to publish the variable font versions of their most popular Adobe Originals families.

The FF Meta example above is developed further by Jason Pamental on CodePen.

FF Meta Variable Font Demo
FF Meta Variable Font Demo

Note: not every OpenType font you’ll find on the web is a variable font (they were introduced only with version 1.8).

How to Set Font Variations With CSS

To define font variations, we can use the font-variation-settings CSS property introduced with the CSS Font Module Level 4. This is a low-level property that allows us to control the output by specifying a value for each axis.

Example: Decovar

Decovar is one of the most versatile examples that currently exists. You can find it on Axis Praxis, on GitHub, and it also has a demo page on TypeNetwork’s website. Decovar contains one registered (weight) and 14 custom axes, and also has 17 named instances.

From Decovar’s GitHub docs, here are some variants we can achieve with this 15-axis variable font:

Decovar font variations

In the CSS we have to define all the fifteen axes (inline, sheared, rounded slab, stripes, worm terminal, inline skeleton, open inline terminal, inline terminal, worm, weight, flared, rounded, worm skeleton, slab, bifurcated).

div {
    font-family: Decovar;
    color: white;
    background-color: rgb(0, 162, 215);
    font-size: 157.12px;
    text-align: left;
    padding-top: 20px;
    font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594, 
        'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268, 
        'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0, 
        'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;
}

Note: we have to specify a value for all the axes in the font-variation-settings property—even those we don’t want to use. 

We can use any value (even float numbers) for the axes between the min and max values.

In the case of Decovar, we can use 0 as a value for the axes we are not interested in; these will be rendered with the default value. This isn’t always the case, though, as it depends on the ranges the font uses for the different axes. Decovar is easy, as it uses a 0–1000 range for all axes, and 0 is the default value for all.

The CSS above generates the following font variant:

Decovar custom font variant
Decovar custom font variant

Finding the Available Ranges

Where can you find the ranges, though? The font files contain the font variation (fvar) tables that hold the necessary data. However, to access that information, we need to view the contents of the font file with a tool such as FontView. Sometimes the documentation of the font contains the ranges, but unfortunately this is not always the case.

High-Level CSS Properties

The font-variation-settings property is a low-level property, and according to the W3C recommendations it should only be used if other methods are not available. What does this exactly mean?

According to the CSS 4 specifications, we will be able to control the registered axes with higher-level CSS properties in the future, namely:

  1. font-weight (will control the wght axis)
  2. font-stretch (will control the wdth axis)
  3. font-style (will control the slnt and ital axes)
  4. font-optical-sizing (will control the opsz axis)

The first three properties have existed since CSS2, but the CSS4 specifications expand their usage. We will be able to use them not only with predefined keywords (e.g. normal or bold for font-weight) or round numbers (e.g. 400, 600, 800, etc.), but also with all numbers on a predefined scale (for instance, font-weight will range between 1 and 1000, and font-stretch will range between 50% and 200%).

These features are still in the experimental phase, though. So for now, the reasonable thing is to keep using font-variation-settings, as currently this is the most stable property for accessing the axes of variable fonts.

Support

Variable fonts are still relatively new, but browser support is getting there already. And since the October 2017 release, Photoshop and Illustrator also support them.

Learn More About Variable Fonts

We can expect this new approach to bring incredible changes in the world of web typography. As it’s getting more and more support, it’s time to take a plunge into learning and experimenting. 

I hope you've enjoyed this tutorial on variable fonts and you discovered some good OpenType variable fonts to download. If you'd like to explore more, check out the following resources:

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)