Back when I was working in my first “official” interactive gig at an agency, the creative department would still come up with the initial creative for digital projects. One of the biggest issues we had with that process involved typography, and the fact that traditional graphic designers and art directors weren't aware of how fonts work on the web.
While web fonts have come a long way in the past few years, there are still a few ground rules to follow. So if you've got a print background, but find yourself tasked with digital work, this web type primer is for you. This won't be an exhaustive deep dive, or even particularly technical, so let’s cover a few basics.
What does web safe mean?
Once upon a time, “Web Safe Fonts” meant the handful of typefaces available on every machine. Live text was limited to the usual suspects – Arial, Times, Verdana, Georgia, etc – and anything else had to be an image.
This got blown apart with the rise of smartphones and responsive web design, and now there’s plenty of font options out there. So web safe isn’t really something you need to worry about these days unless you’re designing an email.
However, you’ve got to account for whether the font is licensed for web use and where it’s going to be hosted.
Wait, hosted? What?!
Different foundries have different methods to legally use their fonts on the web, so there are a few ways to serve up web fonts. Usually, it’s hosted on the foundry’s server, and accessed via JavaScript or CSS.
One of the most popular ways to serve a web font is to use a stylesheet from Google. Others, like Typekit, use a script to pull fonts from your Adobe CC account. Foundries like Monotype or Hoefler & Co also offer subscriptions to serve their fonts, and in some cases, that’s the only legal way to use them. These services will cap the number of views you can have before it switches to your fallback stack, which would be those web safe fonts from earlier.
The other option is to self-host your fonts, which requires a one-time purchase of a web font that you store on your server, and is licensed for a set number of views each month. Smaller, independent foundries or aggregates like MyFonts.com generally allow this option.
Performance
Don't go crazy with a bunch of font families and weights. Once you're loading 2-3 fonts with multiple styles, performance can lag, because each instance is another request to the server. As in print design, restraint here can lead to good creative work.
Rendering
Different browsers render fonts differently. Fonts that look beautiful in Safari will look thicker in Chrome or even pixellated in older versions of IE. Although, with retina displays and quickly evolving browsers, this is less and less of an issue.
Legibility = Accessibility
It’s worth noting that typefaces play a large role in accessibility. Small font sizes, display fonts in paragraphs, or low contrast type all make it difficult for users with vision impairments. Some low x-heights or serif fonts can even make it more difficult for users with dyslexia.
In order to accommodate – and then convert – users in your website, email or landing page, it’s important to consider how accessible the typeface is. The good news is, following good typesetting practice will serve well here.
Nerd out on web type.
Again, these are the absolute basics for crafting effective typography on the web, based on my observations in an agency that was transitioning from a traditional setup into an integrated one.
At the bare minimum, I hope this will smooth out the bumps in your process, or at least help traditional and digital teams work together more effectively.
If you're ready to deep dive on the subject, these resources helped me level up my digital typography game:
On Web Typography
Jason Santa Maria's book is one of the first deep dives on web fonts I ever really dug into. Available from A Book Apart.
Responsive Typography
I picked this gem up after attending Jason Pamental's day long workshop of the same name. I learned a ton from both. Available from Amazon & O'Reilly.
Typewolf
Typewolf is a fantastic resource, which aggregates websites using different fonts, along with resources for font lists, pairing guides, and more. Great for inspiration, this is often one of my first stops when researching typefaces.