Browser Compatibility for Variable Fonts

Great typography is an essential part of modern web design and user experience. It influences mood, understanding, and meaning in countless ways. In many ways, typography is the user experience: It is the interface between the content and the viewer. Hence, for product designers and web developers, the tools they design uniquely affect how they work. 

• Traditional Font families are comprised of a number of styles ranging from different widths, such as Extended, Condensed, Ultra Condensed, Italics, etc; to different weights such as Light, Regular, Thin, Medium, etc.
• Each of these styles is an individual font file and needs to be downloaded and installed on a designer’s machine, or loaded independently by a website or a digital ad when used as a web font.
• Since there is a need to load a new font file for every style (or combinations of styles), many developers choose not to use these capabilities, reducing the reading experience of their users.

Variable fonts address these key challenges, by packing styles into a single file. 

What are Variable Fonts?

In simple words, variable Fonts or OpenType Font Variations can be defined as a Single font file that behaves like multiple fonts. In other words, the concept of Variable Fonts refers to a technology that enables the use of typography with several variations in one file. This allows the designers to use one font family that includes all the weights. 

Source

Advantages of Variable Fonts

• A single font file controls all axes. Hence, there is no need to copy each style separately.
• The test will render faster due to one single font file.
• The designer has much more control over the font due to the availability of more font options.

How do Variable Fonts work?

Variable Fonts have five registered types of axes that determine the variants. Axes, in variable font technology, can be considered as variables that are the most common parameters linking the different typefaces within a single typeface family, eg. Width, Weight, etc. Therefore, a variable font of the same family provides a continuous weight range, allowing for a nearly infinite number of instances to be used in one font file. This applies to all the other axes too.

Source

Following are the axes that control the known and predictable font features. These axes have 4 character lowercase tags that are used to set their values in CSS.

1. Weight

This axis determines the weight of the font. Weight defines the design axis of how thin (light) or thick (dark) the strokes of the letterforms can be.  The number ranges from 1 to 1000 depending on the different fonts. This gives the designer more options to choose from. 

CSS Value = wght

Syntaxes:

• font-weight:<weight> ;
• font-variation-settings: ‘wght’ <weight>;

An example for the typeface Roboto Flex is given below:

.roboto-flex {

font-family: “Roboto Flex”;

font-variation-settings: 'wght' 400; }

2. Width

This axis determines the width of the font. The width refers to how relatively narrow or wide a font is in relation to the normal design. The number ranges from 1 to 1000 depending on the different fonts and is expressed as a percentage. 

CSS Value = wdth

Syntaxes:

• font-stretch: <width>%;
• font-variation-settings: ‘wdth’ <width>;

An example for the typeface Roboto Flex is given below:

.roboto-flex {

font-family: “Roboto Flex”;

Font-stretch: 151%;  }

3. Italic

This axis controls if the font will be in Italic style or not i.e. it is meant to be an on/off switch: value 0 is off and will show the regular (upright) style, and value 1 will show the italics.

CSS Value = ital

Syntaxes:

• font-style: italic;
• font-variation-settings: ‘ital’ <switch value>; // 0 or 1

An example below:

.italic {

font-variation-settings: 'ital’ 1;  }

4. Slant

This axis controls the slant of the letters. It is often referred to as ‘oblique’. It changes the angle of the letterforms. By default, the value is 0. Any value between -90 to 90 is valid.

CSS Value = slnt

Syntaxes:

• font-style: oblique <degree>deg;
• font-variation-settings: ‘slnt’ <degree>;

An example for the typeface Roboto Flex is given below:

.roboto-flex {

font-style: “Roboto Flex”;

font-variation-settings: 'slnt’ 10;  }

5. Optical Size

This axis refers to the practice of varying the overall stroke thickness of letterforms based on physical size. If the size was very small (equivalent to 10 or 12px), the characters would have an overall thicker stroke, and perhaps other small modifications to ensure that they would be readable at a physically smaller size. Conversely, when a much larger size was being used (48 or 60px), there might be much greater variation in thick and thin stroke weights, showing the typeface design more in line with the original intent.

CSS Value = opsz

Syntaxes:

• font-optical-sizing: auto; // none or auto
  • font-variation-settings: ‘opsz’ <size>;

• font-size: <size>
  • font-variation-settings: ‘opsz’ <size>;

Below is letter ‘a’ in Roboto Flex at different pixel sizes, then scaled to be the same size, shows the differences in design:

Example:
The following CSS would cause text to be displayed at a large size, but at an optical size as if it were printed in 8px:

.small-and-large {

  font-size: 100px;

  font-variation-settings: 'opsz' 8; }

6. Using Custom axes

Custom axes are not mapped to the existing CSS property and are always set through font-variation-settings. Their tags are ALWAYS in UPPERCASE to distinguish them from registered axes. There are a variety of custom axes that can be used by designers. You can find them here. This section only focuses on GRAD.

7. GRAD

This axis changes the weight of the font without changing the widths, so line breaks do not change. They act as a sort of “equalizer”—a way of visually correcting a typeface across workflows, so it appears the same in every environment. It can also be handy for responding to low-resolution screens, where the type can easily become spindly.

CSS Value = GRAD

Syntax:

• font-size: <size>

font-variation-settings: ‘GRAD’ <number>;

Examples for the typeface Roboto Flex (range of -200 to 150) are given below:

.grade-light {

font-variation-settings: `GRAD` -200;  }

.grade-heavy {

font-variation-settings: `GRAD` 150; }

Browser Compatibility for Variable Fonts

Browser compatibility is essential for users to have a consistent experience as they operate across different browsers, devices, and platforms. The browser versions’ support for Variable Fonts can be analyzed using Caniuse.com  as shown below:

• It can be observed that Chrome, Edge, Safari, Opera, Chrome for Android, Safari on iOS, Opera Mobile, and Android Browser are fully compatible with Variable Fonts.
• As for Firefox 105-106, it is fully compatible only when the requirements – Require macOS 10.13 High Sierra or later or Windows 10 1709 “Fall Creators Update” or later – are fulfilled with the exception that it doesn’t support OpenType-CFF2 fonts.
• Samsung Internet 18.0, Firefox for Android, and QQ Browser also don’t support OpenType-CFF2 fonts.

Hence, it is recommended to perform diligent cross-browser compatibility tests on these browsers to identify bottlenecks and limited capabilities. These limitations can be overcome by tweaking code to match the overall user experience across browsers.

Try Cross Browser Testing for Free

Working with Old Browsers

In case you need to support older browsers, you can choose to build your site with static fonts, and use variable fonts as progressive enhancement.

Example of setting Roboto for Old Browser (regular, bold only) below:

@supports not (font-variation-settings: normal) {

  @font-face {

    font-family: Roboto;

    src: url('Roboto-Regular.woff2');

    font-weight: normal;

  }

  @font-face {

    font-family: Roboto;

    src: url('Roboto-Bold.woff2');

    font-weight: bold;

  }

  body {

    font-family: Roboto;

  }

  .super-bold {

    font-weight: bold;

  }

}

Working with Google Fonts

If you are using the Google Fonts API, it will take care of loading the proper fonts for your visitor’s browsers. 

Example: A request for Font Oswald in weight range 200 to 700 will look something like this:

<link href=”https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap” rel=”stylesheet”>

Conclusion

Variable fonts are here to stay – beyond providing a faster and more efficient format for the Web. The ability to change the width and style of texts without impacting the space they occupy is a feature that has considerate implications for interfaces. Not only has it made the life of designers and developers easier, but it also opened up new possibilities for accessible design.

To ensure that the web applications have consistent UX across different browsers and platforms, Cross Browser Testing on a real device cloud is essential. The tester could detect and highlight functionalities in the UX that are inconsistent with specific browser versions by performing cross-browser tests on real browsers and devices.