Why can’t you use whatever fonts you want on a Web site? What happens if do? Which can you use? The still present techno-quirks and design challenges. One primary ones (for designers, that is) is limitations of fonts on the Web.
In print, “what you see (or use) is what you (and all recipients) get.” On the Web, for viewers to see what the designer sees, all of the viewers need to have all of the fonts installed on their computers. If they don’t, the fonts will default to something else in their respective systems, which can have unexpected and often undesirable results. For this reason, it is best to stick to the Web-safe fonts which are common to most Mac and PC browsers.
Web-safe fonts include serif, sans, and symbol typefaces. While some of them were originally designed for print, others have been designed specifically for legibility on the screen.
Sans Serif
The Verdana® typeface is widely considered the most legible of Web-safe typefaces. Its designers paid particular attention to ensuring that text remains readable even at small sizes on screen. Verdana offers a tall x-height, comfortable width, and open letter spacing.
The Trebuchet® MS typeface also retains clarity and readability at small sizes on the Web. It's slightly narrower than Verdana, allowing more copy to fit in the same space. Its curved stroke endings and unusual lowercase "g" give it a bit more distinctiveness than Verdana.
The Arial® typeface was not specifically designed for the Web. However, it is a very readable sans which works well on the Web. It's similar to Helvetica in both width and spacing, but with slight character modification. (See Arial vs. Helvetica)
Serif
The Georgia® typeface was designed for the Web as an alternative to Times. Georgia has open letterforms and spacing, making it crisp, clean, and easy to read on the Web, especially at smaller sizes.
The Times New Roman® typeface was designed for print, and for this reason is not the easiest to read on the Web, especially at smaller sizes. If you like the look of Times but need something sturdier, try Georgia instead.
All of the above fonts are available in Regular and Bold with italics.
|
|
The differences between these five Web-safe fonts are apparent.
|
Symbol fonts
Webdings, Wingdings, and the ITC Zapf Dingbats® typeface are included with most operating systems, although occasionally with different names. They contain many useful graphics, from stars, arrows, and snowflakes to thought bubbles, geometric shapes, and interrobangs. Note that these font names may show up as symbols when a font menu is displayed as WYSIWYG.
Type As Graphic
There is a way around these creative limitations. You can enjoy complete freedom in your typeface choice when choosing a typeface for a heading, logo, nav bar, or any other type usage by converting it into a graphic. Your file can be in the form of a .gif, .jpg or .png. This gives you the flexibility to combine text with images, textures and patterns and to take advantage of other creative approaches for a Web site.
But before you go nuts creating lots of graphics, keep these three things in mind: they are slower-loading than straight text; they are not easily editable; and they are not searchable by search engines. For this reason, most Web sites combine straight text with graphics in order to achieve a balance of readability, creativity, and ease of navigation.
* * * * *
Although you might be frustrated by the current lack of font choices, changes are on the horizon that will give you more options. For more information on these changes, stay tuned for Part 2 on Embedding Fonts on the Web.
Visit our Articles & News Page to read other FYTI Articles.