(remove this text)

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!



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

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.

A sample page on CodePen loading Hepta Slab and Crimson Pro as variable fonts from Google Fonts' new API

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.

Variable font examples on Google Fonts
Here are all the different variable fonts you can play with for now

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:

<link href=",wght@0,200..900;1,200..900&display=swap" rel="stylesheet">


@import url(',wght@ 0,200..900;1,200..900&display=swap');

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.

p {
  font-family: ‘Crimson Pro’, Georgia, serif;
  font-weight: 350;

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.

The sample page shows a nice range of weights in the Hepta Slab-set headings, and regular and a slightly bolded italic in Crimson Pro

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 :)


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

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 You should check it out!
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