Know Your Web Typography Options

Open any brand identity guidelines document and you’ll see that typography, along with color, logo, and imagery are the core elements of an effective visual design system. Together, these elements help create identity in brand communications.

Despite the obvious ubiquitous nature of the digital realm in communications, many organizations and agencies have yet to evolve.

Web typography is typically discussed as an afterthought, or even denoted in small print. Furthermore, it often focuses on “web-safe” fonts like Arial or Verdana. Given the many font options available today and widespread browser support for them, this line of thinking is a vestige of the past.

In this article, we’ll help you understand web typography options, why you should care, and some other considerations to know.

Beyond Print: Discuss Web Usage Early

We’ve seen organizations select fonts with print usage in mind, then decide to not use that font on the web due to the licensing model and ongoing expense making the look and feel of their online presence substantively different than their print materials.

Avoid finalizing a font selection for the brand before reviewing the licensing details with all decision makers. Be sure to consider web usage and the associated costs. Some fonts can be used unlimited in your digital communications, while others will incur ongoing fees that increase as usage goes up.

Take the time to review your options and be sure your organization understands the tradeoffs. For example, if your brand font will result in ongoing expenses that you cannot justify – consider a different font with an unlimited usage license.

Pick a font that meets all of your needs. Not just a sub-set of them.

Why Use Web Fonts?

You may wonder why you should bother using web fonts if there might be ongoing expense. For many years, brand fonts were not an option on the web and it was accepted that your web presence would look different than your print materials. Now, the options are seemingly endless. The availability of web fonts has grown significantly over the years as more foundries are offering fonts with license for web use which means you can now choose from thousands of web fonts.

There are several reasons we encourage you to use web fonts:

Brand Differentiation: Your visual design system sets you apart from the competition—this includes typography.

Brand Consistency: Using the same font across all your brand communications—from print to applications and websites—creates unity.

Brand Legitimacy: Your organization appears more professional if online and paper communications align.

Implementing Your Web Font

When it comes to implementing a web font on your site, there are two general options for implementing your font online:

• Option 1: Web Font Services
• Option 2: Self-Hosting

Option 1: Web Font Services

A common method is to use a web font service. These services handle the licensing and hosting.

Depending on the typeface, you may be limited to what font service you can use. Some such services include Adobe Typekit, Typography.com, and Google Fonts. Google Fonts is particularly noteworthy since all fonts in its catalog are free.

Choosing the font services option means that you will rely on third-party servers. This means if their servers go down, the fonts on your site may not load correctly. You may or may not be comfortable with that. At the same time, font services can make it relatively quick, easy, and inexpensive.

Option 2: Self-Hosting

While using a font service is like renting the font, self-hosting is more like owning the font. In this method, your site or application loads the font file(s) directly via font embedding.

Self-hosting allows you to place the font files within your system architecture and maintain control over them. The up-front costs of owning a font tend to be higher than getting started with a font service, but end up being more economical over time.

Again, depending on the particular typeface, your font choices may be limited to what you can license. Some such providers include MyFonts and Font Shop.

Technical and Other Considerations to Know

Page Load-Time

Web font file sizes can come in at some heavy weights—especially when multiple fonts, styles, and weights are used (e.g., thin, regular, bold). Always pay close attention when creating embed codes so as not to include font variants not required by the design. This can affect the speed at which your pages load.

Cross-Browser Compatibility

There isn’t a universal web font format that works across all browsers. Rather, you must provide several fallback font formats (TTF, OTF, WOFF, WOFF2, and EOT) to ensure all browsers are supported. Since multiple file formats are needed, it will drive up download time and can slow down performance.

Licensing Structure and Cost

As mentioned above, font licensing can be complicated and expensive. Take the time to review your options and understand licensing models. The various web font services and providers all have different pricing models to fit your needs. There are also many high-quality and well-designed free fonts available.

Sometimes Fall Backs Are Ok

There are times when a font service, or your own hosted fonts don’t load. This means the website needs to fall back on something close to a “web-safe font”. Basically, the website needs to find a font on the user’s system instead of the specified font which can’t load. It’s always good practice to have your fallback fonts specified and to ensure that they are standard fonts, but you’re certainly not limited to Verdana and Arial.

Typography plays an essential role in visual design. It can change the entire look and feel of a design system. Does your current brand identity guidelines include well thought out standards for typography for the web? If not, contact us to learn more about how we can help you create a more usable typography system.