Member-only story

Web fonts done right

How to properly configure web fonts, optimize for fast flicker-free rendering, and avoid tofu bloopers.

Joe Honton
UX Collective
12 min readJul 22, 2020

Web Fonts!

When using web fonts we must carefully avoid its hidden pitfalls. To do this designers, frontend developers, DevOps, and authors each have a role to play in creating a great end-user experience.

  • Designers need to establish font stacks that can realistically be delivered to users over restricted bandwidths.
  • Frontend developers need to pay attention to CSS rules that can speed things up.
  • DevOps needs to make sure font files are fetched at the right time, and cached aggressively once downloaded.
  • Content authors need to let everyone else on the team know about special glyphs and foreign language character sets that they use.

Here are some practical tips and strategies for getting fast accurate typography using real-world network bandwidths.

The @font-face rule

Let’s begin with a typical example. The designer chooses a typeface for their website articles with a careful eye for readability. The designer then declares the typeface, size, leading, white space, and color using CSS like this:

article {
font-family: 'Source Serif…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Published in UX Collective

We believe designers are thinkers as much as they are makers. Curated stories on UX, Visual & Product Design. https://linktr.ee/uxc

Responses (1)

What are your thoughts?

Simply superb, Joe. I learned a lot of good habits, and a couple neat tricks. Thanks for the great article!

--