Historic Fonts
Wild West
Art Nouveau
Arts & Crafts
Arcane Fonts

Font Styles
Text Fonts
Display Fonts
Calligraphy Fonts
Initials Fonts
Art Fonts
Script Fonts
Border & Rule Fonts
Full Font Samples

Tips & Tricks
Easy Initials
Fonts on the Web
Font Design
Decorative Initials
Web Graphics
Monospaced Design
Textured Graphics
Designer Fonts
Web Design Tools

PDF Catalog
Register Shareware
Web Link Offer
Designer Bios
Web Fonts
Frequent Questions
Single Font List
Newest Fonts
Wholesale Info
Special Offers
Order Online
Get Newsletter

Email Us!

There are two basic ways to incorporate fonts into your web designs. Neither does everything you probably think you should be able to do, but with a little creativity it is possible to make fonts one of the most powerful web design tools in your arsenal.

Your first, deceptively attractive option, is the (FONT FACE) command. It holds the promise of miraculously presenting all or any of the text on your site in the font you specify so your page looks exactly the way you want it. But in reality, it doesn't actually work that way.

The catch with the FONT command is that while you can specify any font you like, it can actually only call up those fonts which are installed in the page visitor's system and you really have no idea what fonts he has installed. This throws a lot of designers off, because they have the fonts they like installed on their computers, and the page looks great when they view it. Then they discover to their dismay that visitors aren't actually seeing it the way they intended, because when the HTML code specified a lovely font like Folkard, the visitor didn't have it installed and their browser defaulted to Times Roman, making the page look completely different, and in some cases pretty horrible. This is particularly damaging if you specify a large, ornate font and the default font is smaller, with the result that the text may end up vanishingly small, or graphics may be out of position or even overlapping.

Since you can't know what fonts visitors will have installed, the only truly reliable way to use the FONT command is to stick with fonts you know everyone has. This means just the very limited selection of fonts that virtually all computers come with, including both Windows and MacOS systems. The only font which actually appears under the same name on both major platforms is Courier. But it's not likely to be your font of choice unless you have a really strange take on web design. However, the FONT command does allow you to specify more than one font (FONT FACE="X","Y"), so you can list a preferred font and a back-up for those who might not have it. You do want to specify fonts of similar size and weight, so it's helpful to know which fonts have similar appearances.

Your best combos to cover both Windows and MacOS with similar results are: (Arial, Helvetica), (Comic Sans, Charcoal), (Times New Roman, Times), (MS Serif, New York), (Impact, Chicago), (MS Sans Serif, Monaco). This isn't exactly an inspiring selection of interesting fonts. They're bland, unremarkable and not even the most readable fonts available. This is one of the main reasons why many designers suggest that you don't even attempt to define a font style and leave users with their own preferred font selections.

One alternative to working within these limitations is to provide users with new fonts specifically for use when viewing your site. This won't help them out on their first visit, but if they are repeat visitors they may install the recommended fonts in order to enjoy the full impact of your site. It's also a nice way to add some value to your site in the form of a useful free download. Several sources provide free fonts, but few of them are suitable for the web and available in identical versions for both Windows and the MacOS. One free source for high-readability fonts for both platforms is Fontcraft at WEBFONTS

Several software companies are working on systems for making fonts more accessible for web design, but there is as yet no established standard and no convenient solution to this problem. If you want to use specific fonts for the text of your site your options are likely to remain very limited for some time.

Of course, full integration of fonts into the html code of your site isn't the only way to use fonts in web design. Existing technology actually works pretty well if you're willing to confine your use of fonts to decorative titles and graphics. This is where a site most benefits from more unusual fonts anyway, and decorative titles are an excellent way to add visual appeal to a page without relying on slow-loading, more complex graphics too heavily.

While it may be right to think of page headers and frames as primarily intended to convey information, with the right fonts they can also define the look and feel of your website.

For example, a software or technology oriented site might want to use a font with a tech look to give users the right visual feel. As this example shows, without using any fancy graphics or complex art you can get the right look with the right font.

Even on smaller scale, good font choice can increase the effectiveness of the buttons on your page, because they allow you to combine the basic function of conveying information about what the button links to with some decoration provided by your choice of fonts. Putting the right font on a button can grab the eye and encourage visitors to use that button.

Decorative fonts are essential when you add titles or sectional headers within the text of your pages. One-line titles load fast and add emphasis in a very practical way. With the right fonts they can change the whole look of your page by breaking up large sections of text and placing emphasis where you want it to be.

The essential technique for integrating fonts with the text of your page is the transparent GIF. Transparent GIFs let you to make the area around the letters transparent so that your title or headline stands on its own like regular text, as if it were written right on your page background. For details on creating first-class transparent GIFs check out our previous article on this topic - TRANSPARENT IMAGES

When picking fonts for use as part of a page which is mostly text, it's important to consider the readability and visual impact of the font. While you want titles which stand out, you don't want them to overpower your text. It's also important to make sure that they don't separate too much from the text, so that it's clear what part of your page they're associated with. Fonts with extreme descenders are often a problem for titles and headers because the descenders require extra space before you can start your text. The Bienville font used in the title example above is excellent for in-text headers because it has unusually short descenders, as shown on the lower-case 'f' in the example.

Part of the power of font graphics is how quickly they load. A typical tranparent GIF title is under 5k in size, loading in seconds even on the slowest computer. On some pages they load fast enough that users may not even realize that they aren't part of the actual text - sometimes leading novice designers into thinking that the (FONT FACE) command actually works.

Good fonts are a powerful, versatile way to give your page a unique look. Don't overlook their impact in creating a mood and making your design varied and interesting.

Art & Type
Arabian Nights
Celtic Fonts & Art
William Morris
Alphons Mucha
Howard Pyle
Arthur Rackham
Russian Folk Art
Horror Fonts & Art
Fantasy Fonts & Art
MapMaker Tools

Art Collections
Borders & Frames
Textures & Patterns
Grammar of Ornament
Lady of Shalott
William Russell Flint
Eleanor Brickdale
Edmund Dulac

Featured Items
Newest Fonts
In Development
Complete Fonts Pkg
Designer Fonts
Horror Fonts & Art
Kidd Font Project
Master Fonts
Monospaced Fonts
New Font Sampler
The Lady of Shalott
New Releases

Contact Info

© 2003 Ragnarok Press
All featured Fonts, Textures and Images Available for purchase.