The original link

Variable Fonts (vf for short below) are font technologies created in the digital age to provide richer typography on the Web with smaller file sizes, but a new technology often comes with new challenges and complex and unknown situations. But we have to embrace technology, so how do we use it?

Let’s learn about variable fonts from the following questions.

  • What are variable fonts?
  • What can variable Fonts do
  • Does stretching or twisting the alphabet have bad effects?
  • What are the advantages of variable Fonts?
  • How to use Variable Fonts on the Web?
  • What are the potential pitfalls to watch out for?
  • When will variable fonts become relatively mature?

What are variable fonts?

Some people interpret it as a single font file with multiple font formats. Traditionally, different font formats such as italics, thickness, and stretch were stored in separate files, but now you can store multiple font formats in a single openType variable font file, which makes the VF file relatively smaller.

Multiple static font files can be stored in a SINGLE VF file

Because there is only one typesetting outline point, the file size is small. These dots determine the direct expression of the text. Changing the position of the outline points means the ability to change the appearance of text dynamically in the browser. This makes it possible to convert between half-bold and bold. It goes down like this:

In the case of vf font modification, the number of these ‘outline points’ has not changed, only the position has changed

Changes can be made to very small values on various axes (abstracting a modifiable range as an (x) axis, or X-axis), such as the weight axis. Small changes can make a big difference in style, as there are other values that can be specified between regular and font-weight: 700.

A VF font can have many similar axes, such as the addition of a height axis, to extend the style of the font. You can also think of it as an x and Y axis, where the x axis is 50 and the Y axis is 500, and you get 25,000 different font styles, and the file size is pretty good.

All kinds of fonts

What can variable Fonts do?

This depends on the font design, which provides a variety of axes that can be modified, such as thickness, length, and any reasonable range. Five commonly used retention axes are provided below:

  • WDTH: Used to modify the width of the word
  • WGHT: Used to change the weight of words
  • Ital: oblique or not. 0 is non-oblique and 1 is italic
  • SLNT: Used to modify the slant of a word
  • Opsz: Modification of glyphs (to be confirmed)

Although width and thickness are the more common modifiers, there are some custom shafts, such as serif (serif is an extra decoration at the beginning and end of the stroke of a word).

Is the animation generated by changing ‘axis’ cool?

Does stretching or twisting the alphabet have bad effects?

When vf fonts change width, thickness or other dimensions, it will not cause bad effects. But if you change transform: scaleX(0.5), it will have a bad effect because it directly changes the font design, and designers will hit people.

Why is stretching or distorting fonts such a big problem? Because typeface designers put a lot of effort into the coordination of each character, such fonts are in line with normal aesthetics. A hasty stretching or twisting of a character can ruin a designer’s work. Even minor changes can affect the overall look and feel of the font.

If you look closely at the letter O in the picture above, the letter O below is out of blue, while the letter O above remains fine. Ridicule, I did not feel what aesthetic loss

What are the advantages of variable Fonts?

The most obvious advantage, as you might expect, is the abundance of custom Web fonts

Web developers can use different styles of fonts to highlight the interest and importance of certain parts, and websites can handle more typography in the way of editorial design, providing richer visual presentation and personalized solutions. I created a test site where I limited the color style, in other words, I only used about 4 medium colors to give the site a layered feel, and then used about 18 medium fonts to enrich the site. In my opinion, this is more brief and unique than reducing the style. You can click the button in the lower right corner to switch between different font themes for different experiences.

A test site that uses font transformations to change the style of the site

Smaller file sizes

Vf fonts bring more styles of choice with smaller files. For example, if you want to use three or four fonts of different thicknesses, you can use VF fonts to reap the benefits of smaller file sizes. Suddeutsche Zeitung Magazin, for example, uses a font size of 236KB, with four fonts of different thicknessadding up to 166KB. Switching to VF fonts reduces font size to 80KB, a 50 percent reduction.

If you use VF fonts, you can save at least half the bandwidth

Control of fine particle size

Vf fonts provide fine granularity control over how fonts are rendered. You can set font-weight:430 to provide a better effect. Because this is optional, methods like font-weight:bold still work

Better text adaptation

If VF fonts provide wide and narrow axis manipulation capabilities, you can make text more readable on mobile devices. You can also make better use of space on a wider screen. This example clearly shows this effect: browser example

Combine with animation

All axes can be animated using CSS to create a transition. This will give your site a cool and vibrant look. On the Microsoft Sample page, you can scroll to see impressive animations.

A writing that places more emphasis on visual beauty

This concept comes from printing technology, which generally refers to being more readable in small type and more personal in large type. During the metal-type era (movable-type printing using metal as a carrier), optimizations could only be made with modified text sizes. Later, with digital technology, you could design a font that would fit all sizes. Now the same situation has been solved with the advent of VF fonts. For example, strokes can be a bit thicker with small font size, which means lower contrast for better readability. On the other hand, when you have a larger size, you have more space, so you have more maneuverability, and contrast. Similar changes in VF fonts can occur gradually in a single file.

How to use Variable Fonts on the Web?

  1. The technique of finding available VF fonts is still very active, so if you want to use it, you need to find relevant resources first. There is a resource for you to use, where you can try out many VF fonts, many of which are open source on Github and can be downloaded directly. There are some great resources as well

  2. Integrating stylesheets into your website in the first half of 2018 is already well supported by more than average browsers.

    Introduced to the page via @font-face:

    @font-face {
    font-family: 'VennVF';
    src: url('VennVF_W.woff2') format('woff2-variations'),
        url('VennVF_W.woff2') format('woff2');
}
Copy the code

    Find the variable axis and variable range of fonts, depending on the design of different VF has different axis and different range, if you do not know what vf fonts can do, you can use an online tool, it can also help you generate ready-made CSS. We will then move on to CSS development, but before that, we will mention the advanced properties of vf fonts that will be added to the CSS4 font module:

    • font-weight: The value ranges from 1 to 999
    • font-stretch: is a percentage value, 100% is normal, 50% is compressed, and 200% is stretched. Its corresponding keywords should be usable, which is terrible for printing, because it cannot stretch the font, stretching the font will lead to bad results, but the change of VF is a stretch within the scope involved, which is acceptable.
    • font-style: a slanted attribute, ranging from -90deg to 90deg, of course keywords can also be used. While 90deg May seem odd, 8deg is the maximum used in most fonts.
    • font-optical-sizing: This is a new property with two optional propertiesautoandnone. Typically, browsers will set it to Auto, but you can also set it to None

    Not all VF fonts can control the above properties, depending on the font design and available range. I did some testing, Safari supports font-weight and font-stretch, and it automatically turns on optical sizing if optical is available. But the result of using FONT-style: italic is that there is no vf font to update the ITALic axis range.

    Only on Sarari are these advanced properties compatible. So, if you want stability, you need to use a lower-level property: font- varia-settings, you can set it in four parts, which is pretty much the same as above.

    p {
	font-family: "VennVF";
	font-variation-settings: "wght" 550."wdth" 125;
}
Copy the code

    This code changes the font thickness to 550 and width to 125. In the near future, you might be able to use advanced properties to get the same effect:

    p {
	font-family: "VennVF";
	font-weight: 550;
	font-stretch: 125%;
}
Copy the code

    Of course, there are more customization axes available for VF fonts, all of which can be set using the font- varia-setting property:

    h1 {
	font-family: 'VennVF', sans-serif;
	font-variation-settings: "TRMC" 0."SKLA" 0."SKLB" 0."TRME" 0;
}
Copy the code

    It looks something like this:

  3. Compatible with browsers that do not support VF fonts

    If you want to use vf fonts now, on the unsupported version, the website style will be completely different from what you expect, so we need a fallback solution, which takes advantage of the CSS feature query function:

    @supports (font-variation-settings: normar){
	/* set some property */
}
Copy the code

    Click on @supports to see compatibility between browsers. I think compatibility is ok. Then, set vf as follows to work with most browsers:

    body {
	font-family: 'Venn', sans-serif;
}

@supports (font-variation-settings: normal) {
	body {
		font-family: 'VennVF', sans-serif; }}Copy the code

    If you support FONT – varia-Settings, use vf font. Then you can set some specific font details. Otherwise it will silently fail. @supports may be matched with :not. In some cases, the match will succeed not because of not, but because @supports is not supported. Avoid this.

What are the potential pitfalls to watch out for?

Vf fonts bring new vitality and gray controls to web fonts, but a new technology often comes with a lot of problems we need to pay attention to.

  • Too many options
  • More web-unrelated fonts just need to be learned
  • Vf fonts do not always improve performance
  • You may still need multiple font files to fit certain fonts, such as Roman and italic
  • Other problems may arise due to copyright and licensing

When will variable fonts become relatively mature?

It will be supported in most browsers in 2018 and will soon be supported on mobile devices as VF will save a lot of bandwidth. I expect VF fonts to replace static fonts in every Web site in 2019. Adobe and Google will certainly play a major part in pushing this technology, as they will also need to reduce font file sizes, although it is not known when this will happen. But it will be fast. I’m not too interested in file sizes, I’m more interested in using fewer color themes and more fonts to style sites like this one.

Refer to the link
  • Better scheme to use VF fonts
  • Vf font details
  • Variable font
  • Font history