|
A
font is a set of type characters of a particular typeface design
and size. Usually, each typeface (Times Roman, Helvetica, Arial,
etc.) is made available in four variations: normal weight, bold,
italic and bold italic.
The
default font for a web page is Times New Roman. For universal compatibility,
fonts should be restricted to Times New Roman, Arial, Georgia or Verdana. If your visitor's browser
does not support your font choice, his or her browser will revert
to its default font to display your site.
As
with every element of web design, the challenge lies in the fact
that what you see is not necessarily what your visitors will see.
|
Avoid Incompatibility Problems
|
|
-
|
|
Make
text large enough to be legible to all users. If you are
designing on a Windows platform, avoid the temptation to
make the text smaller because it is legible to you; it may
not be legible to Mac viewers.
|
| |
|
|
|
Specify Multiple Fonts
|
|
-
|
|
Since
your visitors are going to be both Macintosh and Windows
users, you should designate fonts commonly found on either
platform or at least one font in common with each platform.
The first font you specify should be the one that you feel
is ideal for your design and the most legible. If the first
font specified is not common on both platforms, the next
font specified should be a similar typeface common for the
second platform.
|
| |
|
|
|
Relative Sizing
|
|
-
|
|
The
flow of the text on a page varies from one machine to another
and from one browser to another. This sometimes makes relative
sizing a better choice than absolute sizing. Relative sizing
adjusts the font size relative to the normal screen display.
Relative sizing is achieved by specifying + or - and a numeric
designation, as in this example: <FONT FACE="ms sans
serif, geneva" size="-1">
|
| |
|
|
|
Test with Large Fonts
|
|
-
|
|
Increase
your browser's default font size to see how your page design
holds up under different environments. Large text may destroy
your carefully laid out design.
|
| |
|
|
|
Use the Font Face Tag
|
|
-
|
|
Specifying
pixel size can help you overcome cross-browser font size
problems.
|
| |
|
|
|
Cascading Style Sheets
|
|
-
|
|
CSS
(Cascading Style Sheets) give the designer a great deal of
control over all aspects of type. They are viewable on all
fourth generation browsers and can be used to achieve exact
font sizes, overriding the browser's font preferences. (This
is a good technique for ensuring that text won't wrap in
navigation bars. For page text, it is recommended to let
your viewers make the decision.)
|
| |
|
|
|
Font Embedding Technology
|
|
-
|
|
Software
is available that allows you to send a font along with your
Web page - no more worries about whether a font is installed
on the viewer's computer. If you are interested in the possibilities
of this technology, you will be glad to know that many of
the initial cross-browser and cross-platform problems with
font embedding have been overcome.
|
The
use of appropriate fonts can enhance the design of your web page.
When selecting a font for your site, remember that text can help
convey a feeling or set a mood, but ultimately its purpose is to
be read.
Here
are a few tips to help you make wise design decisions:
|
·
|
Shorter
blocks of text are more readable
|
|
·
|
Not
enough contrast makes text difficult to read
|
|
·
|
Limit
the number of fonts on a site, giving it a cleaner, more
professional design
|
|
·
|
If
you are designing on a Mac, be aware that there may be less
contrast between text and backgrounds on a PC, making some
text illegible to PC users
|
|
·
|
If
you are designing on a PC, keep in mind that Macs display
text at a smaller size, making some text illegible to Mac
users
|
|
post your comment
print
send to a friend
Browse the Base
