Make sure you get the web fonts! You can always view this email in your browser.

Web Fonts &
Typography News

Issue #14 • 17 May, 2019

Greetings from New York City! I started this on the train down from Providence, and finished up after attending a great talk by David Berlow on parametric variable fonts at Google. It was nice to catch up with David a bit, and see some other familiar faces.

The main reason I’m here in the city is to teach a workshop on using variable fonts at Type Directors Club. We have a nearly-sold-out class full of a wonderful variety of designers, educators, and front-end developers, from agencies to media companies to large eCommerce sites. It should provide fodder for some fascinating conversations!

I should be able to pass along a link to video from David Berlow’s talk soon. Next up is a quick trip to San Francisco, and in next week’s issue I’ll have some additional news to share on another workshop and talk in Toronto this fall.

Until then, have a great week!

Cheers,

Jason

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

Today’s Tip

Variable fonts and quirky custom axes

Now that we’ve covered the basics of what variable fonts are, how to implement them, and a bit more about what we can do with them to improve the reading experience, let’s focus on some fun. While the registered axes are the workhorses of everyday use, the wonder of the format is its extensibility. Any type designer can declare a new custom axis for their own font, and expose whatever aspect of the typeface that wish to vary. This week we’ll take a look at a few that can help showcase just how much is possible.

Shadow dancer

David Jonathan Ross’ FontOfTheMonth.club release Extaordinaire has two variable fonts paired together: the regular version with a weight axis, and a shadow version that has both weight and shadow distance axes. This allows for creating a beautiful Art Deco-inspired shading effect, letting you add the shadow as separate text that can even be animated or colored separately from the main text. Have a play around with it on CodePen too.

Extraordinaire-y stylish, with complementary shading

Custom axes are always set using ‘font-variation-settings’, and according to the CSS specification, the four-letter keyword should always be upper case.

.shadow {
  font-family: "ExtraordinaireVariableShade";
  font-variation-settings: "SHDW" 32;
}

Dripping with style

Cheee is a variable font from OhNo’s James Edmondson that has axes for Yeast, Gravity, and Temperature. Mandy Michael made an awesome animated demo with it, and I’ve linked to a copy of that which I tweaked a bit more. It’s super fun to play with, and is just begging to be used in your next B-movie horror film site.

Cheee from OhNo has crazy-sounding axis names like Yeast, Gravity, and Temperature

You might notice below that the keywords are in lower case. This should likely be corrected, but it’s embedded in the font that way so it’s a bit of work in the part of the type designer to sort that out.

.oozing {
    font-family: "Cheee";
    font-variation-settings: "temp" 1000, "yest" 1, "grvt" 500;
    animation: variation 10s linear infinite;
}
@keyframes variation {
    0% {
        font-variation-settings: "temp" 0, "yest" 1, "grvt" 500;
    }
    50% {
        font-variation-settings: "temp" 1000, "yest" 600, "grvt" 1;
    }
    100% {
        font-variation-settings: "temp" 0, "yest" 1, "grvt" 500;
    }
}

Growing up and growing down

Another DJR FontOfTheMonth.club release is Rhododendron. The expanded bonus variable font came with a weight axis and two additional axes for the height and depth of the ascenders and descenders. Varying them has a dramatic effect on the visual tone, and can give some really wonderful character, especially if you try animating it ever so slightly. You can play around with all three axes in the demo on CodePen.

Rhododendron has a weight axis and two others that control the height and depth of ascenders and descenders

Thanks to the weight axis, a <strong> tag was all that was needed for the bold weight ‘Rhododendron’—and font-variation-settings helps us with the rest.

p {
  font-family: "Rhododendron";
  font-variation-settings: "ASCN" 225, "DESC" 150
}

And just a little bit more

These are really just the top of the variable iceberg. There are already a slew of interesting offerings both free and paid on Nick Sherman’s v-fonts.com site. Here are a few in particular that have caught my eye:

Wind from Typotheque:
Jabin is free to use from Frida Medrano (with some serious swashery)
Underware has an amazing variable fonts playground

Underware sent me a test page to showcase in a talk last year, and the axes in this one are time (to draw in the text), and ink spread as the letters fill out

Resources

Web Type News

The 2018 edition videos from Robothon are up on Vimeo. This is one of the best conferences on type design and type technology, and the presentations are some of the best you’ll see
Zach Leatherman’s talk at this year’s Beyond Tellerand conference on web font loading performance is chock-a-block with smarts, and you can watch it online here

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

I’ll be talking variable fonts and lots more at CSSconf EU in Berlin on May 31st
Heading to Barcelona on July 17th for CSS Camp to chat about dynamic typography and variable fonts
Winding up in the Windy City for An Event Apart Chicago on August 26-28

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!

Web Fonts & Typography News