This content originally appeared on Level Up Coding - Medium and was authored by Daniel Movsesyan
Variable fonts were first introduced in 2016 by Apple and Google, and since then, it has been adopted by many other companies and software.
Variable fonts are a relatively new concept in the world of typography. They 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.
OpenType is a format for scalable computer fonts. It was built on its predecessor TrueType. The technology uses interpolation and extrapolation mechanisms that have been supported in font-development tools and used by font designers for many years. In that paradigm, the font designer creates a variable design but then chooses specific instances to generate static, non-variable fonts that get distributed to customers. With variable fonts, however, the font produced and distributed by the font designer can have built-in variability, and the interpolation mechanisms can now be built into operating systems and Web browsers or other applications, with specific design instances selected at the time of use.
This technology is a game-changer in the way designers work with type, and it is rapidly gaining popularity.
Advantages
The main advantage of variable fonts is that they allow for multiple variations of the same font to be stored in a single file. That file would be larger than a single font, but in most cases smaller or about the same size as the 4 you might load for the body copy.
This makes them much more efficient than traditional font files, which often come in separate files for different styles, weights, and widths.
For example, consider a popular font like “Open Sans.” With traditional fonts, you would need separate files for “Open Sans Regular” “Open Sans Bold” “Open Sans Italic” etc. With variable fonts, all of these styles can be stored in a single file, making it much easier to manage and use.
Another advantage of variable fonts is their versatility. With traditional fonts, you are limited to the styles and variations that the designer has created.
With variable fonts, you can create custom variations that suit your specific needs. For example, you can create a font that is wider or narrower than the original, or you can adjust the weight to make it bolder or lighter.
Using CSS font-style parameter to modify a non-variable font
You might notice that we have been talking about having a specific font file for every weight and style (i.e. bold and italic and bold italic), rather than relying upon the browser to synthesize them. The reason for this is that most typefaces have very specific designs for bolder weights and italics that often include completely different characters (lowercase ‘a’ and ‘g’s are often quite different in italics, for example). To most accurately reflect the typeface design and avoid differences between browsers and how they may or may not synthesize the different styles, it’s more accurate to load the specific font files where needed when using a non-variable font.
To reduce overall file size you can also meet variable fonts separated into two files (one for uprights and all their variations, and one containing the italic variations). This is a handy trick to reduce the file size if you don’t need italics.
Variable Font Axes
Variable fonts have a concept called the axis of variation describing the ranges of the properties of the font.
So the ‘weight axis’ describes how light or how bold the letterforms can be, the ‘width axis’ describes how narrow or how wide they can be,12 the ‘italic axis’ describes if italic letterforms are present and can be turned on or off accordingly, etc.
Note that an axis can be a range or a binary choice. Weight might range from 1–999, whereas italic might be 0 or 1 (off or on).
According to the specification, there are two types of axes: registered and custom.
Registered axes are those that are most frequently used and common and become standardized by the authors of the specification. There are 5 standardized registered axes: weight, width, italic, optical size, and slant. In CSS they named with four lowercase letters (‘wght’, ‘wdth’, ‘ital’, ‘opsz’, ‘slnt’).
Custom axes are those which were defined by the typeface designer and are limitless. To specify them in the font file format you need to use four uppercase letters.
Use cases
One of the most popular examples of variable fonts is “Inter” designed by Rasmus Andersson. Inter is a sans-serif typeface that offers a wide range of variations, from thin to black, and from condensed to extended. This font is used by many websites and apps, and it has become a popular choice for designers.
There is also Anicons: the world’s first animated color icon font, based on Material Design Icons. Anicons is an experiment that combines two cutting-edge font technologies: variable fonts and color fonts.
Here is a Recursive, five-axis variable font. This enables you to choose from a wide range of predefined styles, or dial in exactly what you want for each of its axes: Monospace, Casual, Weight, Slant, and Cursive.
The typeface comes in two practical and highly readable subfamilies, Sans and Mono. Thanks to its Monospace axis (‘MONO’), both of these subfamilies can be used in a single font file.
Monospace is designed to make characters easy to read and find in
hundreds of lines of code. On the other hand, serifs and sans serif fonts
are designed to be used to improve legibility in a large number of texts.
Recursive uses its ‘Casual’ axis (`CASL`) to offer a range of personality,
allowing you to get just the right tone for any context. Along this axis, letterforms adjust in stroke curvature, contrast, and terminals to go from a sturdy, rational ‘Linear’ to a friendly, energetic ‘Casual’.
At the time of writing this article here is how it browser compatibility chart of variable fonts looks like this.
In conclusion, variable fonts are a revolutionary concept in the world of typography. They offer advantages over traditional fonts, including efficiency, versatility, and customizability. If you are a designer, it is worth exploring this technology and incorporating it into your workflow.
With their many benefits, variable fonts are here to stay, and they are set to become an essential tool for designers everywhere.
Here are resources to read and experiment with variable fonts:
Varible Fonts introduction by Google Fonts
Beautiful font demonstrator by Etceteratype
Detailed web.dev article about variable fonts
Very useful font file exploration app
Variable fonts documentation by MDN
Unleashing the Power of Variable Fonts: The Future of Typography is Here was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Daniel Movsesyan
Daniel Movsesyan | Sciencx (2023-02-17T15:49:35+00:00) Unleashing the Power of Variable Fonts: The Future of Typography is Here. Retrieved from https://www.scien.cx/2023/02/17/unleashing-the-power-of-variable-fonts-the-future-of-typography-is-here/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.