Copy

(remove this text)

Web Fonts &
Typography News

Issue #10 • 19 April, 2019

I’ve just got back from my travels last night, and while I got a fair amount of a draft written on the flight back from San Francisco, I’ll admit that I spent more time napping than writing on the flight.

The Smashing Conference this week in San Francisco was completely different than any other I’ve attended or participated in as all the presentations were live demonstrations of some kind—no slides allowed! OK, there were one or two that used some slides, but all in all it was quite a display of expertise and humility by some of the best people in the industry. Everything from accessibility to design systems to performance debugging and more (including a blind challenge undertaken by Jen Simmons to code a layout from Chris Coyier that he handed to her on stage! See some of that here). You can see the code, resources, and some feedback on what I presented over on Noti.st. There will be different lineups but similar format in Toronto, Frieburg and New York later this year. If you have a chance to attend, I highly recommend it!

Next up for me is a few weeks at home digging in to a new project with the smart folks at Ad Hoc, and then up to Boston for An Event Apart in May. I’m also giving a full-day workshop on using variable fonts at the Type Directors Club in NYC


Cheers,

Jason

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

Today’s Tip

Weight, wait—don’t @ me

As I’m sure many of you do, I read a fair amount on the subject of web typography, performance, and design for the digital world in general. In doing so a bit more regularly since I starting this newsletter, I keep having some phrases jump out at me—and I’m increasingly saddened by their consistency. Over the years it has become pretty standard advice to minimize the number of different fonts you load for a given website design, and it’s advice that I’ve given as well.

But what I hear more often now is this advice couched in terms of ‘what is good typography’, rather than its truer origin: basic web performance. The advice goes something like this: ‘don’t use more than 2 or 3 weights of a given typeface in your design because that’s better typography.’

Except that is patently untrue.

Now, it is generally good advice to not use more than 2 or 3 typefaces in your design (such as Georgia, Helvetica, or Proxima Nova), as this does tend to give you a bit more harmony. But even that’s not an absolute. Let’s be clear: the motivating factor behind the previous phrasing is all about font download performance. It has nothing to do with what is or is not ‘good typography.’

I’ve also heard this line of reasoning applied from the inverse direction—implying that there’s no point in considering more than 3 or 4 fonts when discussing web platform technology evolution ‘since no-one ever uses more than that in their design.’ This simply completes the circular logic and perpetuates the falsehood. The greater danger here is if that statement is accepted as fact, then forward progress in web font performance could be seriously misdirected.

A history of misrepresentation

Since every weight or variant of a typeface is a separate file, it follows that if you wanted to use one for your body copy you would tend to want a regular weight, a bold, an italic, and perhaps bold italic. And possibly a fifth font for a contrasting header. That would mean you’re loading 5 different font files in order to represent the content on your site. Not everyone will opt to use web fonts for everything; for example, some will use system fonts for body copy. This tends to be the most people will include, because loading the font data takes time. And the more fonts, the longer it will take for the web site to render.

So it may be good advice in order to preserve better user experience, but it’s still not related to the quality of the typography itself. 

In truth, all you have to do is look to magazine covers to see what is more typical in a well-designed layout: often times you can see numerous weights and variants in a single layout—each one being used to match perfectly with the size, placement, and desired visual hierarchy.

Cover of Destiny magazine from July 2016

Look carefully at the typography on this cover. There are at least 3 weights of the serif, and 3 or 4 of the sans—plus some italics. Each one is used carefully to create visual tension and hierarchy, controlling the pace and guiding your eye. If you were to tally up the different faces, weights and italics it would be somewhere in the 8-10 range. Much more than would typically be allowed in our performance budgets.

If you want to talk about what is or is not good typography, head to your nearest magazine stand and look at the covers. Have a peek at Vanity Fair, Vogue, Atlantic Monthly—you’ll see just how good they are at modulating those characteristics to guide you around the layout. And while in some cases it’s about larger type and light weights, others it’s about smaller type and exploring just the right heavier weight: adding emphasis without reducing legibility.

Just as on smaller screens we don’t need as great a size differentiation to create hierarchy, we likewise don’t need as heavy a weight. This is as much about visual weight as it is about clarity: heavier weights at smaller physical sizes can be harder to read. Utilizing a 500 or 600 weight instead of the usual 700 for bold in those situations can be extremely beneficial.

Medium is the new bold

With that in mind, the downfall of our constrained font loading practice is there will likely be only one bolder weight of a given typeface available for use on your site. And that one weight might not be the best one to provide emphasis at any size. Let’s look at some comparisons.

While the differences are subtle, it can have a significant impact on legibility. The text on the right uses a single regular and bold weights. The text on the right subtly tunes them to accentuate the differences between headings and maintain slightly better clarity. You can see it in the browser here on CodePen.

Now, I’m not recommending that you all fo a sudden decide to add a bunch more weights of fonts to your site willy-nilly. But you could think about trying a variable font and using the weight axis to fuller effect. One of the things I’m most excited about is the ability to be more thoughtful about the relationship between weight, size, and relative proportion to the type around it. I know, this is the second week in a row I’ve mentioned variable fonts without really explaining them. So I’ll link you to an essay I wrote about them, and get into a bit more detail next week.

Don’t believe the hype

My main point is this: we need to stop conflating technical considerations with guidance about what good typography is all about. Just as I wrote about the relationship between font size, line height, and line length—weight must relate to size and surroundings. And the more nuanced you can be with that, the more polished your typographic system will become.

Until next time, set boldly. Or slightly less bold, as the case may be ;)

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

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!
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