Designer, tinkerer and typographer Jason Pamental joins me to chat about what creative possibilities variable fonts bring. We also dive into web font performance, how to improve loading speed with practical tips, and why this all will become obsolete in the nearer future.
From this easy going conversation, you’ll learn:
- What’s different with typography for screen design.
- About the most common typographic challenges on the web.
- What effect bad web typography has on people.
- About the adoption of variable fonts in 2022.
- A brilliant answer to my mean closing question, “Comic Sans or Papyrus?” 😂.
Jason Pamental is principal design at chewy.com. I follow him since years on the topic of web typography and see him as someone at the intersection of design and technology. Jason is sharing his learnings in talks, his blog and is also part of the W3C web font working group.
Listen to the Podcast
Next to the video on YouTube, you can also listen to this episode audio only. You can find it on Apple Podcasts and Spotify, or simply listen to it here:
Talking Points
00:00 – Introduction
03:26 – Greeting to Jason Pamental
06:40 – Load web fonts correctly, style fallback fonts
11:07 – How web typography is different
16:07 – Variable Fonts in a nutshell
18:15 – Adoption of Variable Fonts in 2022
25:31 – How fonts change the personality of a UI
29:34 – Variable Fonts and optical size
33:55 – Jason’s job as a principle designer at chewy.com
36:12 – Creative possibilities with Variable Fonts
39:53 – Improving font loading performance
46:19 – Progressive font downloading in the future
49:50 – Rapid Round of questions
53:00 – Goodbye
Common typographic problems on the web
Jason says the modern web shows many typographic challenges, because it’s not routine for web developers or UX designers to take a typography class. This is why we see things like:
- Tons of centered text, which is harder to read when it’s more two lines.
- Really long lines, that are hard to follow.
- Text set in too light color.
- Too small or not resizable text.
This all results in making it harder for people to trust a website or find the information they need to make a purchasing decision.
What you can use variable fonts for
Variable fonts are the new standard, but they don’t seem to be very creatively used, except for some fancy conference websites or other artsy stuff. They can bring a reduction in file size, but this is not the exciting part. Some examples we share how you can use variable fonts (if the font provides it) are:
- Adding text animations and making typography alive.
- Optical sizing that will automatically adjust the text to the given size.
- Typography for dark mode can be fine-tuned by making the weight slightly lighter.
- Defining what bold or light means as a designer by making it exactly as thick as you want it to be.
Improving web font performance
Jason’s tips on reducing web font file sizes are:
- Use Wakamai Fondue, to see what characters, scripts and OpenType features are included in a font file. See if there are things you don’t need for your design. Like superscript, subscript or small caps, if your font file includes it.
- Use a subsetting tool like Glyphhanger to remove the unnecessary characters, OpenType features, and scripts.
- Load fonts with
font-display: swapand style the fallback fonts. Font Face Observer is a fast and simple web font loader for that.
Only do that if the font license allows changing the font files. This will often be prohibited with commercial fonts. When it comes to free fonts, it will be most likely okay. But always check. If you’re not sure, contact the foundry. Find a deep dive into font loading at Jason’s website.
Quotables
“If you don’t put the text up in a clear, readable, engaging and accessible way, then you’re missing out. Your reader is missing out.”
“There is an aspect of typography that is grounded in the hundreds of years of history and there is an aspect that is completely unique we have to address for screen design.”
“When we design something for screen, we don’t even know what the paper size is going to be.”
“It’s harder for someone to read when their eye can’t go back to a consistent place on the next line. This slows people down and makes it harder for them to trust a website.”
“With a variable font the browser does not artificially alter the typeface. Whatever axes or variations are included, those are the things we can change.”
“A lot of people miss about variable fonts that they are intended to work seamlessly with our existing CSS.”
“Optimizing images is really important, but the mileage you get out of loading a font resource impacts the display of every word on every page.”
“Not loading the fonts right in the first place is the oldest problem in using web fonts. And it is solvable since 2010 and still it seems like it’s brand new to people. So use a web font loader and a class to style the fallback fonts.”
Typefaces mentioned
Roslindale by David Jonathan Ross
Gordiata by Type Atelier
Case by fontwerk
Dubar by CJ type
Literata by TypeTogether
Pangea by fontwerk, my Pangea Review
Proxima Vara by Mark Simonson
Links
Jason’s Website
Jason on Twitter, Strava, or Instagram for dog pics 🐕
The conversation with José Scaglione
Should I do a video where I show some use cases and examples of how to apply a variable font in a design? Would you be interested in that? Let me know in the comments below!
I wish there where more fonts with a “Mono” axis. One of my favourites is Recursive Mono (https://www.recursive.design) simply because of the fact it has that feature. I’m a developer and most of my published writing consists of 50% text and 50% code.
Maybe you want to do a video or segment on how to pair a monospace font with a proportional? I’d be very interested in reading it. There are quite a few tutorials out there on how to pair fonts, but I havn’t found much on how to pair “normal” text with programming code in a monospace font.
Thanks for sharing your thoughts, Pablo! I used a great typeface recently with a mono axis for my personal site, it’s Bakemono, which can be proportion or monospace. In this review I touched on using monospace, but I could definitely dig more into it. Especially when mixing it with another typeface.
Really like your site! Especially how you treat your headings. Very cool. In the body text, I think it would also benefit from a max-width, so your lines don’t grow too long. Kudos for your unique design 🤩!
I have just discovered your articles, and no doubt, they are awesome. Already read 3 articles.
I was wondering what font you are using for the body text and for the heading as well.
Do you have any blog on these fonts as well?
Keep up the great work and thanks so much for the insane value.
Thank you, Mubin! The typeface for the body text is called Piazzolla, the one for the headings Magnet. I also wrote about the process of updating the typefaces here, which might be helpful to you 😉.