Typography is a large subject. Even when you only talk about type on the web, it can still be daunting.
So, let’s take a look at what you can do now—with current technologies—on your website. We’ll review some history, look at where we are now and cover some tools and services that can help you and your designer add value to the content of your site by using better type.
Of course, well-designed web typography has many benefits. Here are two of the best:
- Increased readability. (better dissemination of your message!)
- Better brand consistency. (match your print collateral!)
In the Old Days
Just recently, it was the Old Days when it came to type on the web. You were limited to a few ‘web-safe‘ typefaces as most users only had a few common fonts on their computers. That’s right, if the user did not have the font the designer specified, it was a crapshoot.
Though there were others, we were mostly limited to a handful of fonts Microsoft released in 1996 known as Core fonts for the Web. It was widely distributed for Mac and Windows. This gave us some standard options:
- Andale Mono
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Webdings
Verdana —a san-serif font— provided great font for on-screen use, especially at small sizes, and was ideal for body copy, even as small as 9–12 points.
Georgia was a easily readable serifed choice, good for slightly larger body copy or headlines.
You’ve probably heard about Comic Sans. Sad. Over-all, the Core Fonts project was a major step. However, there was still a long way to go before any site would look as good as a book, or match the typeface used in your logo or letterhead.
An added restriction was resolution. Some fonts on computers are designed for on-screen use at one of two sizes. The rest might look okay in print, but horrible on the screen.
The Future is Now
Now that we live in the future, things are different. We have hi-res smartphones that look as clear as books and magazines. We have giant displays on our computers so almost any well designed font can look good.
Additionally, your site can now display typefaces that work with your brand and design without the requirement for the user needing to own the right font. And, you can view the type on your phone, desktop computer or tablet, and get a consistent experience. It will even work on older versions of Internet Explorer.
If you want to see one really great example of what is possible today, visit Lost World’s Fairs, which has three more extreme examples of type. Some of the examples reward you further as you scroll down the page.
Services
While the basic technology for modern web typography is native to the current state of the web, there are many services that make that tech easier to use. Some are free and some are fee-based, but either can allow you to use the typefaces you want in a legal way. Your designer can help you to decide the service that’s best for you.
Font Squirrel
Font Squirrel is a free service that allows you to convert the fonts you own so that they can be included on your website.
Typekit
Typekit is an ongoing paid service that serves the fonts for you based on your plan. You can select multiple typefaces from large libraries. You collect these in a ‘kit’ that contains the fonts for your site, and they serve it through your website specifically optimized for use across platforms and devices.
Typecast
More a part of the design process, Typecast allows free experimentation of type during the design process. You can select, size, and layout type using real content in the browser. Once you settle, you can output the compatible layout code that works with your service of choice. Typecast works with several services, similar to and including Typekit.
Tools
FFFFALLBACK
FFFFALLBACK allows you to see what web fonts other sites are using. You save it like a bookmarklet (like a bookmark, but it runs an action instead of taking you to a web page), and you select it when you are at a site you want to inspect. It provides a list of fonts used and highlights each of them on the page.
Lettering.js and Kern.js (Javascripts)
Lettering.js and Kern.js are scripts that allow designers to make character level adjustments to type to improve letter spacing (kerning) as they have for thousands of years in print.
All Good News.
I would have saved the bad news for last, but there really isn’t any. A well-designed site can make use of your brand as well as a brochure, catalog or packaging. A well-coded site allows this to happen on almost every platform and device. In situations where your site loads on old or obsolete computers, the design can fallback on the fonts from the Old Days. Amazing that those days are only 5–10 years ago.
