NEW! ADOBE CC (2019 RELEASE)
Pre-order and save 35% on books and eBooks to help you learn to use Adobe's key creative products.
Publishers of technology books, eBooks, and videos for creative people
Q: Are there alternatives to Arial, Times, and Georgia for Web designers?
The short answer is YES!
The slightly longer answer is that most designers use Arial, Times, or Georgia, and, to a lesser degree, Verdana, Trebuchet MS, Courier, and Comic Sans because they think that’s all they have at their disposal, but they are wrong.
The long answer is that the core Web fonts (the one listed above plus Impact and Web Dings) are used because they are almost guaranteed to be installed on the vast majority of computers your designs are likely to be installed on. One fact of life in Web design is that unless the end user's computer has access to the font file, then the browser cannot use it.
Now for a little secret: there are dozens of other fonts that are likely to be installed on the end users computer, both by the operating system or by common applications like Microsoft Office, iLife, and iWork. There are over 60 fonts above and beyond the core Web fonts that are common between the Mac and Windows that you can begin to leverage, and many more that can be deployed based on the operating system.
The trick is to create a font stack with understudy fonts to cover all your bases. Most designers will design around a single typeface, but Web design is a fluid art form that will require you to provide understudy fonts that will be used when your primary choice isn’t available.
First, choose one of the fonts from the list of Web safe fonts in the list I compiled. I’ve also put together a handy list of Web safe fonts as a computer desk top, so you always have the list of most common Web safe fonts at your fingertips. Make sure to choose fonts that take up about the same amount of space for the same amount of text.
Next, add as many as you want from this list as understudies, but then end with a core Web font and the generic font-family. For example, in this example, I chose the Web safe font Century as my primary font, and then the Web safe font Book Antiqua as the understudy font, rounding off the list with the core Web font Georgia and serif for my generic font family:
font-face: century, “book antiqua”, georgia, serif;
If Century is not available, then Book Antiqua is applied. If Book Antiqua is not available, then Georgia is applied. If none of these are available, then the browser will use its default serif font. The key is to adjust your design to the capabilities of the end user’s browser.
For more information about Web typography, check out Jason’s new book, Fluid Web Typography. Jason is also the author of more than 13 books on digital media, including Speaking In Styles: The Fundamentals of CSS for Web Designers.
Follow Jason on Twitter:@jasonspeaking.