Migrating to Variable fonts

1. Introduction

Last Updated: 05/11/22

Embrace dynamic variability in your UI with variable fonts, which will allow for greater responsiveness in layouts, themes, and accessibility all while making your apps faster!

What you'll learn

What variable fonts are.
How you can customize type with them.
How to apply variable fonts to your designs.
How to implement variable fonts with the Google Fonts API and in CSS.

Prerequisites

For this lab we'll build on some foundational design concepts.

Knowledge of type scales.
Knowledge of Figma.
Basic knowledge of HTML and CSS.

What you'll need

Figma Account
Figma designlab file
Code editor of choice for web

2. Get started

Setup

To get started you need to access the Designlab Figma file. Everything you need for the lab is in the Figma file. You can either download and import the file or duplicate it from the Figma community.

First, sign into Figma or create an account.

Duplicate from Figma Community

Navigate to the Migrating to Variable fonts file or search for Migrating to Variable fonts within Figma Community. Click Duplicate in the top right corner to copy the file into your files.

File layout

As you look through the file, notice that the file is self contained, starting with an introduction. Each section is divided into a row of artboards that are linked together, with some core concepts for the section followed by exercises. The sections and exercises build on each other and should be completed sequentially.

This codelab guides you through those concepts and exercises in greater detail. Read along with the codelab to learn more about the new Material You features.

Starting with the Intro artboard, there are buttons that link the artboards together in order. To access the link, click the button.

Check for variable font

Before getting started, we need to make sure we have a variable font! This file uses Roboto Flex, already available in Figma, or you can download it from fonts.google.com

3. What are variable fonts?

Variable fonts are a new innovative font format that lets users gain control over their type and icons. Roboto Serif and Roboto Flex are new typefaces made fresh for variable font technology, each with a wide range of axes.

Aesthetic expression and axes

Designers are no longer limited to older hard set styles, such as regular, bold, italic, etc. The variables within variable fonts are controlled by axes or instances. If the type designer chooses, any variable in the type design can be assigned to a user-controllable axis. Common axes include italic, optical size, slant, weight, width. These five are the registered axes in CSS.

Benefits

Variable fonts let you deliver multiple styles in a single font file, making websites more sustainable, smaller, and faster, and giving the designer greater expressive control.

4. Use variable fonts in design

Change axes

Let's walk through all the parameters (or axes) we have available and their effect. Select the type to the right and open the Type Details modal (more icon) to open the axes sliders, and go through each parameter.

Weight defines the thickness of a letter. It provides a full, continuous range of stroke thicknesses.

Width is the result of how much horizontal space is taken up by a typeface's characters.

Adjust the style from upright to slanted, also known to typographers as an ‘oblique' style. Though rare, Slant can work in the other direction, which is called a ‘backslanted' or ‘reverse oblique' style.

Grade is a secondary modifier of the optical weight of a typeface and is independent of the Weight axis. Both Weight and Grade affect a letter's thickness, but adjustments with Grade are much more granular.

Optical Size. Adapt the style to specific text sizes, specified in points. At smaller sizes, letters typically become optimized for more legibility, with loose spacing/kerning and thicker strokes with less detail. At larger sizes, letters are typically optimized for headlines with thinner strokes and more detailed forms, and more extreme weights and widths.

Check out Variable Fonts demo to play with variable fonts axes outside of Figma.

5. Ramp up on style

If you work with a brand style guide you may have an established type scale to inform typographic constraints. Using variable fonts does not mean tossing this consistency aside. It gives further refinement within your type scale flexibility (for use cases like increasing weight on grade on dark backgrounds) within a single file.

While a type scale can consist of more than one font family, here we'll use only one to customize a condensed version of the Material default typescale.

Let's start customizing the type scale with the body copy. This lets us set the site's base type size first and optically adjust from there. The default for Body Large is 18pt, selected and set to Roboto Flex. Adjusting for greater legibility used to mean updating the font size and weight, which meant another font file, but now we can fine tune some of the axes. Adjust optical size, grade, and weight.
Continue with Label. Labels are more utilitarian, and used in shorter smaller contexts, like buttons. Optically adjust the grade to allow the label to appear correctly on button containers and chips.
Keep refining with Title, Headline, and Display. All three are used for shorter medium to high emphasis texts, like page titles and sections. Headline and Display can be more expressive because of their size and high emphasis. Feel free to play around with all the axes here!
With type selected, click the 4 dots and add (+) to set a text style, which ensures consistent reusable type settings.

You can generate the default Material type scale as Figma styles with the Material Theme Builder, or by duplicating the M3 design kit.

6. Applied to UI

With a type scale set up, let's apply it to UI elements to implement in code! Consider how variable fonts can be used to add more expressiveness and legibility. If you set up Figma styles in the last exercise, those can be applied, then update the style's axes.

Take a look at the UI elements on the left. The first card contains a plant type, description, and some category tags, while the rest of the cards describe plant care instructions. The plant type makes sense as a high emphasis role, so use our ‘headline' style. Set it to what we previously set up as headline. The care cards also have a title, but are not at the same emphasis, so set them as ‘title'.
The plant detail and instruction copy can be assigned to ‘body large', while the category labels to ‘label large'.
Experiment with different roles, and adjust the UI elements and your typescale to find the right balance.

7. Implement in code

Implementing variable fonts in code with CSS is a similar method as any web font using a font delivery service to load in the font and customizing with CSS properties.

We'll use basic HTML and CSS for implementation, and not MWC or any framework.

Variable fonts on Google Fonts

Use Google Fonts as your font delivery service for an easy way to implement a myriad of fonts, including variable fonts, on your website!

Explore which variable fonts are available by navigating to fonts.google.com. Under search, check Show only variable fonts to filter. Variable fonts include a playground near the bottom of the page where you can set sliders for each of the axes available in the family.

Style with CSS

Not all fonts have the same amount of axes available to customize. Currently, Weight, Width, Slant, Italic, and Optical Size are the most common.

These can be set with basic CSS font properties that existed before variable fonts. Although everything is not yet widely supported (as of May 2022), all axes can be reliably set using the new property font-variation-settings.

`Axes`	`Abbreviation`	`CSS property`
`Weight`	`wght`	`font-weight`
`Width`	`wdth`	`font-stretch`
`Slant`	`slnt`	`font-style*`
`Italic`	`ital`	`font-style*`
`Optical Size`	`opsz`	`font-optical-sizing`

*Slant (slnt) and Italic (ital) in font-style are not reliable.

8. Import with Google Fonts API

We've been using only Roboto, but look at all the fonts available to us now on fonts.google.com.

We'll stick to Roboto for the rest of the codelab and customize the type in the following cards based on our previous exercise.

Copy this code containing the card sample UI into your web IDE of choice.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

Make note of the style specs we set in the last exercise for headline, title, body, and label. With those in mind, navigate to the page for Roboto Flex. Set the sliders to match the specs you set in Figma, and then Select this style for each to add to the side drawer.
Within the drawer, under the selected styles, look for Use on the Web. There are two ways to add the font to your code: by <link> or @import. You only need one, let's select @import.
Copy from @import to the semicolon, and paste it within the style tags after the import comment.
Since Roboto Flex is the only font used, set the body to call the font-family by adding the "CSS rules to specify families" that is included under the import code.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

That imports the selected font and styles set, but using Axis ranges lets you use the continuous range of styles instead of the individual styles. To make a range, join two values with .. (ex. 100..900). Make sure that you're only adding ranges that exist in the font's sliders or it won't load properly.

This is best used for smooth animation transitions and experimenting in the browser, as this loads in the full range and makes the download request larger.

9. CSS variable font properties

With your font imported, lets jump back to Figma to pull some CSS properties to style, and take a look at the font-variation-settings CSS property.

Starting with the headlines' h1 selected in the right panel, select the Inspect tab at the top. This switches the panel to a code inspect mode for dev handoff. Code is the last section.
If you haven't already, change the format dropdown to CSS. The standard attributes, if used, are listed (font-weight, font-stretch, font-style, font-optical-sizing), followed by the low-level font-variation-settings that contain non-registered custom axes. Use standard attributes first, before turning to font-variation-settings.

Figma uses font-variation-settings for width (wdth) instead of font-stretch.

Copy this CSS code related to type to style our h1 selector.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

The care card title's style can be copied into h2. Do the same for the body copy, copying into p. Label styles can be copied into .label

10. Congratulations

Great job on embracing variable fonts, learning how to use them in your designs, and implementing them for the web.

If you've got questions, feel free to ask us any time using @MaterialDesign on Twitter.

Stay tuned for more design content and tutorials on youtube.com/MaterialDesign