A presentation at Finch Front-end in in Edinburgh, UK by Jason Pamental
Modern developments in CSS make it easier than ever to create robust, scalable, elegant typographic systems on the web. Add variable fonts and the design, technical, and performance benefits are really exciting. We’ll look at how to combine them with other CSS capabilities like custom properties, calculations, and grid to create 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.
I’ll also be showing the road ahead for web font performance with a sneak peak at what the W3C Web Font Working Group is researching, including a live demo of Google’s proof-of-concept showcasing the font serving speed increase potential.
[Note: the embedded presentation isn’t quite perfect in how it scales, but it’s at last mostly readable :)]
The following resources were mentioned during the presentation or are useful additional information.
A weekly newsletter I publish with tips and resources about web typography.
Fascinating variable font solution to missing greek glyphs in web fonts.
No, a font called Recursive. And it’s variable. By Stephen Nixon for Google Fonts. It’s lovely, and you should try it.
Very early, very beta, very awesome: serve variable fonts from Google.
This was inspired by a discussion with Marcy Sutton, Val Head, and others about how to design for light modes, while still allowing the user to express a preference which can then override the general OS preference. I think it’s a useful pattern for other kinds of user preferences like ‘prefers reduced motion’ as well.
I wrote about these techniques in detail in my newsletter a little while back. Lots of details and links to more demo code.
Mandy created a really great JS method for using JS with a CSS custom property to scale font weight based on viewport size. Will definitely be looking at adding this to future projects!
This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on the web.
Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
This is my remix of Jeffrey Zeldman’s news typography demo that he created for the Poynter Institute, adding in a whole bunch of responsive typography and variable fonts.
Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!
Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.
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)
It's an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
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.
(Variable font is a beta, but you should ask them about it and tell 'em I sent ya)
Simple drag-and-drop web interface to discover all the features available in a given font file.
The original variable fonts playground.
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
One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
The following code examples from the presentation can be tried out live.
Here’s what was said about this presentation on social media.
