A presentation at HMCT Design Educator’s Typography Intensive by Jason Pamental
This workshop will focus mainly on what is good typography with the advent of variable fonts and the necessity for the type and typography to react to screen size, ambient conditions, and user needs. We’ll explore a bit of what that means, and spend some time hands-on exploring at what can be done, and learn how to keep up with the technology and incorporate it successfully (and sustainably) into your curriculum, moderated by Gloria Kondrup.
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.
The most up-to-date techniques, specs, and support for implementing variable fonts.
An introduction I wrote for the annual 24ways Web Design/Development ‘Advent Calendar’ site. It’s got loads of embedded examples and code too.
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.
I wrote a bit about the new API and provide a bunch of sample bits. Very early, very beta, very awesome: serve variable fonts from Google.
I get asked a bit about where to go to start learning about typography, so I put together a collection of good books and resources to get you started.
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.
This is the first part of a redesign that I’ve been working on with Ad Hoc. Featuring two beautiful variable fonts and an entirely new design system that incorporates virtually all of the dynamic typographic techniques shown in this presentation.
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.
