What the font?! Web Fonts VS Web-safe Fonts

Choosing web-safe fonts for your brand

One of the challenges with designing for web is that designers don't have total control over how a font might display across various devices, email clients, or organizations with multiple operating systems.

This is why you might see a web-safe font designated for your brand to use alongside your main brand font or brand web font. Typically, your designer will select a web-safe font that is as close to your brand font as possible or complements your brand and existing font selections. This helps create a consistent look and feel across your digital and print brand elements. Designating an alternate font that comes default across all computer types provides designers control over the look and feel and confidence that it will be delivered to the viewer the same way. It could be a perfectly lovely default font but if it’s not what you designed for your email it will display differently and not look on brand, polished, and could have any number of issues with size and spacing.

Web-safe, web fonts, web-slinger…?!? What does that all mean?

Web-safe fonts:
Web-safe fonts are fonts that can adapt to any system, platform or device. So even if these fonts are not installed in your audience’s computer they will still display properly and consistently. Some of web-safe fonts greatest hits are: Arial, Times New Roman, Verdana, Georgia, and Courier. (AKA The Classics.)

Web fonts:
Web fonts are fonts that are designed and licensed for use on websites and digital platforms. They are not always found on multiple operating systems, or all devices, and platforms. They can allow a designer more creative and unique options for their designs. Web fonts have some hot tracks too, like Montserrat, Lato, Neue Helvetica, Roboto, Pacifico, Merriweather and the list goes on!

How to start choosing a web-safe font that coordinates with your brand font:

Starting in the same font-family (serif, sans-serif etc) look for similar characteristics to your brand font. This includes characteristics like font weight, width, contrast, x-height, corner rounding, serifs or slabs, descenders and the list goes one. You'll want to find options that share some of the characteristics of your brand font!

Test it out! Set up your newly chosen web-safe font and your brand in the same kind of layout like an email and consider those type characteristics when looking for differences or similarities. You may

In the example above, we talked about the font Montserrat and the font Arial. Montserrat is a geometric sans-serif typeface while Arial is a neo-grotesque sans-serif typeface. Both fonts are:

• sans-serif fonts
• lower contrast
• have regularity and consistency to them

When viewed side by side although there are some style difference there are enough similarities in the letterforms to make this a suitable substitution. With a little design love, and styling a selection like this can help to make your digital communications look consistent and on brand!