Hi friends 👋🏻

This week's topic: font selection, and how to make sure you're balancing beautiful typography with website performance!

This is part of a series in which I'm writing about the process of refreshing the Blue Hills Digital website.​ I introduced the project in my Digital Landscape email on May 20. If you missed it, read that email here!

Want links to recent emails or a sign-up link to share? Go to The Digital Landscape sign-up page​

---

Your font selection shows up everywhere.

First, when you pick a font (or fonts) to use, you're probably not just focused on a website project. Most organizations want consistent typography across ALL of materials, which means your website, print materials, physical signs, social media graphics, merch, etc. So this is BIG DECISION.

Along with the colors you choose, font is another big component of your brand identity. Typography contributes to the feel of your brand. Exciting. Technical. Loud. Formal. Friendly. Calm. All need different fonts to convey those impressions, and it would be hard to elicit one of those feelings if you picked the wrong font.

For my refresh of the Blue Hills Digital website, I don't need to worry about print collateral much. I don't have an office with a big sign. I rarely print anything. I realized at a Consultants4Good meetup last week that I don't even have business cards any more! My choices really just impact the website, and other digital assets like this email newsletter, and any graphics I share on social (not much ...)

Why does font selection matter for a website project?

For a website specifically, choosing fonts really matters. Here is what's at stake:

• Readability and accessibility. You want users to be able to read your content comfortably, right? Choosing an overly decorative font or using too many different fonts can result in confusion, poor readability, and challenges for users with visual impairments.
• Site performance. Custom fonts have to be fetched and loaded by a user's browser before a webpage can be displayed. The more custom fonts you use (including variations of a font like different weights and styles), the more you risk slowing down your website for visitors.
• Performance across browsers and devices. Some fonts are designed for use on the web, and will render consistently across different browsers and device types. You don't want to rely on a font that cannot scale down to be readable on a narrow mobile screen.
• Brand identity. We already covered this above, but you want consistency between the fonts used on your website and your brand identity as it exists offline. This helps build trust and familiarity, making your brand easily recognizable.
• Licensing. Remember that some fonts require a paid license to use, and you could face legal issues by loading proprietary fonts without permission. Using open-license fonts is an easy way to avoid this.
• Language support. If your site includes multilingual content, check that your fonts include all the necessary characters for translated content!

How do fonts get included in a website?

Fonts live in files. They have their own file formats, like OTF, TTF, WOFF, and WOFF2.

For a font to be displayed on your website, in a user's browser, the font file has to be available so the browser knows how each character should be displayed. In some cases, the font file might already be installed on the user's computer or device. In other cases, it might need to be fetched from a remote location before the webpage can be rendered.

Here are the four options to consider:

1. Web-Safe Fonts. These are pre-installed on most operating systems: think of Arial, Times New Roman, Verdana. Because they're pre-installed, your website can just load them directly from the user's device. This means they are fast, and very consistent across a variety of browsers/devices. The downside: there's a very limited set and you're not going to get the unique look you're probably going for!
2. Web Fonts. Similar name, much more choice! Web fonts are hosted online, and are loaded by the browser when your site loads. Be aware that this external request to fetch font files can slow things down. Some are free and open to use, like Google Fonts. Others may require a paid license, like Adobe Fonts. Some website platforms include built in integrations with web font providers, allowing you to pick from a font list that includes Google Fonts, for example. Google Fonts can also be downloaded for self-hosting, which leads us to ...
3. Custom, Self-Hosted Fonts. This approach involves you uploading a set of font files to the server that hosts your website, giving you full control over licensing and site performance. You might use this approach if you purchase a proprietary font license. You might also choose this approach to self-host a Google Font, which unlocks some performance improvements.
4. System Fonts. Finally, it's important to note that you can just instruct your website to use the "system font" of the operating system on the device your website loads on. Bear in mind that MacOS and Windows have different default system fonts, so the display will be operating system dependent. This usually isn't a great option from a design point of view, but it's very fast and can be a good fallback option.

What choice am I making?

The current Blue Hills Digital site uses two Google Fonts:

• Cabin, for headlines
• Open Sans, for body copy

There's nothing wrong with these two I don't think. I'm loading them both in a way that has minimal impact on site performance.

Over time, however, I've come to dislike Cabin, and since this is my own website, I get to make changes based on a whim, without needing to build a business case for my boss 🤪

I've landed on Hanken Grotesk, an open source sans-serif typface that has a full set of weight variations and characters. It's also available via Google Fonts, and I will self-host the font files I need for optimal performance.

In the mockup above, I'm using Hanken Grotesk for the headline, the body copy, and the breadcrumbs and pills. To my not-a-professional-designer eye, it works as a single font across all of those cases.

I think I can get the visual distinction I'm looking for between headlines and body copy just by adjusting font weight, size, and capitalization. And I appreciate the simplicity of only having to load a single font.

If you're a professional designer and think I'm making a huge mistake by not selecting a secondary, separate body copy font, now is the time to let me know!

More font and typography resources for websites!

If you need to understand this in more detail, here are some reading recommendations:

• ​Web Fonts: The Ultimate Guide to Typography in Digital Design​
• ​Web.dev: Best practices for fonts​
• ​Self-Hosting Google Fonts in WordPress: A Step-by-Step Guide​

---

P.S. I appreciate that Google Fonts is using the Universal Declaration of Human Rights as its placeholder text 🕊️

---