Web Fonts &
Typography News

Issue #28 • 18 September, 2019

Home for a few days this week after events in Chicago, Tokyo, and Toronto, I’ve finally gotten some time to write up the demo I created for my workshop last week using the new Google Fonts API. I’m really excited to share that this week, and hope you enjoy taking it for a spin.

This week is still a busy one, with Rhode Island Design Week in full swing, along with a two-day NASAA leadership conference for state arts councils from around the country. Tonight is a pretty special honor: I’m being inducted into the Rhode Island Design Hall of Fame! Hard to put into words how I feel today. It’s really incredible.

This weekend it’s back to the airport though for a trip to Edinburgh, Scotland for Finch Front End. It’s a stunning collection of speakers. If you’re at all on the fence, jump off and join us!

And lest I forget, seats are filling up for my last workshop of the year at Beyond Tellerand on using variable fonts and loads of modern CSS techniques for scaling typography, light modes, and more. Another stonking-good lineup at a truly legendary event. I’m thrilled to be heading there for the first time, and hope to see you there!

Today’s Tip

Variable fonts & the new Google Fonts API

While I was at ATypI Tokyo a couple weeks ago, Google had some big announcements (I covered those a bit last week). The new version of their API was particularly great to hear, as this marks the first support for using variable fonts on their platform. It’s a small set of typefaces, but there is some nice variety and what they have is really well done. There are 10 typefaces in all, with a selection of serifs, sans, rounded, slab, and monospace. Two of the serifs have italics as well, making them an interesting experiment for body copy usage. I created an example page that we played around with a bit in my workshop last week, and included it live in my talk, both at Web Unleashed in Toronto.

I’ve now created a demo on CodePen as well, and will walk through the setup here with a few examples. As the launch announcement page states, the syntax is pretty strict, but it didn’t take long to get up and running with it, and now it’s feeling pretty snappy.

In going through the announcement it’s clear that this will eventually be how all the fonts are served, not just specifically variable fonts. You can still request a single weight of a font, like so:

You can see that the font-family attribute/value pair is the same, but the way you specify weight and italic is a little different. Here’s the current syntax:

You’ll note that whereas the original syntax just expected a weight value (in this case 700) after the family name, now you’re specifying ‘wght’ and supplying a value. This is so when requisition a variable font, it’s now possible to specify an axis (or more than one), and then supply a second set of values after the ‘@’ sign. Multiple weights can be requested too:

Note that the weight values are listed after the ‘@’ sign separated by semicolons. If you wanted to add italics, you have to specify each combination:

This will get you Italic and weight combinations of ‘upright 100’, ‘Italic 100’, and ‘Italic 700’.

Now for the variable fonts. To get Crimson Pro with a weight axis (with a range of 200 to 900), you would request it like this:

Note that this time the values after the ‘@’ sign are separated by ‘..’ which indicates that this is a range, not two separate values. When requesting Italics as well as upright, you have to indicate the axes and ranges requested for each:

Or just Italics with weight range:

You can either link to the request from the ‘head’ of your HTML page, or ‘@import’ from within your CSS.

The whole thing looks like this:

Or:

You can then work with the fonts just as you would if you were self-hosting, and be confident that the family grouping will be working properly as well.

Thus, with the code above any text in a paragraph would be set in Crimson Pro, and bold would be properly bold, and Italic actual Italics.

Have a play around with the demo, and try swapping in some of the other fonts they have available. Don’t forget to send a tweet to the @GoogleFonts team and let them know you’re interested. Public support goes a long way. And if you spot any issues, you can log them over on GitHub.

Until next time, happy varying :)

Resources

• Example on CodePen
• CSS2 Announcement

Web Type News

• Out a couple weeks ago is another gem from pal Michelle Barker on how to accessibly split text and animate it. Super smart stuff!
• The kind folks at Kilotype have just announced student licensing for their fonts that is truly exceptional in price and in allowed usage

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

• 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
• Berlin-bound for a workshop and talk at Beyond Tellerand November 13-16. Grab a ticket before they’re gone!