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.
— Web Directions (@webdirections) April 11, 2019
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.
A weekly newsletter I publish with tips and resources about web typography.
Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!
Great run-down on different techniques for dealing with day/night modes on the web.
I guide I wrote on the MDN site covering the basics of implementing variable fonts.
A collection of demos I’ve created on CodePen for you to play with!
Lots of links, articles, books, talks and whatnot
Good for less techy and more designy/brandy folks as well.
Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let’s all agree that the variable ones are way cooler)
Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.
Simple drag-and-drop web interface to discover all the features available in a given font file.
It’s an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
The original variable fonts playground.
(Variable font is a beta, but you should ask them about it and tell ’em I sent ya)
Nick Sherman’s variable fonts catalog site
David Jonathan Ross’ design is what forms the primary typography for the talk and for my own site.
This is a fantastic typeface, and it was a real treat to design the demo page for it’s introduction.
One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
Read up on the features and issues, provide feedback, and help shape the direction of the web