Optimising web fonts - Part 1

It's been a busy couple of weeks here as Summer starts to take effect in Taipei. I've been working with the team behind the Readle language learning app to improve app performance. It's been a new experience working on an app. But it's also shown me that plenty of the techniques we use for web optimisation can be carried across. In the last couple of weeks, we've managed to more than halve the app start time and removed 110kB of unused data from each launch request. We're now working on speeding up other parts of the app to deliver an even better user experience.

In this week's newsletter, we'll launch into a multi-part series looking at some of the tricks and techniques to consider when optimising fonts for the web. This issue is more of a primer on the topic. We'll dive into more technical optimisation practices in the next few newsletters.

We've all been there. You click a link to an article you're keen to read, only to be left staring at a page devoid of text for an uncomfortably long time. Ensuring you've got the proper optimisations and loading strategies in place will help guarantee that your site's visitors don't have a similar experience.

Fonts and Core Web Vitals

Poor font loading can also negatively impact your Core Web Vital scores (especially for Largest Contentful Paint and Cumulative Layout Shift). This is even more important as we approach May 2021, when Core Web Vitals will start to influence Google search rankings. If you need a refresher on the upcoming update, you can read about it in Issue 4.

Largest Contentful Paint (LCP)

LCP measures the time taken for the largest above-the-fold element to be rendered on screen. This is most often a hero image/video or the main block of text. If you've got slow loading fonts, then there's a risk the LCP timing gets pushed out.

Cumulative Layout Shift (CLS)

CLS indicates the movement of visible elements as the user loads and interacts with the page. A popular font loading strategy is to use a fallback font first and replace it with a custom font once downloaded. However, this can lead to content on the page being moved around as the weighting and spacing of the custom font take effect.

Getting started with font optimisation

Font optimisation starts during the design phase of your website build. The fonts you use (or don't use) will determine the other optimisation steps you'll have to look at during development. Here are a few things to consider while planning your site.

Do you need a custom font?

Custom web fonts have allowed designers and brands to craft some genuinely beautiful web pages. That said, it's worth asking the people responsible for designing your website whether you can do without custom fonts for some or all of the textual content.

Systems fonts are the set of fonts that come preloaded on desktop & mobile operating systems (OS). They differ for each OS, but when configured correctly can provide enough fallback to deliver elegant looking web typography.

Here are some questions to ask when designing a new site:

  • Could system fonts be used for all the web page text?
  • Could system fonts be used for all paragraph text & a custom font be used only for headings?
  • If you need to use a custom font, could you just stick to one font family and use different weighting for headings and paragraph text?

Iain Bean wrote a nice article early last month that has some handy demonstrations of attractive system fonts. Systemfontstack gives standard code snippets for serif, sans-serif and mono typefaces. Font style matcher is a handy tool that can generate the code you need to have system fonts closely match popular web fonts. You can also apply the code to fallback fonts, which can help reduce CLS.

Are you able to modify the custom font you're using?

Some brands have specific typography requirements, which can mean there's no choice but to use a custom font. It's worth finding out if there are licensing restrictions that would prevent you from modifying the custom font being used.

Some of the techniques we'll cover in the following newsletters revolve around making changes to font files. This can deliver large reductions in file size, but some font licenses prohibit this practice.

If you do find yourself limited to using a particular font, then Wakamai Fondue is a terrific tool to help understand all the features that font possesses. It answers the question, "What can my font do?".

Can you reduce the number of font files required?

Traditionally, each font style is a separate file that needs to download. For example, you may only use the Open Sans font family for your site. To use the Light, Regular, Regular Italics and Bold variations you'll need to request four separate font files. This can increase page size and also block bandwidth that could be used for other resources.

Variable fonts are a solution to this problem. Variable fonts allow for multiple font variations to be served in a single file. By changing a few CSS properties we're now able to generate any combination of weight and style. All this without the need for multiple requests. Another upside of variable fonts is that they allow for animations and transitions to be applied to the font style, something that is not possible with traditional web fonts.

Though relatively new, there's pretty good support for variable fonts in modern browsers. I'd recommend checking them out, especially if you work with a highly creative brand. It gives designers a huge range of typographic options that just weren't possible before.

You can find and play around with variable fonts at Variable Fonts or Axis-Praxis. To learn more I recommend this great post on CSS Tricks.

Resources

Articles

The Mobile Performance Inequality Gap, 2021
A very interesting write up about the current state of low-/mid-range mobile devices. It goes into setting effective page resource budgets to deliver a usable experience to the majority of users.

The next issue of Optimised will be in your inbox on April 16th. The website has an archive of all previous emails. It's a good place to recap on anything we've covered, and also handy to share with friends or colleagues.

As always if you've got any feedback or specific topics you want to be covered then just reply to this email.

Keep safe, stay well.
Fershad.