[REFERENCE] Using Variable Fonts in CSS 🔤

Published by Alicia's Notes 🚀, View original

This is just a short reference to using fonts with Variable Axes in CSS

What are Variable Fonts?

Variable fonts are font files that encapsulate the entire family, and allow for custom attributes (regarding things like weight, slant, grade, character-width) to be set. This brings several benefits:

  • Much higher quality rendering of fonts, without browser distortions
  • Greater control over customization, as you can specify each value separably
  • The need only for a single font file (rather than a version for each style). Great for performance due to reduced file size and fewer requests

Variable fonts were announced in 2016, and now are officially supported by all modern browsers and most major operating systems, as an extension to the OpenType Specification. There are now many fonts that support variable axes.

Official Variation Axes

Weight (wght)

  • Corresponding CSS attribute: to font-weight
  • Example usage: font-variation-settings: 'wght' 625;
  • Typical range: 100 - 900

Italic (ital)

  • Corresponding CSS attribute: to font-style
  • Example usage: font-variation-settings: 'ital' 1;
  • Typical range: 0 - 1 (Indicating upright or italic)

Slant (slnt)

  • Similar to italics, but allows you to specify an exact value (in a degree continuum) and it does not include glyph substitution
  • Corresponding CSS attribute: to font-style
  • Example usage: font-variation-settings: 'slnt' 14;
  • Typical range: -90 – 90 degrees

Optical Size (opsz)

  • This allows adding or removing detail to improve legibility on small or large screen sizes. Set to auto by default, and usually this is adequate
  • Corresponding CSS attribute: to font-optical-sizing
  • Example usage: font-variation-settings: 'opsz' 36;
  • Typical range: value usually matches font-size

Width(wdth)

  • Corresponding CSS attribute: to font-stretch
  • Example usage: font-variation-settings: 'wdth' 115;
  • Typical range: 75% - 125%

Custom Axes

Many fonts also have a number of custom axes that can be modified. Typically these are represented with capitals. The below are several common custom axis, but Nick Sherman's project v-fonts.com provides an interactive playground, where you can properly check out many more of these axes.

Grade (GRAD)

  • Lets you modify the weight, without effecting width. Useful for responding to low-resolution screens
  • Example usage: font-variation-settings: 'GRAD' 88;
  • Typical range: Decimal, between -1 - 1

Ascenders and Descenders (YTAS & YTDE)

  • Alters of height of the stems and tails of each character
  • Example usage: font-variation-settings: 'YTAS' 800, 'YTDE' -350;
  • Typical range: YTAS 650 - 850. YTDE -500 - -138

Combining Properties

To use multiple variable font properties, you must combine them into a single line, using a comma-separated list.
(Note: When overriding a single font-variation property, you must re-define all of the other properties.)

font-variation-settings: 'wght' 375, 'GRAD' 88;

Supporting Older Browsers

In order to support older browsers, use the @supports mixin to override text with variable font properties. For example:

h1 {
 font-family: some-non-variable-font-family;
}

@supports (font-variation-settings: 'wdth' 115) {
 h1 {
    font-family: some-variable-font-family;
 }
}

Quick Tips

Slant & Italics

It is possible to use both slant (slnt) and italics (ital) at the same time. This enabled you to separate the angle change from the glyph substitution.
i.e the italics font property replaces some characters with a different glyph, usually for ascetics. Turning italics off, and then using slant to italicize the text, means that no characters are replaced. The reserve is also true, enabling italics and setting the slant to 0 will replace the glyths. This makes a much bigger than expected difference.

For example:

font-variation-settings: 'slnt' 10, 'ital' 0;

Additional Resources

Articles: