About this site

Accessibility

  :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.

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.

Design

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.