Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Variable Fonts vs. Static Fonts and Cross-Browser Compatibility, Part 1

DZone 's Guide to

Variable Fonts vs. Static Fonts and Cross-Browser Compatibility, Part 1

A discussion of the importance of fonts in web design and development, how using them wrong can lead to poor application performance.

· Web Dev Zone ·
Free Resource

Variable Fonts have unleashed a whole new world of creative possibilities along with enhancing website’s readability, accessibility, performance, flexibility, and responsiveness. Developers no longer need to rely on standard static fonts bound with fixed design limitations, but, rather, can embrace variable fonts to unlock thousands of typographic variations along with font animations to create unique custom font styles.

Variable fonts are part of the ‘OpenType’ specification originally developed as a joint collaborative project between the four giants – Apple, Microsoft, Adobe, and Google. The key concept behind variable fonts is to utilize unlimited font style variations of a specific typeface by relying on just a single font file. This allows a developer to fully utilize the potential of RWD (responsive web design) by modifying or animating the typeface based on a device'c viewport, type, orientation, mouse events, etc. On the contrary, standard static font requires separate font files for each font style, resulting in dreadful site performance.

In this two-part article, we will explore what variable fonts are, their advantages over static fonts, how to use them in your web pages and how to add necessary static font fallbacks for unsupported browsers.

Problems With Traditional Static Fonts

Before diving deeper into variable fonts, here is a small example that explores the limitations and problems that you would encounter while using traditional static fonts. Let’s say, for your next web project, you need to select two static font typefaces – ‘Roboto’ for headings and ‘Open sans’ for paragraph texts. You are essentially selecting a ‘font-family.’ A font family, in turn, comprises of various ‘font-styles’ – variations based on different font weight and italics.

In our example, let’s assume you require the following font style variations:

  • ‘light 300’
  • ‘regular 400’
  • ‘semi bold 600’
  • ‘bold 700’
  • ‘regular 400 italic’

You would need to download separate files for each of the font styles (or use a Google Fonts embed link), for both the typefaces – ‘Roboto’ and ‘Open Sans.’ As you can see in the image below, Google Fonts will display a warning alert, indicating a poor load time for our test case needs. This will in turn adversely affect your website’s performance. The load time indicator will keep dropping from fast to moderate to slow as we keep adding different font styles. Slower load times result low ranking on Google SERPs (Search Engine Result Pages). 

Although ‘Roboto Medium’ and ‘Roboto Bold’ are very similar and belong to the same font family, each one of them has its own independent font file.

Google Fonts

Google Fonts – ‘Roboto’ and ‘Open sans’ font styles selected

As per our example case for ‘Roboto’ and ‘Open Sans,’ you would end up needing 22 files with the combined size of approximately 3MB! These font files are downloaded by every visitor’s browser upon visiting your website to accurately display the text with the intended font face. This causes a surge in website load time and creates a frustrating user experience for any visitor, especially on a slower mobile connection.

Static font files - ‘roboto’ and ‘open sans’

Static font files – ‘roboto’ and ‘open sans’

CSS stylesheets, JavaScript files, plugins, images, videos, analytics trackers, and other dependencies contribute to the size of the website which is directly proportional to the loading speed. A website’s loading speed is arguably the biggest performance factor for SEO (Search Engine Optimisation) and user experience. Therefore, developers, in their quest to optimize their websites, come to a compromise on the visual appearance in favor of better performance and usually restrict themselves to a couple of font faces and not more than 3-4 font styles, as each additional font file is a burden on the page's performance.

Traditional static fonts have zero flexibility and are bound with a limited number of fixed font styles like ‘light’‘regular’‘regular-italic’‘semi-bold’‘bold’‘extra-bold’. For example, ‘open sans’ font family has just 10 styles compared to ‘Roboto’s’ 12. Some font families like ‘Lobster’ and ‘Abril Fatface’ have just a single font style available. This is where variable font comes to your rescue, unlocking the possibility for developers to use thousands of font style variations from a single file without compromising on performance.

What Are Variable Fonts?

A variable font comprises of an entire typeface, commonly known as font family, in a single font file instead of having separate font files for every font style variation. With the help of the CSS @font-face decorator and style rules, thousands of different font weights, widths, and style permutations can be created. Moreover, unlike static fonts, variable fonts supports CSS transition and animation properties that help to achieve smooth animations between various font styles. Variable fonts also offer the ability to create a custom font style. This is quite useful for creating unique branding and logo designs that can set your designs apart from the rest. Are you aware of the top 17 UI Design mistakes that lead to failure of your website?

Comparison between Static Font and Variable Font

You must note that although the size of a variable font file is slightly larger compared to the traditional static font file, on the whole, a variable font offers much better efficiency. Taking into consideration that, on an average, you would require at least 4 to 5 font style variations for each font family, a single variable font file size is significantly smaller than the combined size of 4-5 static font files.

As far as the history of variable fonts are concerned, and how they came to be, this feature was part of the ‘OpenType’ font format version 1.8 specification released in 2016-17. The OpenType format is an extension of the TrueType format, therefore has “.otf” or “.ttf” extension.

How Do Variable Fonts Work?

The key idea behind variable fonts is the concept of “Axes of Variation.” These axes control all the aspects of the font style – how bold or light the font letters are, how wide or narrow the letters are, or whether the letters are italic or not. OpenType font specifications define two kinds of axes of variation:

  1. Standard Axes of variation
  2. Custom Axes of Variation.

Standard Axes of Variation

OpenType specs define five standard Axes of variation, each represented by a four character long tag, comprised of lower-case letters.

  • Weight “wgth” Axis: Controls the variable font’s weight. The value can vary from 1 to 999. The value is controlled using the font-weight CSS property.
  • Width “wdth ” Axis: Controls the variable font’s width. The value is in % and can usually vary from 0% to 100% (or higher). Higher values like for example 120% or 150% will be adjusted to the highest permitted value as defined by the font. The value is controlled using the font-stretch CSS property.
  • Slant “slnt” Axis: Controls the variable font’s slant. The value is in deg and can vary from -90deg to 90deg. By default set to 20 deg. The value is controlled using the font-style CSS property set to oblique.
  • Italics “ital” Axis: controls whether the variable font is italics or not. The value is controlled using the font-style CSS property set to ‘italic’ or ‘none.’ In order to avoid confusion with the slnt axis, set font-synthesis: none;. 
  • Optical-Sizing “opsz ” Axis: controls the variable font’s optical sizing. The value is controlled using the font-optical-sizing property CSS property set to either ‘auto’ or ‘none.’ Optical Sizing comes into play if you wish to increase or decrease the overall stroke thickness of letters based on the overall font size.

Apart from defining the values of the standard axis of variations using font-weight, font-style, font-stretch, and font-optical sizing properties, there is another way that we will discuss in a moment.

Custom Axes of Variation

OpenType Spec allows you to define as many custom axis of variation as you like. The one key difference to remember is that unlike Standard axes of variations which are defined by using four characters long tags of small letters, the Custom axis of variations is defined by using Capital letters.

For example, a variable font called ‘Decovar’ has a custom axis of variations:

  • SKLA: Inline Skeleton
  • BLDA: Inline
  • TRMA: Rounded
  • SKLD: Stripes

As discussed above there are two ways of defining values for axes of variations at your disposal for implementing variable fonts:

1. Using CSS properties associated with each axis – font-weight, font-stretch, font-style and font-optical-sizing properties.

heading {
  font-weight: 650;
  font-style: oblique 80deg;
  font-stretch: 75%;
  font-optical-sizing: auto;
}

2. Using “font-variation-settings” property. The second way to define font variation axes for implementing variable fonts is by using a new property called “font-variation-settings” introduced by W3C as part of CSS Font Module.

Syntax for the new property is:
font-variation-settings:‘wgth’ <value>, ‘wdth’ <value>, ‘ital’ <value>, ‘slnt’ <value>, ‘opsz’ <value>, ‘PROP’ <value>,…… ;
Here is an example:

.heading {
/*
  font-weight: 650;
  font-style: oblique 80deg;
  font-stretch: 65%;
  font-optical-sizing: auto;
*/
  font-variation-settings: "wght" 650, “slnt” 80, "wdth" 65, "opsz" 70;
}

Note: Standard/Registered Axes of variations can be defined using both of the above methods, while Custom Axis of variations can only be set using the second method.

Differences between the two methods:

  • Values for ‘font-optical-sizing’ is ‘auto’ or ‘none.’ This property can only be used to turn off or turn on optical-sizing. However if you are using the second method – ‘font-variation-settings’ — you can add a numerical value. For example:
font-optical-sizing: auto;
font-variation-settings: "opsz" 70;
  • You do not need to add a % symbol when setting the value of ‘font-stretch’ when using ‘font-variation-settings’. For example:
font-stretch: 65%;
font-variation-settings: "wdth" 65;
  • Value for ‘font-style’ italics is either ‘none’ or ‘italic’. However, if you are using ‘font-variation-settings’ property, the value can be either ‘0’ or ‘1’. For example:
font-style: italic;
font-variation-settings: "ital" 1;
  • You do not need to add a deg symbol when setting the value of ‘font-style’ slant when using ‘font-variation-settings’. For example –
font-style: oblique 80deg;
font-variation-settings: "slnt" 80;

Both methods will result in the same output. However, as per W3C recommendations, it is advised to use the first method – font-weight, font-stretch, font-style, and font-optical-sizing properties over the second method, “font-variation-settings,” for controlling values of the five standard axes of variations. This helps browsers to comprehend and have an insight into the meaning of all the font variations and apply it to other formats as well. However, as discussed above, for controlling custom axes of variations, font-variation-settings property is necessary.

That's all for Part 1. In Part 2, we'll cover how to ensure the cross-browser compatibility of your fonts. 

Topics:
ux and ui ,css ,web dev ,front-end development ,web design

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}