Copy

Web Fonts &
Typography News

Issue #27 • 9 September, 2019

I’m back in Rhode Island for a couple of days after a long flight back from Tokyo. Apparently I got out just in time before Typhoon Faxai blanketed the region and gave some of my friends an extra couple of days there. Thankfully the storm has moved offshore, but not before causing some significant damage, power outages, and flooding.

While I didn’t get to see as much of Tokyo as I would have liked, what I did see was simply magical. Wonderful people, delicious food, and nearly 100 inspiring and illuminating talks.

Next up is Web Unleashed in Toronto where I’ll be teaching another workshop, giving a talk, MC’ing one of the main tracks, and giving the conference wrap-up at the end of the event. An event I’ve spoken at a number of times, it’s always one of my favorites. I hope I’ll see some of you there!

Until next time—domo arigato, and thanks for reading!


Cheers,

Jason

Replies go straight to my inbox—let me know what you want to learn!
 

Today’s Tip

ATypI Tokyo: In-Variably interesting

There’s no way to adequately sum up what a magical week this has been. A combination of a completely new place and cultural experience, reuniting with a community of friends I only see once or twice a year, and dozens of talks full of fascinating details, delivered with passion and care. It is a truly wonderful experience, and has been so each of the past 4 years I’ve participated. 

It’s a bit different than the web conferences I’m more frequently attending: the talks are mostly only 20 minutes (I might have gone a little over), and are presented back-to-back in blocks of 4 or 5 talks, punctuated by coffee breaks. The days were long too: the first talks started at 9am, and some days didn’t finish until almost 7pm. When one conference is trying to represent ideas, research, and innovations of a global type community, there’s a lot to cover. I may write more, but since there were some very significant developments in the world of variable fonts and the web, I thought I’d start with those.

ATypI Stage
The ATypI stage

Day 0: W3C Web Fonts Working Group

The day before the conference started we had our first in-person meeting since formally starting up work on Progressive Font Enrichment. I’m happy to say that a lot of progress has been made in testing ideas, developing research and testing frameworks, and validating the different technological and research directions we’re going to pursue. While it’s still going to be 6 months at least before we start to see some of the results, we came away with clear goals, tasks, and deliverables. Group members Rod Sheeter and Garret Rieger from the Google Fonts team gave an update during the main part of the conference, and I’ll send out a link once the video is available.

Day 1: Workshop

My workshop on using variable fonts was a really full house, with nearly 30 attendees. A mix of type designers, graphic and UI designers, and even a few folks from the sales side of some type organizations were all eager to learn about what can be done on the web with variable fonts. Since there was only one or two web developer and engineers in the room, we did have to adopt more of a show-and-explain approach.

During the course of the day I built up an example page, explaining the code and purpose as we went along. With a healthy does of time dedicated to questions and conversations, it ultimately didn’t seem to matter that people weren’t doing a lot of coding along. I was really pleased to have folks from several foundries (including Monotype), and a new friend from the Google Fonts team in attendance as well.

Workshop students
Students in my workshop (photo courtesy of ATypI)

Day 2: Give me 148 million reasons

Perhaps one of the most significant revelations of the entire conference (to me anyway) was one that has gone virtually unnoticed thus far: Designer Irin Kim and engineer Nathan Williams revealed that Google Fonts has been serving a variable version of Oswald to users who can see them, on sites using enough different weights to warrant it, for months now. 

To the tune of around 148 million times a day

The site owners likely never even knew: they simply called for Oswald, set up their CSS, and went on their way. Wherever appropriate, Google Fonts started serving the variable version of the font, and nobody noticed. I think that’s absolutely perfect, and showcases something I suspected would be true: in the right circumstances, variable fonts can be a win even just being a better version of what came before with regard to performance.

Irin Kim introducing the Recursive variable font
Irin Kim debuting Recursive, a lovely new typeface from Stephen Nixon

Then Irin dropped another surprise: she introduced a new variable font they’ve been working on with type designer Stephen Nixon called Recursive. It’s a beautiful design that can flip between mono-spaced and regular, slightly curvy to a bit more straight-laced. It has a number of different axes, and really makes for a beautiful design, with a wide range of voice. They’re working on a new specimen site (it will be their first for a variable font!), and you can also download the font on Github.

Finally, Nathan left us with something else that’s pretty major: Google Fonts has launched a new version of their web font API that supports variable fonts! I’ll be digging into that this week in preparation for my workshop and talk at Web Unleashed in Toronto starting on Thursday, so more details on that soon.

Avoiding the fallback Faux

Type designer Irene Vlachou and Axis-Praxis creator Laurence Penney gave a talk on their new undertaking: Faux Foundry. Conceived as a way to handle missing Greek glyphs in web fonts (a surprisingly common problem across the web), this service helps sites serve better results and avoid having characters show up on fallback fonts when the main one has an incomplete character set. The solution they’ve created examines the main font and creates a small variable font and corresponding CSS to supply a font that goes right in the stack between the primary font and the fallbacks. It contains all of the glyphs that are missing to support Greek text, and the variation axes are already set to match the main font remarkably closely.

Image of corrected and uncorrected text
Notice how on the left the Greek text blends with the Latin characters so much more smoothly than on the right

While developed specifically for Greek, it’s immediately clear that this clever, innovative approach could solve for a tremendous number of problems like this one even at the OS level. Be curious to see what happens with this one.

Grammato and the future of writing

The smart fellas from Underware are up to their tricks again, this time with a new evolution of variable fonts and the teaching and representation of writing. I won’t be able to do it justice, so you’ll have to check out their site, and I’ll post a link to the video when it’s available. Totally worth it!

Akim, Bas, and Sammi on stage talking about Grammato
With the launch of Grammato, Underware has changed the conversation yet again: this time about the blurring lines between handwriting and typography

A call to the type industry: what the web wants

After seeing the response from the web community this year to variable fonts, I felt I needed to convey that enthusiasm to the type designers and foundries at ATypI. But in order for variable fonts to be more easily adopted, we need type designers to use weight and width axis values that work easily with CSS. It’s not a requirement, but will make adoption much simpler and provide better compatibility in scenarios where the fonts might not load or be supported. This is a critical aspect of how the web is meant to work. 

We also could benefit greatly from fonts with an optical size axis. While certainly not as simple as adding width or weight, the design flexibility and enhanced legibility across size ranges will greatly increase the opportunity to create typographic systems that just use a single typeface. Grade is another axis worth exploring more, as it can hep address accessibility needs and is tremendously helpful when designing interface animations.

Photo of me during my talk

It’s about showing up

Beyond just font features, we need participation. The variable font format was introduced by four of the largest companies driving the web: Adobe, Apple, Google, and Microsoft (with substantial efforts from others, but those were the 4 on stage). In the past three years however, visible signs of support have been uneven at best. Browser support came along very quickly, but then things seemed to stall. Adobe introduced variable font in Photoshop and Illustrator, but it’s generally at ‘rough beta’ level of reliability. There have been some bright spots recently with Monotype’s recent font releases, and a huge step forward with the developments from Google. 

We need more

It shouldn’t be left to three or four individuals to promote variable fonts and encourage their adoption. We need more educational documentation, accurately written, and put where users will see it (meaning on the major sites like Google Font’s site, in the Monotype Mosaic and Fonts.com interfaces, etc). And we need partnership. As John Maeda pointed out in his opening night keynote, just because you build it doesn’t mean anyone will come. Likewise, just making a variable font and putting it up for sale on your site does nothing—and understandably nobody is buying them. 

But that’s because nothing is being done to market them. We need to work together to leverage your knowledge of the fonts (and which clients are using them), and our knowledge of the web. Let’s pitch together and get a few clients excited. It’s not just me either: there are a number of web folk who would be thrilled to help. 

Together we can get clients excited, and help their team with the implementation, ensuring that they are working with the best format (it should always be WOFF2 for the web), that the font is properly subset and optimized for their needs, and that they are integrated into the HTML and CSS in the best possible manner. Once there are a few more sites to point to and case studies to showcase, momentum will pick up even more. I’m encouraged by the reactions I’ve seen, and grateful for those who have approached me already since I gave the talk. I have no doubt that there are great things to come.

Resources

Web Type News

Does your organization need a boost?

If your brand voice needs some volume, or your team could use a hand improving font performance—maybe you could use a Type Audit. I work with you and your team to identify how well your site’s voice aligns with your brand, and can show you how to improve how quickly it gets on screen on any size device. Read more about Type Audits and let’s talk!

Upcoming Events

  • Teaching a full-day workshop and giving a talk on variable fonts at Web Unleashed in Toronto on September 12-14
  • Heading to Edinburgh, Scotland, for Finch Front-End to talk about Dynamic Typography and Variable Fonts on September 23-25
  • Giving a talk on variable fonts and editorial design at RGD’s Design Thinkers Toronto October 24-25
  • Hopping from Toronto to Denver for An Event Apart October 28-30
If the typeface in this message has Georgia on your mind, you're not seeing the web fonts :( I'm hoping that you're seeing it set in the lovely Roslindale (Display Condensed and Text) designed by the amazing David Jonathan Ross for his FontOfTheMonth.club. You should check it out!
Website
Twitter
LinkedIn
Instagram
Copyright © 2019 Jason Pamental, All rights reserved.


Forward to a friendSubscribe
Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list.

Email Marketing Powered by Mailchimp