About this site

Showing by example

This site was designed not only to teach about variable fonts, but also to showcase their utility as much as possible. The typography has been designed around Roboto Extremo, a newly reimagined variable font currently in development. With a range of axes that include weight, width, slant, optical size, and grade, this font allows the typography to respond to use, screen size, light mode, and more without loading additional assets. This benefits user interface (UI) design, accessibility, long-form reading, and overall typographic design flexibility.

UI design

With mobile device usage over 50% in most markets, the ability to reflow and render well on any size of device is a critical aspect of any website design. Detecting a preference for “dark mode” color schemes adds yet another dimension to the design challenge, in addition to the myriad device sizes at which a site will be viewed. Variable fonts can be an integral part of responding to those challenges.


The typography on this site is designed to scale font-size and line-height based on viewport width. Roboto Extremo is being used throughout for both headings and body copy. Thanks to the generous width axis, headers are set narrower to allow for better line lengths with larger font sizes, while the body copy remains at a standard 100% width. This helps avoid awkward, choppy line breaks with large headers without compromising legibility.


The grade axis is really useful on the web when considering light modes and UI animation. Varying the weight of the text without altering the overall spacing, grades give us the ability to make fine adjustments for better legibility. They also facilitate additional kinds of animation on UI elements like buttons. Increasing or decreasing the visual weight of a text label based on focus state or user interaction gives us another powerful tool to guide users through a set of actions or flows.

This site supports a “dark mode” that’s detected based on user device settings (when viewed in a browser that supports the prefers-color-scheme media query). When the contrast inverts in dark mode, the grade of the body text increases slightly, as does the letter-spacing. Since text can look a little thinner when shown light-on-dark, making the text a bit heavier and giving it more space increases legibility in that scenario. Being able to make these fine adjustments without loading additional files helps preserve the quality of the overall design and reading experience in ways never before possible on the web.


Far from being a fad, supporting light/dark mode can be a huge boon for readers with any kind of light sensitivity or predisposition to migraines. In this sense, being able to support both modes of viewing the site is tremendously beneficial. The same principles can be put into practice in offering a higher-contrast mode. This helps address not only readers with low vision, but also those in lower-light environments. In both cases, increasing the weight or grade of text will improve legibility along a wider spectrum of light levels and vision acuity. Estimates range from 60% to as high as 75% of all adults require some sort of vision correction, so supporting this kind of functionality likely benefits far more visitors to a given website than the amount of attention paid to many other technical concerns. We’ve worked hard on this site to maintain appropriate contrast ratios in both light and dark modes of viewing.

  :root {
    --p-vf-GRAD: 0;
  p {
    font-variation-settings: 'GRAD' var(--p-vf-GRAD);
    letter-spacing: normal;
  @media (prefers-color-scheme:dark) {
    p {
      --p-vf-GRAD: 0.35;
      letter-spacing: 0.025em;

Long-form reading

One of the reasons reading online can be tiring or frustrating is poor typography. But what’s good on one device is not necessarily good on another. Screen size has always had a big impact on reading comfort, but until variable fonts came along, it was only possible to work with font-size, line-height, and line length (using max-width). While this is certainly helpful, it limits what can be accommodated.

Dynamic typography

Modern CSS techniques at least allow us to do this more fluidly. This site was designed and developed using dynamic typography that leverages CSS custom properties and calculations to fluidly scale font-size and line-height along with the viewport. (Read more about this on RWT.io.) This in turn was inspired by CSS Locks as written about by Tim Brown and pioneered by Mike Riethmuller. You can also glimpse where some of these ideas in dynamic typography are going by reading this post on CSS-Tricks and looking at projects like Typetura and Textblock.

Using the weight axis to make subtle adjustments to font-weight in body copy can help offset differences in text “color” on different screen sizes. Physically smaller screens can often make text of the same weight look thinner or less substantial. Likewise, the amount of “bold” required to get a reader’s attention may vary, too. Having the ability to subtly alter font-weight based on screen size can make for a smoother reading experience on a broader range of devices.

The advantage of the weight axis is that it allows us to have both medium and bold styles to provide different levels of emphasis without getting so heavy that the letters look closed up or muddy at text sizes. While defaults for normal and bold might be 400 and 700, here we use 350 for “normal” and about 650 for bold. (In truth, it’s set up as a multiplier of the body weight.)

Headings can be another challenge. In trying to maintain a strong visual hierarchy, it can be tough to balance larger font sizes with shorter line lengths on smaller screens. Having the ability to balance font-size, font-weight, and font-stretch (width) lets designers achieve better design hierarchy and usability in more ways than ever before. The design of this site takes advantage of the broad range of the width axis in Roboto Extremo to set headings narrower, which helps increase the visual contrast between headings and body styles, and also achieves better line lengths on smaller screens.

Optical size is yet another axis that can improve reading on screens. By adjusting stroke contrast, width, and apertures (the openings in letters like a c or e) based on font-size, this axis can help a single font work well for reading at small sizes and still showcase fine details at larger ones.


Typography is a huge component of our experience on the web, and having so many ways to make it more readable is really tremendous. In a sense, this kind of typography is supposed to be less noticed: to make the reading experience easier without getting in the way. But making the experience smoother is only one side of the equation.

Sometimes the goal is to get attention—to grab the reader, slow them down, and make them take notice. This is another way variable fonts can shine. Custom axes can bring unexpected flair, like the “casual” axis in Recursive, or allow for more dramatic typesetting like altering ascenders and descenders to enable setting lines of type closer together for bolder headings. For this site, we’ve used a more exaggerated scale, making headings larger, lighter, and narrower, thus letting the type act as a visual element and not just a headline.

What’s more, since axes can be animated, we can add yet another technique to our design toolbox: motion! This lets us think about design on the web as more than just repurposed print design, but a dynamic combination of typographic techniques, changing content, and time. Subtle animation on load, tied to scrolling, or triggered by other kinds of user interaction, allows us to design typography with the sophistication of motion title graphics and the subtlety of the best publication design. Just don’t forget to design with “reduced motion” preference support in mind! (Learn more about motion design and inclusivity in this presentation by Val Head)

Next steps

We hope you enjoy this site, and welcome your feedback, input, and ideas. If you’d like to provide any, head on over to the Github repository. There you’ll be able check out the code, see what’s being discussed in the issues, and create your own if you’d like to participate. Don’t forget to take a look at how to design with variable fonts, techniques for adding them to your site, and browse the resources section to learn even more.