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.
|