Using web fonts: The basics

June 06, 2011

By Jessica Huddy

I recently attended an AIGA Boston event about the evolution of typography on the web. More specifically, what designers and programmers can now accomplish using web fonts. Gone are the days of being stuck with web-safe fonts, or using images in place of live text when something needed a little extra visual spice. More and more fonts are being adapted for use on screen, and plenty of new service providers are making things easier for everyone.

Let’s start with the basics, which were provided in an introduction by Sam Berlow of Font Bureau: There are two ways to use fonts on a website. The first is to use a font service provider (such as Fontdeck or Typekit), which will take care of all the back-end details in exchange for a subscription payment (usually yearly). The other option, which the panelists generally agreed is better for large sites with many visitors, is to pay a one-time fee to purchase the fonts and then take care of the coding details yourself.*

Overall, the panel discussion focused on the ways in which web fonts make the web a more sophisticated place. What does this mean for us?

First: better legibility and readability on screen. Many type foundries are releasing web-specific versions of their typefaces, with character drawings adjusted precisely for the screen environment. Print typefaces may look fine (or even great) at certain sizes on the web, but what happens to the letters at 7 or 8 pixels on a low-res smartphone screen? Do they break down, or hold themselves together? These adjusted character drawings are designed to be read online, in conditions where traditional print fonts may not be easily legible.

Second: better website accessibility on a variety of devices. Live type (and some good programming) can create a site that will adjust itself to fit different browser window sizes. Instead of having a completely separate mobile site, a programmer can create one main site that will automatically change itself depending on how the user is accessing it. A great example of this is edenspiekermann.com. Take a look, and adjust your browser window size to see the magic in action. At the event, the audience got a sneak preview of the new Boston Globe website, which isn’t live yet but works in a similar way by adjusting the entire site layout depending on the user’s browser specifications.

Third: better accessibility for text-to-speech applications and SEO. If all of the text on your website is live instead of image-based (formerly the only way to use alternate typefaces online), these programs will be able to read every word of text out loud to people with sight impairments. This also means that search engines will have an easier time “seeing” your site, and you won’t have to hide key phrases in the back-end code—they’ll be right out in the open as live text.

Lastly, web fonts offer the ability to use your brand’s typefaces across platforms—in print, web and interactive communications. Instead of having to choose the typeface that is most similar to yours among a limited selection of web-safe fonts (which are also used by millions of other sites online), you can actually use your brand’s specific typefaces to create a more distinctive web presence and experience. This is a huge step forward in keeping your brand strong both online and off, one that was formerly only achievable through not-so-satisfactory measures.

This discussion was a great way for me to learn more about what’s possible with web fonts and the implications for our clients. Curious to learn more? I’m happy to answer questions (or investigate if I don’t have the answers). Email me or leave a comment below.

*Be sure to check the end-user license before purchasing fonts for web use—some foundries are still working on web font versions of their typefaces, so they don't allow it yet.

Author's addition: An official event summary, with more more web font links and technical details, has been posted on the AIGA Boston blog.