, where the page title is large, but elegant, the sub-heading is smaller, but bold, and the body copy retains tight legibility without overweighing the headings.

Second, readability is key to the user’s experience (especially on the web, where users expect to be able to read information on any and every given page). Therefore, when picking out a typeface, stray away from fonts like Comic Sans and Papyrus (that are not only less readable but are also considered less than professional), and instead focus on finding more legible fonts.  Choose a typeface that complements the feel of the website and can be easily read. 

Another thing to keep in mind when choosing which font to use is whether or not it’s a web-safe font, meaning one that’s available on the vast majority of computers. Here is a general list of fonts that will work on nearly all browsers.

Keep in mind that body copy should always be set in a web-safe font. However, when designing less text-heavy elements like headers and navigation, your design may call for a more unique font. There are a number different ways you could deal with this.

1) Image Replacement
This means that instead of using actual text, you’ve inserted images of the typography you created in Photoshop, for example. Here is a detailed breakdown of various image replacement techniques. The advantage of using image replacement is that you have complete control over the appearance of the type. However, text as an image can not be selected, it’s not particularly search engine friendly, and image production can add extra time to your project.

2) Javascript and Flash Methods
In recent years, various techniques have come about for expanding one’s options for typography on the web, without using image replacement. Rather than beginning with textual imagery created in Photoshop or Illustrator, these methods utilize Javascript and/or Flash to render the text. This cuts down on production time and in some cases can be more search engine friendly than image replacement. These newer methods include Cúfon,  sIFR, FLIR, and typeface.js. 

3) @font-face
The next version of CSS, CSS 3, includes a rule called @font-face. This works by pointing to a font file in the same way that you might point to an image or other file on your website. You can then use the font in a standard font-family property in your CSS. This method is incredibly easy and both search engine and user friendly; however, not all web browsers currently support it, and there are font licensing concerns as this method currently constitutes distribution of a font.

Though no solution is perfect for every situation, there is almost always some way of getting type to do what you want it to on the web.


It’s also important to remember typeface size and color when setting type on the internet. One of my biggest initial challenges in applying all that works for print design to the web successfully, was remembering that (for the most part) users can’t exactly hold the internet up closer to their faces to see small type like they could with a printed piece of paper. It’s a different experience. So in general, detailed information should be a larger type size when being used in a website than it would be for print.

Type should also stand apart from its background in terms of color. In color theory, designers are taught about colors that contrast and colors that vibrate. Colors that vibrate (like red and green) do not lend themselves well to easily readable type when used on top of each other. Black type on a white background is typically the easiest on the eyes.


While designing type for the web may not provide as much liberty as when setting the type for print, there’s no excuse for badly set web typography, and there is still a lot of flexibility and creativity to be had when designing online typography. Plus, there is the advantage of being dynamic and making updates to keep it fresh for your audience. It’s just a matter of making the right choices by keeping these principles in mind. See a few examples of type done right from our work, and a few other sites whose type we love like Smashing Magazine, mint.com, and alistapart.com, just to name a few.


4 Comments » | Post a Comment » |