|
|
Fonts for Text Areas
Below is a great article by my friend Shirley Kaiser,
and it deals with fonts for the web. Be aware that she is
mainly speaking about fonts that are used in graphics. Fonts
that are used for text areas are a little bit different.
There are only 6 fonts that should be used for text areas
of any site. The main reason for this is that some browsers
will not show any more than these 6, and if another font
is choosen, then the browser's default font will be shown. It is impossible to determine
which default font will be displayed on another person's browser, resulting in a unpredictable and possibily unattractive looking site.
Below are the 6 main fonts viewable in 100% of all browsers:
|
Font - Size (2)
|
Size (3) Average
|
| Arial,
Helvetica, sans-serif |
Arial,
Helvetica, sans-serif |
| Times
New Roman, Times, serif |
Times
New Roman, Times, serif |
| Courier
New, Courier, mono |
Courier
New, Courier, mono |
| Georgia,
serif |
Georgia,
serif |
| Verdana,
sans-serif |
Verdana,
sans-serif |
| Geneva
, san-serif |
Geneva
, san-serif |
|
Font - Size (4)
|
Size (3 Bold)
|
| Arial,
Helvetica, sans-serif |
Arial,
Helvetica, sans-serif |
| Times
New Roman, Times, serif |
Times
New Roman, Times, serif |
| Courier
New, Courier, mono |
Courier
New, Courier, mono |
| Georgia,
serif |
Georgia,
serif |
| Verdana,
sans-serif |
Verdana,
sans-serif |
| Geneva
, san-serif |
Geneva
, san-serif |
If you look very carefully, each of the above fonts
looks slightly different. Can you determine which one I
prefer? What do I use for the titles? The headings? The
ones most widely used are Arial and Times New Roman, because
they are generally the easiest to read. Any other fonts
that you may want should be used as a graphic, or else used
vary sparingly.
Why Do Some Beautiful Fonts in Print Look Horrible on the
Web? From
Shirley
Kaiser
A font chosen by a publisher is beautiful (and appropriate)
in print at various sizes but lousy on the Web in a comparable
small size for the companion site I'm in the midst of designing
right now. Why does that happen? I'll explain some of the
basics below.
Choosing Fonts For Web Graphics To choose appropriate
fonts to use for your Web graphics, first let's do a quick
review of anti-aliased text. Below is a sample of anti-aliased
and aliased text with Garamond. Notice the smooth edges
of the anti-aliased text and how jagged the edges are
with the aliased text:
 As
shown in the magnification to the left, the anti-aliasing
smooths the curved edges by adding intermediate colors
to the edges.
And look how jagged the same letter edges are with the
aliased text. Big difference, isn't it?! Well, curves
and diagonal lines on-screen will be jagged like that
unless they're anti-aliased.
How does anti-aliasing impact the fonts you choose
to use on-screen for Web graphics?
If anti-aliasing smooths the curves and diagonal lines
in your on-screen fonts, the problem is solved for creating
Web graphics, right? Well, no unfortunately. I'll explain
why.
Variances among font designs:
The curves, diagonal lines, and widths of characters
can vary substantially with the particular font design
and shape of each letter, number, or symbol. Therefore,
the anti-aliasing can also vary, naturally. Each font
must be evaluated for its clarity when anti-aliased at
the particular size needed, too (more on font sizes below).
In the sample below using anti-aliasing for each one,
check out which are readable and clear, which are unreadable,
and which are somewhere in between at 12px and 30px.
Many fonts are designed for print at high resolution
and when transferred to on-screen use will not adapt well.
(Print also is based on dots, not squares.) Fonts for
on-screen use are created with square pixels in mind.
This can make a big difference in clarity, especially
in terms of anti-aliasing.
Some fonts are more square in their character designs
and don't need to anti-alias as much as a result, coming
across on the Web as far more clear and clean. If there's
a lot of anti-aliasing, the letters can appear blurry,
and sometimes can be too blurry to read well on the Web.
Another consideration with fonts and anti-aliasing is
how fat or thin each line is within a character. Fatter,
more square fonts may work better for Web graphics than
fonts with narrow and more curved lines.
Italic fonts are by nature more diagonal, thus having
more anti-aliasing and potentially blurred lines. Therefore,
they may need more care or avoid them (there are ALWAYS
exceptions).
Thin handwriting fonts can be beautiful in print but may
end up looking too blurry on-screen because of the amount
of anti-aliasing compared to the thin line widths and
usually combined with more curves and diagonals.
The smaller the font size becomes, the more compacted
all the curves become, and the smooth lines can end up
becoming blurry. When letters are larger, they usually
appear more clear and clean around the edges. However,
if you use its aliased counterpart instead, the spacing
between letters may not be even and they may still look
jagged.
Here's what happens with the well-known Helvetica font
at 20px, 18px, and 16px, shown below as aliased and anti-aliased:
Here's what happens with the Helvetica font at 12px, 10px,
and 8px, shown below as aliased and anti-aliased:
Pictures speak 1,000 words, don't they?
336-408-9075
Rich@RichsWebDesign.com
|
|
