Web Fonts: They’re Awesome!

Not too long ago the Internet was an ugly place. People had the choice of a handful of system-standard fonts to use, and it made every website look kind of the same. There was no personality, warmth, or identity. Even if your company’s print assets were on point, your website looked like crap. A luxury resort used the same Times/Arial combo as your Uncle’s Area-51 Theory Geocities.

Designers are scrappy though, and developed hacks to bring their well-designed typography to the web.

Crappy Hack #1: Putting text inside of images

Okay, to be honest this wasn’t THAT crappy of hack— Hell, I did this every single day at my first job. By saving out your type in an image, and putting it on the site you were able to use all those great print fonts and unify your design system. The downsides of this weren’t immediately obvious.

In my mind, the biggest problem is accessibility for users with impaired vision. Blind users rely on screen readers to use a computer. (If you watched Daredevil on Netflix, you saw Matt Murdoch using one.) Screen readers are only able to read plain text, so any copy that’s embedded into an image is completely lost. Yeah there are workarounds for this, but now you have workarounds for your workarounds.

Matt Murdoch using a screen reader in Marvel's Daredevil on Netflix

Matt Murdoch using a screen reader in Marvel’s Daredevil on Netflix

If you’re worried about SEO, you should know that the Google bot can’t read images either. Any important content should be in text, or else you’re gambling with your ranking.

Another issue is that text inside images don’t scale particularly well. Maybe that pull quote looks awesome on your laptop, but on an iPhone the text is too small to read. Plus on a retina screen the text will look kind of fuzzy.

Crappy Hack #2: Using Flash.

At the time, this was pretty cool. Using a tool like Sifr or Flir, you could take text on your site, and through the magic of Flash convert it to a better typeface. Sounds great right? The biggest problem (besides accessibility) was that this was SLOW. Each character was individually converted into its own Flash object—which was inherently processor intensive.

I have some good news for you though: Modern browsers have changed everything. With support of better CSS standards, the web font market has flourished, and now your site can look as good as all other parts of your brand.

So if web fonts are awesome why am I writing this post? Working as both a developer and designer I’ve fielded a lot of questions about web fonts, and heard interesting arguments on why not to use them. To be totally honest, there’s a lot of bad information out there and I just want you to feel confident making your site as awesome as possible. Let’s tackle some of the arguments I’ve heard against using a web font.

Web Font Myth #1: Web fonts aren’t worth the cost.

Lies! If you consider the benefits of having brand recognition across platforms you see that it’s worth the cost to use a better font.

One of my favorite examples is the New Yorker Magazine. Instead of using a standard font, The New Yorker has brought their iconic NY Irvin off the pages and to the web. When a reader arrives on the page they immediately recognize that this is the New Yorker, not any other magazine site.

New Yorker Magazine comparison with and without web font

The New Yorker website with the custom webfont (left) and with the default font (right).

I was discussing this with some friends the other day and Lance Arthur described the value of a web font so perfectly. “Do you want to send your children out into the world wearing ill-fitting clothes, or do you want them looking clean and polished? Every day is school picture day on the web.”

“Every day is school picture day on the web.”

Web Font Myth #2: Web fonts pose a security risk.

You’re going to hear this from old school developers and anyone who did a stint in financial services, but don’t worry—it’s not true. The script that your font distributer asks you to include has a single purpose: tracking page views. Why do pageviews matter? It’s like how a musician gets a royalty every time their song plays on the radio. That script ensures that the type designer gets the compensation for their work. There’s nothing malicious going on—I promise.

Web Font Myth #3: Web fonts load slowly.

Okay, so this one isn’t a myth. Just like any other asset on your site (think images) fonts require a request and will take time to load. There are a lot of tricks a developer can do to speed up your site load, but it’s always good to keep a few best practices in mind:

Only load what you’ll actually use.

Rather than loading in every possible weight and character set that a font comes in, only load what you’re using. This will reduce the size of the file you’re requesting and make it load faster.

When using multiple fonts, make sure they come from the same place.

If you’re using two fonts on your site make sure that they are coming from the same type distributor. Your fonts will consolidate into a single request, making it one less thing for the browser to load. Your accounts person will also thank you because they’ll only have a single subscription to manage.

Design Side Note: don’t use more than two fonts. Too many typefaces will make your design system not feel cohesive, and maybe even look a little messy. Two well-made typefaces (one serif, and one sans serif) will have enough distinct weights that you should never need anything else.

Inventory where you use a font.

If you’re only using a font or particular weight on a couple places could you find a way to cut it?

Web Font Myth #4: Your type will be ugly until the page loads.

This is a real thing called FOUT—flash of unstyled text—where for a brief moment your text is in a default font until the styles fully load. Most type distributors have a Javascript fix that your developer can add into your site to prevent this if it’s a problem.

So, speaking personally this has never been a reason for me to not use a web font. Which is worse? A brief flash of a default font, or setting a whole page in Arial?

Selling your manager on a web font

Okay, so you’re sold, but now you need to convince your manager to give you the company credit card. It’s okay, I’ve prepped some helpful phrases for you:

“Licensing a web font will establish continuous multi-channel brand engagement.”

“Using a web font instead of images can help improve our SEO ranking, and accessibility.”

Wow, you sound fancy. ;)

What’s the best place to license a web font?

There is no “best” service, and it’s all about choosing the font that best represents your brand. This is just a couple of the places that we license fonts from here at Mule.

Further Reading

Tim Brown’s article on why you should pay for a good font is great. His argument on the value of good typography is more eloquent than I could ever hope to be.

A great source of inspiration is Sites We Love on TypeKit’s blog. They feature excellent uses of web fonts on a wide variety of different types of websites.