Web Fonts: When You Need Them, When You Don’t

You may have noticed a recent shift away from fancy, web-based fonts served up by Google, TypeKit and the like, back to system based fonts (think Georgia, Courier, and Verdana). Facebook, Twitter, Gmail, eBay, and even WordPress Core (more on that here) use system fonts throughout their interfaces, primarily to fall in line with a device’s native font for a more consistent user experience.

Why the shift?

As a designer, it seems so limiting to only have a small collection of typefaces to choose from when defining website styles. But there is good reason to support the use of system based fonts – such as a faster load time, better language support, potentially increased legibility, and elimination of that awful FOUT (flash of un-styled text on page load) to name a few.

That being said, there are times when a web font is absolutely necessary to use, for instance in support of branding guidelines and developing a consistent look and feel across mediums, regardless of device.

I’m not a fan of sweeping statements like you “should” or “shouldn’t” use web fonts, but I think there should be some sort of guidelines to help people decide whether or not to use them.

Source: Web Fonts: When You Need Them, When You Don’t – Hacker Noon

So when should we use web fonts?

Before you decide to use a web-based font on your next project, and presumably begin searching through hundreds of options on Google or TypeKit, take a look at David Gilbertson’s infographic to help guide your decision. You might find yourself reverting back to a system based font sooner than you thought!

Mary Beth Amaral

With a keen eye for detail, Mary Beth dreams of a pixel perfect world. After graduating summa cum laude from the University of Massachusetts Dartmouth with a BFA in Graphic Design and a minor in Art History, Mary Beth’s love of learning sent her back to her alma mater where she further explored her passion for information architecture and user experience, earning a degree in Web & Interactive Design.

| @maryelizabeth55