Dynamic Typography with Fluid Sizing and Variable Fonts

Newer developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web and in apps. But the fun really starts when you add Variable Fonts. The design, technical, and performance benefits are really exciting, but when you combine them with other CSS capabilities like custom properties, calculations, and grid it’s a whole new way to think about design and development.

We’ll see how they work together by using some variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds—better than you thought possible.

Something Jason thinks about a lot is the adjacency between design and development. Particularly in design systems where we are building systems to support design. The typography techniques he’s showing today are not the final destination, they are a beginning.

Type is important. Type is the voice of your words and your brand. Most of what we do is put text on screen to influence people to make an action.

There are no crystal goblets, no defaults devoid of friction. Design has visible surfaces, inevitably, and they brim with significance and context and connotation and intent and tone. – Nina Stossinger

With TypeKit and responsive design there was so much scope to make things work beautifully-but-differently across devices. We gained the ability to do great things, but people hated the FOUT and they pushed back. But it was manageable, there were ways to make the implementation account for font file load time; so that people didn’t notice the swap.

A new chapter, a fourth episode with three things…

  • CSS custom properties (aka variables)
  • CSS calc()
  • scalable fonts

A variable font is a single font file that behaves like multiple fonts. – John Hudson

Variable fonts give us a way to do great typography, without the significant weight and performance problems of loading multiple font files.

The technicalities of fonts are that they expose various adjustable axes like height, width, stretch, weight, slant…

Reference: MDN variable fonts guide

A great tool for this is Firefox Dev Tools which now includes a Fonts tab.

So how can we bring these three technologies together into a scale? There is some (admittedly complex-looking) maths you can code up and feed different values.

See Flexible typography with CSS locks for the code. Currently the technique does result in a value with a unit, although there is standards work going on to bring in a method to produce unitless numbers.

The role of the typographer has changed. We no longer decide; we make suggestions. – Tim Brown

So what suggestions can we make?

  • Dark modes – when you reverse contrast, you usually want to make the type thicker or thinner depending on the device DPI. There are media queries to allow this (see CSS Tricks: Dark Mode in CSS and try out Roboto Delta)
  • Accessibility – people with low vision might like a higher-contrast mode, or someone with cognitive issues could benefit from wider word spacing and line height. These can be done with tiny amounts of code.
  • We can offer alternative typefaces with very little extra code.

So what happens when you hit something like IE11 support? For those features a browser doesn’t support dynamically, you can serve static compilations.

This tech is enterprise ready – IBM is as enterprise as you can get and they just released IBM Plex Sans Variable – while it’s a big font at 233kb, it has tremendous support across languages.

There are new features coming like scroll snap and CSS enumeration, which give really powerful typography options. We can start typesetting book-style layouts that swipe left and right, all in the browser. This opens some really interesting options in ebook publishing.

Plus you can animate transitions between properties!

We have the ability to be more reactive to our users’ needs and more expressive with the language we put across. We can be more true to the brand and avoid poorly substituted typefaces. To thine own brand be true!

v-fonts.com has a great collection; there are many others published separately on github as well.

@jpamental | slides | rwt.io

Resources

The following resources were mentioned during the presentation or are useful additional information.