Why Web Typography is So Bad (And What You Can Do About It!)

“Why is the website in Arial? Our corporate font is Optima!”

You’ve heard this question before, haven’t you? Maybe you were even the one asking?

Times New Roman, Arial, Verdana… it’s a fairly common web design frustration that the pool of available fonts is so shallow. But why? And does it need to be that way?

How a Web Browser Renders Type

Web pages consist of numerous pieces — code, content, images, and fonts. If your browser has a problem with one of these elements, you won’t see what the designer intended.

When HTML was first created, fonts were controlled exclusively by the default settings of each web browser. Which pretty much meant all you got was Times New Roman.

It was not until 1995, when Netscape introduced the <font> tag, that web designers could specify fonts. The catch, though, was the font had to be installed on the user’s computer. So, it was a guessing game as to how many people in their audience had a particular font installed. The safest way to control layout was to rely on the same handful of fonts that were install by default on a computer: Times New Roman, Arial, and later, Verdana and Georgia.

Developing Alternatives

The most common alternative for using custom fonts is to pre-render them as an image. You may have heard of “HTML text” via “image text”. “HTML text” is limited to fonts on the user’s computer, but has the benefits of being selectable (i.e., you can copy-paste in a Word document or email) and readable by search engines. “Image text” is text rendered as a graphic and is not selectable, won’t be seen by search engine spiders, and prints poorly due to a 72dpi format. “Image text” would be used sparingly, usually for splashy captions and navigation.

As technology advanced, “image text” graphic could be created on-the-fly using scripts instead of manually by a designer. While this method significantly cut down production time, it did nothing to combat the main problems of the image text not being selectable or SEO-friendly.

Enter Web Fonts
(Look, Ma, No Graphics!)

For the rest of this article to have its full impact, I am going to have to assume you’re using one of the following browsers that supports web fonts:

Google Chrome: version 4.249.4+
Mozilla Firefox: version: 3.5+
Apple Safari: version 3.1+
Opera: version 10.5+
Microsoft Internet Explorer: version 6+

(Pretty reasonable, right? Internet Explorer, which is notorious for having a user base that is slow to upgrade, is able to support web font technology with a 10-year-old version of its browser!)

Hopefully, you’ve noticed that our fonts have changed. The first header was in “Chewy”, the second in “Reenie Beanie” and the main paragraph copy in “Cabin”.

How Web Fonts Work

CSS2 first introduced the specification for @font-face, a means to allow a browser to download custom fonts directly to a user’s computer. Unsurprisingly, the major type foundries find this controversial, as such a mechanism would allow for more tech-savvy users to find and distribute these downloaded fonts, and thus, infringe on licensing agreements.

How to avoid possible infringement? It’s a best practice to only embed fonts with an open license to do so, such as the fonts provided by Google. (Custom fonts in this article all come from Google.) Another option is to subscribe to an online service such as typekit.com that licenses use of custom fonts.

Another option in development is the “Web Open Font Format“, currently in development. Similar to the @font-face method, fonts are downloaded to a user’s computer. However, the font is compressed in a format only for web use, effectively preventing mass piracy. The top foundaries are in support of this method, which is expected to become the defacto standard for serving custom fonts online.

Why Web Fonts Matter

Custom fonts for your website have a variety of benefits:

Better typography for the Web
Accessibility (real text can be read using text-to-speech programs; images of text cannot)
Internationalization (more languages, especially with with non-roman alphabets, can be supported)
Search engine optimization
Preservation of brand identity through type

What Can I Do?

If your brand fonts (or acceptable alternatives) are readily accessible via open source or subscription services, you should ask your web provider to start using web fonts. Be sure to double-check any licensing agreements for use of the font. Also, test how well the custom font looks on-screen — some fonts are only appropriate for print! Remember, good typography is a design discipline in and of itself.

As the Web Open Font Format becomes more widely standardized, make the switch when you are confident the majority of your audience will be able to see the new fonts. And as always, test, test, test!

Appleton Creative, an Orlando-based advertising agency, believes that type is beautiful. Even web type. Contact us to unify your brand across print, video, and the web.