Before starting it is important to know that the variable fonts are a new font format that offers a lot of flexibility in font style.
You know when you download a source from the internet there is always a font package (usually), for example, so Arial could have, Arial, Arial Black, Arial Regular and thousands of other files that you would need to import into CSS if you wanted to use. As variable fonts came to "end" this, they allow to contain multiple variations to a source in a single file, that’s right, in a single file. This allows the use of a web file that can access different font styles. Also variable fonts allow animating and transitions in font styles, which is not possible with static sources.
But anyway, now that we’ve got an idea of what it is and what the questions are for.
As Variable Fonts already have a good browser support? All
modern browsers accept the Variable Fonts?
Actually the support is not yet universal, but according to the Can I Use about 76% of browsers already support variable fonts, which is very good, but remember that this value is from the date of this reply and may be outdated, so refer to this link to see if the support increased.
What are the new CSS properties like wght and wdth that we can
use to work with these fonts?
wght: Controls the intensity of the source. The value is set with font-weight.
wdth: Controls the width of the font. For this we use the property font-stretch.
ital: Controls the intensity of italics. The value can be set with font-style.
opsz: Controls the optical font size. The property used is font-optical-sizing.
slnt: Controls the inclination of the source. The value can be set with font-style.
They offer a better performance by having several styles,
Condensed, Bold, Italic, all within one file without need
import multiple files type . otf for example?
Most web users want pages loaded quickly, and so does Google, who said that web pages should load in up to 2 seconds (see this article to learn more). Knowing this we are aware that the user experience is on with the loading time of a website. Soon sites that take time to allow interaction tend to have less access.
As variable fonts act in this sense, as you need a file are less data to load on the page and fewer requests, which leads to more loading speed.
But you may be wondering: but how can she upload everything together in a file?
What happens is that the variable fonts have one or more axes, each providing a variation between the different ends of a letter (bold, italic, ...). So we only need one file and not several.
They offer features and typographical treatments to improve
accessibility and user experience?
For the best user experience your source should be readable, enjoyable and accessible.
The readability of a text refers to how easy the characters are to distinguish one from the other, while the pleasantness refers to how easy it is to analyze and understand the text. Finally, accessible typography involves things like ensuring that a source has sufficient contrast to the background, which benefits visually impaired users.
And the variable fonts allow a control over all these pointed elements. What provides a greater accessibility and a pleasant user experience.
What’s the difference between a Normal Font and a Variable Fonts on the fly
of animation?
There is a big difference when performing an animation with a normal source and with a variable font. The "variable fonts" (literal translation) have, as already mentioned, a high flexibility, you can change the size, tilt and perform several changes in a practical way. I’ll put some links in the tips section with animation examples.
Tips:
References:
Why is it more performatic? If you are more flexible and "everything comes together", that is, you can not only load the styles of the font you want, the trend is something less performatic. What a miracle Variable Fonts do?
– Costamilam
So, you have a single file that contains all these variations (bold, italic, regular, among others). If you have worked with direct development of websites you know that we often need to import several files, for example, Roboto Light, Roboto Bold, Roboto Italic, among others to be able to apply the different types of specifications to the sources. Knowing this, at the time of loading the page would have to make several requests to the server, and this could cost time and data, as there are 3 files with different sizes. By using variable fonts you find this data.
– João Pedro Schmitz
This I think you understood, but what happens is that the variable fonts have one or more axes, where each one provides a variation between the different extremes of a letter (bold, italic, inclinations, everything...). You have a greater control over variations. That is the miracle of variable fonts. That’s why it only needs one file, which is usually lighter than loading multiple files to apply different styles to the same font.
– João Pedro Schmitz
It would be nice to comment on custom properties. In addition to the predefined axes, the author can place other arbitrary variations. All are defined by a 4-character identifier.
– Bacco
@Bacco that part of FONT FEATURES is very interesting! It has some types that give a very cool effect https://www.harbortype.com/rocher-color/ and other types to Dunbar that has some 20 font Features
– hugocsl
I am waiting for FF 63 (and a little free time) to test better :D
– Bacco