A presentation at Adapt Team Tech Talk by Jason Pamental
Graphic designers have customized layouts and title pages in magazines for decades. But, between the limited technology of the early web, and our race to systematize design once we had sufficiently capable technologies, we’ve missed out on much of what good graphic design has to offer. Now that we’ve designed our systems, polished our patterns, and perfected our pages, it’s finally time to refocus on the specifics. With scaling typographic systems, we can leverage the power of modern CSS and variable fonts to create compelling, unique design variations tailored for the content they render. In this talk, Jason will look at powerful examples of publication design, and explore how many of those concepts can be incorporated in our own work in compelling and sustainable ways.
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.
A site devoted to explaining how variable fonts work and teaching how to implement them well, including using the Google Fonts API t get all of their variable font goodness.
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.
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!
Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
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
The original variable fonts playground.
Nick Sherman's variable fonts catalog site
Simple drag-and-drop web interface to discover all the features available in a given font file.
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)
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.
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 variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
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.
