Variable Fonts - OpenType Font Variations

Question 1

What are variable fonts?

Answer 1

Variable fonts—or, more specifically, OpenType Font Variations—are a relatively new font format introduced in 2016 that allow one font file to contain multiple stylistic variations, and thus break down the strict delineations of “traditional” (static) fonts. Weight, width, style, optical size, etc. can then be manipulated by the designer or adjusted based on contextual rules.

Google Fonts Glossary: Variable Fonts. Retrieved March 23, 2023

Question 2

Q: What are the differences between typeface, font face, font family, variable fonts, and a style in Typography?

Answer 2

• Typeface: A typeface is a design of lettering that can include variations, but not size or weight. It’s the creative work itself, the design.
• Font Face: In digital typography, font face refers to a set of characters, symbols, and glyphs that share the same design and attributes. Typically, it’s a specific variation within a typeface, such as 'bold' or 'italic'.
• Font Family (Typography context): In typography, font family refers to a collection of fonts that are designed and intended to be used together, often sharing common design traits. A font family can consist of multiple weights (light, regular, bold) and styles (italic, oblique).
• Font Family (CSS context): In CSS, font-family refers to a prioritized list of font family names and/or generic family names. It helps browsers select an appropriate font from those available on the system or through @font-face. E.g., font-family: Arial, sans-serif;.
• Variable Fonts: Variable fonts are a relatively new font format that allows designers to use a single font file for a variety of styles. It contains a continuous range of styles and attributes within the same file. It can be controlled in CSS using properties such as font-weight, font-stretch, and custom-defined axes.
• Style: In typography, style refers to attributes such as italics, boldness, and underlining. In CSS, you can control these attributes through properties like font-style, or font-weight

Question 3

Anatomy of a variable font

Answer 3

Variable fonts are a single font file with an inbuilt spectrum of styles. They consist of a ‘default’ style, usually ‘Regular’, and additional styles connected through ‘axes’. Weight, Width, Slant, and Optical Size are common axes. Along each axis, an ‘instance’ represents a specific style, and a variable font can have countless instances. Instances can be unnamed or named (e.g. SemiBold).

Example: In Roboto Flex, the Weight axis encompasses styles from light to heavy, with the Regular style in the middle, allowing selection among 900 different weights.

“Anatomy of a variable font #”(web.dev). Retrieved March 28, 2023.

Question 4

What is an axis in variable fonts?

Answer 4

In variable fonts, “axis” usually refers to a single aspect of a typeface’s design that can be altered by the user.

Common axes include Italic, Optical Size, Slant, Weight, and Width, all five of which are registered (defined) in the OpenType file format specification.

Google Fonts Glossary: Axis in Variable Fonts. Retrieved March 23, 2023

Question 5

What does the Italic axis (ital) do in variable fonts?

Answer 5

“Italic” (ital in CSS) is an axis found in some variable fonts. It controls the font file’s italic parameter, with italics either turned “off” or “on”, rather than gradually changing over a range.

Possible values according to Google Fonts CSS v2 API:

• 0 (default) - off
• 1 - on

Google Fonts Glossary: Italic Axis Retrieved March 23, 2023

Question 6

What does the Optical Size axis (opsz) do in variable fonts?

Answer 6

“Optical Size” (controlled with font-optical-sizing or font-variation-setting: ‘opsz’ VALUE in CSS) is an axis found in some variable fonts. It controls the font file’s optical size optimizations.

Possible values according to Google Fonts CSS v2 API:

• 14 default
• 6 - min
• 144 max

With step of size 0.1

Examples:

body {
  font-variation-settings: 'opsz' 16;
}
h1 {
  font-variation-settings: 'opsz' 48;
}

Google Fonts Glossary: Optical Size Axis. Retrieved March 23, 2023

Question 7

What is the problem with the Optical Size axis in browsers

Answer 7

The Optical Size axis in variable fonts is meant to adjust the font’s appearance for readability at different sizes. Ideally, the Optical Size should correlate with the physical size of the text in print (measured in points).

However, browsers lack the concept of physical size and rely on CSS pixels (px), which don’t necessarily equate to physical points. As a result, the Optical Size axis doesn’t align with the actual printed size.

CSS introduces font-optical-sizing to help control this behavior. By default, it is set to auto, allowing the browser to adjust the Optical Size. However, if needed, developers can disable this feature by setting it to none or explicitly set Optical Size using font-variation-settings:

/* Allow the browser to adjust Optical Size */
body {
  font-optical-sizing: auto;
}

/* Disable automatic adjustment of Optical Size */
body {
  font-optical-sizing: none;
}

/* Explicitly set Optical Size */
body {
  font-variation-settings: 'opsz' 16;
}
h1 {
  font-variation-settings: 'opsz' 48;
}

This allows for greater control, though it does not solve the discrepancy between CSS pixels and physical points.

Google Fonts Glossary: Optical Size Axis. Retrieved March 23, 2023

Question 8

What does the Optical Slant axis (slnt) do in variable fonts?

Answer 8

“Slant” (slnt in CSS) is an axis found in some variable fonts. It controls the font file’s slant parameter for oblique styles.

Possible values according to Google Fonts CSS v2 API:

• 0 default
• -90 - min
• 90 max

With step of size 1

Examples:

body {
  font-variation-settings: 'slnt' 16;
}

h1 {
  font-variation-settings: 'slnt' 48;
}

fonts.google.com “Slant axis (slnt)”. Retrieved 2023-03-27.

Question 9

What does the Optical Weight axis (wght) do in variable fonts?

Answer 9

“Weight” (wght in CSS) is an axis found in many variable fonts. It controls the font file’s weight parameter.

Possible values according to Google Fonts CSS v2 API:

• 400 default
• 1 - min
• 1000 max

With step of size 1

Examples:

body {
  font-variation-settings: 'wght' 450;
}

h1 {
  font-variation-settings: 'wght' 810;
}

fonts.google.com “Weight axis (wght)”. Retrieved 2023-03-27.

Question 10

What does the Optical Width axis (wdht) do in variable fonts?

Answer 10

“Width” (wdth in CSS) is an axis found in some variable fonts. It controls the font file’s width parameter.

Possible values according to Google Fonts CSS v2 API:

• 100 default
• 25 - min
• 200 max

With step of size 0.1

“Width” is the result of how much horizontal space is taken up by a typeface’s characters. A condensed face takes up considerably less space than a wide one.

In CSS, we can assign a variable width to an element of our choosing using the font-stretch property. (Despite the name, note that the type is never literally “stretched” by browsers.

Examples:

p {
  font-stretch: 50%;
}
strong {
  font-stretch: 193%;
}

body {
  font-variation-settings: 'wdht' 450;
}

h1 {
  font-variation-settings: 'wdht' 810;
}

“Width axis (wdth) – Fonts Knowledge - Google Fonts” (Google Fonts). Retrieved 2023-03-27.

Question 11

How do you load a variable font file?

Answer 11

Variable fonts are loaded with the same @font-face mechanism as traditional static web fonts, but with two new enhancements:

@font-face {
	font-family: 'Roboto Flex';
	src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations'),
	     url('RobotoFlex-VF.woff2') format('woff2-variations');
	font-weight: 100 1000;
	font-stretch: 25% 151%;
}

1. Source Formats: We don’t want the browser to download the font if it doesn’t support variable fonts, so we add format and tech descriptions: once in the future syntax (format('woff2') tech('variations')), once in the deprecated but supported among browsers syntax (format('woff2-variations')). If the browser supports variable fonts and supports the upcoming syntax, it will use the first declaration. If it supports variable fonts and the current syntax, it will use the second declaration. They both point to the same font file.
2. Style Ranges: You’ll notice we’re supplying two values for font-weight and font-stretch. Instead of telling the browser which specific weight this font provides (for example font-weight: 500;), we now give it the range of weights supported by the font. For Roboto Flex, the Weight axis ranges from 100 to 1000, and CSS directly maps the axis range to the font-weight style property. By specifying the range in @font-face, any value outside this range will be “capped” to the nearest valid value. The Width axis range is mapped in the same way to the font-stretch property.

“Loading variable font files”(web.dev). Retrieved March 28, 2023.

Question 12

How can you change the weight (wght) axis?

Answer 12

The wght axis can be changed widh font-weight.

Traditionally, you would set font-weight as a keyword (light, bold) or as a numerical value between 100 and 900, in steps of 100. With variable fonts, you can set any value within the font’s weight range:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

“Using weights and widths”(web.dev). Retrieved March 29, 2023.

Question 13

How can you cange the width (wdht) axis?

Answer 13

The wdth axis can be changed with font-stretch.

We can set font-stretch with keywords (condensed, ultra-expanded) or with percentage values:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

“Using weights and widths”(web.dev). Retrieved March 29, 2023.

Question 14

How do you use the italics (ital) axis?

Answer 14

The ital axis is intended for fonts that contain both a regular style, and an italic style. The axis is meant to be an on/off switch: value 0 is off and will show the regular style, value 1 will show the italics. Unlike other axes, there’s no transition. A value of 0.5 won’t give you “half italics”.

i, em, .italic {
	font-variation-settings: 'ital' 1;
}

“Using italics and obliques #”(web.dev). Retrieved March 29, 2023.

Question 15

How do you use the obliques (slnt) axis?

Answer 15

The slnt axis is different from italics in that it’s not a new style, but just slants the regular style. By default its value is 0, which means the default upright letter shapes. Roboto Flex has a maximum slant of -10 degrees, meaning the letters will lean to the right when going from 0 to -10.

.slanted {
	font-variation-settings: 'slnt' 10;
}

“Using italics and obliques” (web.dev). Retrieved March 29, 2023.

Question 16

How do you use the optical (opsz) axis?

Answer 16

A new CSS property has been introduced for this axis: font-optical-sizing. By default it’s set to auto, which makes the browser set the axis value based on the font-size. This means the browser will pick the best optical size automatically, but if you wish to turn this off you can set font-optical-sizing to none.

You can also set a custom value for the opsz axis, if you deliberately want an optical size that doesn’t match the font size. The following CSS would cause text to be displayed at a large size, but at an optical size as if it were printed in 8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

“Using optical sizes” (web.dev). Retrieved March 30, 2023.

Question 17

How do you use custom axis?

Answer 17

Unlike registered axes, custom axes will not be mapped to an existing CSS property, so you will always have to set them through font-variation-settings. Tags for custom axes are always in uppercase, to distinguish them from registered axes.

“Using custom axes” (web.dev). Retrieved March 30, 2023.

Question 18

What is the problem with font-variation-settings CSS property?

Answer 18

There is a little gotcha with font-variation-settings. Every property you don’t explicitly set will automatically be reset to its default. Previously set values aren’t inherited! This means the following will not work as expected:

<span class="slanted grade-light">
	I should be slanted and have a light grade
</span>

First the browser will apply font-variation-settings: 'slnt' 10 from the .slanted class. Then it will apply font-variation-settings: 'GRAD' -200 from the .grade-light class. But this will reset the slnt back to its default of 0! The result will be text in a light grade, but not slanted.

Luckily, we can work around this by using CSS variables:

/* Set the default values */
\:root {
	--slnt: 0;
	--GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
	--slnt: 10;
}

.grade-light {
	--GRAD: -200;
}

.grade-normal {
	--GRAD: 0;
}

.grade-heavy {
	--GRAD: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
	font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

CSS variables will cascade, so if an element (or one of its parents) will have set the slnt to 10, it will keep that value, even if you set GRAD to something else.

“Font-variation-settings inheritance” (web.dev). Retrieved March 30, 2023.

Question 19

How can you fallback support to variable fonts?

Answer 19

All modern browsers support variable fonts. 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:

/* Set up Roboto for old browsers, only regular + bold */
@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
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

For older browsers, text with the class .super-bold will get rendered in the normal bold, as that’s the only bold font we have available. When variable fonts are supported, we can actually use the heaviest weight of 1000.

“Fallbacks and browser support” (web.dev). Retrieved March 30, 2023.

Question 20

How can you change the caps of a variant font?

Answer 20

With the font-variant-caps CSS property that controls the use of alternate glyphs for capital letters.

The font-variant-caps property is specified using a single keyword value from the list below. In each case, if the font doesn’t support the OpenType value, then it synthesizes the glyphs.

Values

• normal - Deactivates of the use of alternate glyphs.
• small-caps - Enables display of small capitals (OpenType feature: smcp). Small-caps glyphs typically use the form of uppercase letters but are reduced to the size of lowercase letters.
• all-small-caps - Enables display of small capitals for both upper and lowercase letters (OpenType features: c2sc, smcp).
• petite-caps - Enables display of petite capitals (OpenType feature: pcap).
• all-petite-caps - Enables display of petite capitals for both upper and lowercase letters (OpenType features: c2pc, pcap).
• unicase - Enables display of mixture of small capitals for uppercase letters with normal lowercase letters (OpenType feature: unic).
• titling-caps - Enables display of titling capitals (OpenType feature: titl). Uppercase letter glyphs are often designed for use with lowercase letters. When used in all uppercase titling sequences they can appear too strong. Titling capitals are designed specifically for this situation.

“font-variant-caps - CSS: Cascading Style Sheets | MDN” (developer.mozilla.org). Retrieved March 31, 2023.