Not one week has passed from the You Gotta Love Frontend conference, but it’s not too late to go over several issues raised. I think it will be a series of articles on interesting topics for me, I hope, just like you. This post is a translation of articles on variable fonts, using which Lea Verou showed a number of tricks in the cycle of her speeches "CSS Secrets". Considering that this was the first time I heard about variable fonts, it’s too early to talk about tricks :)
Variable fonts are the future of web typography that offer a number of possibilities to control the display of text on screens (size, weight, style). And all this with a relatively small file size. It's time to say goodbye to endless debates on how many fonts you need to plug in and allow your content to live a new, beautiful life.
As an example, in the text (in the pictures) the Output Sans Variable is a variant font that can be configured in two axes (weight and bevel). The original article uses 18 different font styles, all in a single 57 KB font file. In fact, variable fonts are a new HYIP feature for every typography lover since the days of web fonts. By the end of the year, alternative fonts will be supported by all major browsers and in early 2019, we will use such fonts as an alternative to static fonts. do they work and what can you do with them?
Introduction
As part of my research, I found the simplest explanation for variable fonts. One variable font is stored in one file, but it can replace many different fonts stored in different files . Traditionally, under each weight (boldness) or style (italic, bold, light) of the font you need to load several corresponding fonts, files. With OpenType variable font file, you can generate many different font variations with any gradation (granular, for example weight = 100 or 101 and so on).
Variable fonts may have more axes. This example shows two axes - width and weight.
Small file size is achieved due to the fact that each character has only one contour. The points that form the contour, have a number of instructions that determine their behavior and the formation of a particular style. Interpolation occurs dynamically right in the browser. In September 2016, OpenType Font Variations were publicly announced and jointly developed by Adobe, Apple, Google, and Microsoft. Obviously, such cooperation gave the variable fonts a kind of impetus for fast implementation.
Opportunities
It always depends on the font. Designers have access to certain axes for font manipulation. At the moment there are 5 reserved axes that can be dynamically changed: wdth - width, wght - weight, ital - italic, slnt - bevel, opsz - optical size.
Most fonts provide axes of weight and width; they seem to be the most popular. But there can also be any custom axes. For example serifs (serifs) or properties of the lower and upper case.
Do we really need so many different styles?
Let's stop and ask ourselves why we need different font styles? Typography gives words meaning through design, which means a good typography can support content, a bad (or inappropriate) typography can spoil. Text can be formatted with different styles of the same font. For example, bold text, highlights something important . And something important will not stand out if the font is monotonous and everything looks the same. Of course, you can, for example, use color, but this is a completely different story. Gifted designers love GREAT AND BOLDY TEXT in red on billboards.
Of course, different styles also apply to headings, quotes, and other artifacts in the text, not just words.
An example of using custom axes:
How to use variable fonts?
Find an available variable font.
This technology is quite new, so before you start using variable fonts, you must first find them :) A great place to look is v-fonts.com . Here you can find a bunch of different font types, play around with them and download. Also a list of fonts can be found here.
Integrate fonts into your styles.
Browser support is already pretty good, about 65%. All recent browsers support variable fonts in principle. Firefox supports over flag.
The integration of the variable font is generally very simple. You do this using '@ font-face'
@font-face { font-family: 'Venn'; src: url('Venn.woff2') format('woff2-variations'), url('Venn.woff2') format('woff2'); }
Find out which axis supports the font.
Each font can have its own set of supported axes. If you do not know the capabilities of your font, you can use the wonderful tool from Roel Nieskens. Just drag your font there. There you can copy the generated CSS style for the font and use it in your project.
Stylization of variable font
font-weight - weight, only takes from 1 to 999.font-stretch - stretching, takes a percentage. 100% defaulted, 50% compressed, 200% strongly stretched. The name is not very obvious, because in fact it is the width.font-style - style, takes a slope, from -90 to 90. Also the font-style: italic will still work. By the way, most fonts tend to implement a slope of up to 8 degrees.font-optical-sizing is a new property that accepts auto or none . By default, browsers will set the property to auto .
Not all fonts will support these properties, and not all browsers support them at the moment.
You can also change low-level properties using font-variation-settings , for example:
p { font-family: "Venn"; font-variation-settings: "wght" 550, "wdth" 125; }
You can achieve the same effect with:
p { font-family: "Venn"; font-weight: 550; font-stretch: 125%; }
And of course the font can support any custom properties, access to which you will have through the same font-variation-* :
h1 { font-family: 'Decovar Alpha VF', sans-serif; font-variation-settings: "TRMC" 0, "SKLA" 0, "SKLB" 0, "TRME" 0; }
Useful links:
P.C. I haven't been involved in translation for a long time, I think this is a matter of practice. If you notice any shoals or inaccuracies, write to me in the LAN. Comments leave, for commenting
upd: Thanks @ gt8on, corrected a couple of references
upd: Thanks to MissisRol , corrected the translation :)