CSS

8 Best Tips to Use Variable Fonts on Your Site

Variable fonts extend the OpenType font specification with dynamic capabilities. They supply developers with typefaces that come with unlimited font variations. With variable fonts, you don’t have to load a separate font file for each style variation such as italic or bold types. All font variations are included in one single file.

You are not tied to pre-defined typographical styles, either. For example, most static fonts require you to use the font-weight: 800; rule for bold fonts. Variable fonts allow you to use any value for font-weight within a pre-defined range. Besides weight, you can also set dynamic values for other attributes such as slant, width, or optical size.

Each variable font has different font variations, defined by the font file. In this article, we share a couple of useful tips with you that can help you get the most out of the feature.

1. Check Browser Support with Feature Queries

Not every browser supports variable fonts. If you have a look at the Can I Use docs, you can see that Internet Explorer and older versions of Edge, Firefox, Safari, and Chrome don’t (or just partially) support the feature.

CSS Variable Fonts Browser Support

However, this shouldn’t stop you from using variable fonts in modern browsers, as they come with several awesome features. Instead, check if the user’s browser supports variable fonts with a feature query. As you can configure variable fonts via the font-variation-settings property, this is what you have to check within the @supports rule.

With the following CSS rule, you can add fallback rules for browsers that don’t support variable fonts. For instance, you can use the font-weight: bold rule instead of defining a specific value with font-variation-settings.

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

      // Fallback rules for browsers that don't support variable fonts.
      font-weight: bold;

}

2. Load Variable Fonts with the @font-face Rule

You can add variable fonts to your site with the @font-face rule, just as if they were static fonts. As variable fonts contain all font variations, you need to add only one single file to your site. For example, to use a variable font with a WOFF2 extension, you need to add the following rule to the top of your CSS file:

@font-face {
    font-family: "Your Variable Font";
    src: url("yourfont.woff2") format("woff2-variations");
}

Note that the URL path to the font file needs to be properly specified within the url() function.

3. Use the Variation Axes to Change the Look of the Font

Font variations such as weight or slant are defined by each variable font individually. They come in two types: registered and custom font variations. Creators of variable fonts can decide which variations they want to add to their font.

Registered Variation Axes

Registered variation axes are standardized by W3C. They define the following font variations:

  1. weight (axis tag: wght, CSS property: font-weight),
  2. width (axis tag: wdth, CSS property: font-stretch),
  3. optical size (axis tag: opsz, CSS property: font-optical-sizing),
  4. slant (axis tag: slnt, CSS property: font-style: italic),
  5. italic (axis tag: ital, CSS property: font-style: oblique <angle>).

In your CSS, you can define the values of registered font variations in two different ways:

  1. using their CSS property,
  2. using their axis tag within the font-variation-settings property.

For example, the IBM Plex variable font allows you to use two font variations: weight and width. As both are registered variations, you can set their values in two different ways:

div {
    /* with their CSS properties */
    font-weight: 637;
    font-stretch: 100;

    /* with the font-variation-settings property */
    font-variation-settings: "wght" 637, "wdth" 100;
}

Both rules above have the same results. However, W3C recommends using the first option whenever it’s possible, as the font-variation-settings property is a low-level property. You should only use it when high-level properties (such as font-weight or font-stretch) are not available or supported by the browser.

IBM Plex Variable Fonts

Custom Variation Axes

Besides the five registered variation axes, variable font creators can also define custom variation axes. Unlike registered font variations, they don’t have corresponding CSS properties. You can only access custom font variations via the font-variation-settings property. Custom variation axes also have four-letter axis tags, similar to registered variation axes.

For example, the Dunbar variable font has one registered and one custom axis: weight (wght) and x-height (xhgt). You can set the values of font variations in one of the following ways:

div {    
    /* 
     * by using the corresponding CSS property for the registered axis
     * and font-variation-settings for the custom axis
     */
     font-weight: 160;
     font-variation-settings: "xhgt" 500;
    
    /* 
     * by using font-variation-settings for both axes 
     */
     font-variation-settings: "wght" 160, "xhgt" 500;
}

If you don’t define specific values for the available font variation axes, the variable font will use the default value of each variation axis.

Dunbar Variable Font

4. Choose a Variable Font with the Features You Need

Variable fonts are still relatively new, but there are already many implementations you can choose from. You can follow two strategies to find the best variable font for your site:

  1. Browse variable fonts on the net and pick the one that best matches your design.
  2. Decide which features you need and look for a variable font accordingly. For example, if you want to dynamically change the slant of a typeface, choose a variable font that comes with the slant font variation.

Here are some places where you can look for variable fonts on the web:

  • Axis Praxis – the go-to place to find variable fonts; both examples above in the article (IBM Plex and Dunbar) are from this site.
  • V-Fonts – a simple site where you can test and download variable fonts.
  • GitHub – many notable companies such as Monotype and Type Network publish their variable fonts on GitHub.

5. Use Named Instances

Variable font creators can define named font instances if they want (however, it’s not obligatory). For example, the Graduate variable font has a couple of named instances such as Regular, Medium Condensed (on the image below), SemiBold Expanded, ExtraBold, and others.

Graduate Variable Font

Named font instances might be quite useful, as they can give a good starting point to your design. You can also pick a named instance, then adjust font variations according to your needs.

Note that currently, you can’t target named instances directly with CSS. However, you can usually find the belonging values in the documentation of the variable font. Or, if you have downloaded the font from a site like Axis Praxis you can also copy-paste the values from the live demo.

For example, here are the font variation values belonging to the Medium Condensed instance of the Graduate variable font:

div {
    font-family: "GRADUATE";
    font-variation-settings: "XOPQ" 200, "XTRA" 400, "OPSZ" 16, "GRAD" 0, 
          "YTRA" 750, "CNTR" 100, "YOPQ" 100, "SERF" 0, "YTAS" 0, "YTLC" 650, 
          "YTDE" 0, "SELE" 0;
}

6. Improve Readability

You can use variable fonts to improve the readability of your site. Different font variations such as weight, width, and x-height can help you distinguish different kinds of text blocks.

For example, you can use different weights for the <h1>, <h2>, <h3> headings so that readers can better understand the content hierarchy of your site.

7. Use Variable Fonts in Animations and Transitions

Variable fonts are also excellent for creating subtle text animations and transitions. You can animate any font variations with either the @keyframes rule or the transition property.

The demo below has been created by Mandy Michael and animates the Decovar variable font using keyframe animations.

8. Use Variable Fonts for Custom Branding

With variable fonts, you can also create your own custom branding. Many big brands such as McDonald’s and Coca Cola have their own typefaces that distinguish them from the competition. Custom wordmark logos can help customers instantly recognize a brand, too.

Variable fonts allow you to have your own custom wordmarks and display fonts without having to hire a professional type designer. You only have to define the custom value of each font variation such as x-height, width, or slant and you are good to go.

Conclusion

Variable fonts come with several possibilities and can help you create unique typography with little effort. As you only need to load one font file, variable fonts can improve page load times on your site as well.

If you want to learn more about typography on the web, also have a look at our article on how to use Font Awesome icons on a WordPress site.

And, if you’d rather look into CSS transitions we have a great tutorial about simple CSS hover effects, too.

Home CSS Deals HTML HTML5 Java JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress