LambdaTest Community

Find answers, support, and inspiration from other users

LambdaTest Community

What are Variable fonts? How do variable fonts work?

Can anyone give me some information on what are variable fonts and how do variable fonts work.

Up Vote Down Vote 0 Votes
Posted 4 months ago


What Are Variable Fonts?

A Variable font comprises of an entire typeface or commonly known as font family in a single font file instead of having separate font files for every font style variation. By the help of CSS @font-face and style rules, thousands of different font weight, width and style permutations can be created. Moreover, unlike static fonts, variable fonts supports CSS transition and animation properties that help to achieve smooth and fluid shifting 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?

You must note that although the size of a variable font file is slightly larger compared to the traditional static font file, on a 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 it came into inception, this feature was part of ‘OpenType’ font format version 1.8 specification released in 2016-17 by the collaboration of one of the biggest giants in design and web space – Microsoft, Apple Google, and Adobe. OpenType format is an extension of TrueType format, therefore has “.otf” or “.ttf” extension.

How Do Variable Fonts Work?

The key notion behind Variable fonts is the concept of “Axes of Variations”. 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 2 kinds of Axis of variations –

  • Standard Axes of variation
  • Custom Axes of Variation.

Standard Axes of Variation

OpenType specs defines 5 standard Axes of variations, each represented by a 4 character long tags tags comprised of small 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 4 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 2 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

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 Modeule Level 4 recently. 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 below –

.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 the methods while Custom Axis of variations can only be set using the second method. Differences between the 2 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.

Up Vote Down Vote 0 Votes
Posted 3 months ago