MS Front Page - Advanced
Font Readability
The best practice is to use the most readable fonts. Unfortunately, this is more
easily said than done. Exerts do not always agree which fonts are the most
readable or which ones are most appropriate for web use. There are thousands
of fonts and font variations that could potentially be used on a web site, but
the vast majority of these fonts will not work for most users on the web
because computers can display only the fonts installed on the computer, and
not all computers have the same fonts installed. Windows, Macintosh, and Unix
computers each come with a different set of fonts installed with the operating
system. Fortunately there are at least a few fonts relatively common to recent
versions of the Windows and Mac operating systems, such as:
•
•
•
•
•
•
•
•
•
Arial,
Book
Antiqua,
Comic Sans
MS,
Georgia,
Courier New,
Tahoma,
Times New
Roman,
Trebuchet
MS, and
Verdana
However, it is important to note that these fonts are NOT universal. Many
Unix and Linux computers do not have these fonts, and older versions of both
Mac and Windows computers may not have them either. Nevertheless, the fonts
listed above are common enough that they will be available on most computers.
Computers without those fonts will display some other font, like Times or
Helvetica, for example, which may not have the exact appearance the developers
intended, but the content will still be readable.
Font families
Fonts are categorized into "families" based on their characteristics. The most
common font families are
•
•
•
•
•
serif,
sans-serif,
cursive,
fantasy, and
monospace.
From among these, serif and sans-serif fonts are by far the most common.
Serif fonts
Serif fonts are characterized by the flared extensions, or strokes, on the tips of
such letters as f, l, and i, as seen in the screen shot below:
Serif fonts also usually have a combination of thick and thin strokes, as seen in
the curve of the letter "f" above.
Examples of serif fonts include Times New Roman, Georgia, and Book Antiqua.
Sans-serif fonts
Sans-serif fonts have plain endings, and appear blockier than serif fonts. They
do not have the flared extensions, strokes, or other kinds of ornamentation.
("Sans" means without, and "serif" refers to the extra strokes, or lines.)
Sans-serif fonts include Arial, Tahoma, Trebuchet MS, and Verdana.
Font designed especially for on-screen viewing
Although serif fonts such as Times and Times New Roman are generally
regarded as the most readable font family for printed text, there is conflicting
information about which font is the best to use for web-based content.
Conventional wisdom has been that sans-serif fonts are more suited to
electronic formats, but this convention probably has its roots in the fact that
older computer screens were less capable of rendering serif fonts. Most modern
computer monitors are capable of displaying all types of fonts with almost as
much perceived clarity as a printed page. Recent studies have resulted in
inconsistent findings, making it difficult to say which font family is best suited
for the web.
Some fonts, such as Verdana, Tahoma, Trebuchet MS, and Georgia, were
developed specifically for use in electronic media, and are now quite common
on both Windows and Mac platforms, especially if Microsoft Word is installed on
the computer.
Verdana
Verdana is one of the most popular of the fonts designed for on-screen viewing.
It has a simple, straightforward design, and the characters or glyphs are not
easily confused. For example, the upper-case "I" and the lower-case "L" have
unique shapes, unlike Arial, in which the two glyphs may be easily confused.
Another advantage of Verdana is that the spacing between letters. One
consideration to take into account with Verdana is that it is a relatively large
font. The words take up more space than words in Arial, even at the same
point size.
The larger size improves readability, but also has the potential of disrupting
carefully-planned page layouts. This is less of the issue of the developer
designs with flexibility in mind. (See the section below on font sizes.)
Georgia
Georgia is like the other web fonts discussed so far in that it is wider than
similar fonts meant for print design. Unlike the other web fonts, though,
Georgia is a serif font, more along the lines of Times New Roman.
Georgia is somewhat easier on the eyes than Times New Roman, although high
resolution screens with font smoothing technology also display Times New
Roman quite well. One advantage of using Georgia is that it is not the default
text of the browser. It is easier for users to see that the designer has applied
some style to the font when fonts other than the default font are specified.
Georgia ends up looking slightly more artistic than Times New Roman
Capitalization
Typing sentences or phrases IN ALL CAPITALS is rarely a good idea. It may make
sense under some circumstances, but only rarely. Lengthy segments of
capitalized content are more difficult to read. They also may give the
impression that the author is shouting. If the author really does want to convey
a shout, an exclamation point may be better, because screen readers generally
do not read text differently if it is in all capital letters, so listeners will not
know that the author is shouting. Screen readers do change the voice inflection
with exclamation points.
Contrast
Text is much easier to read when there is a high degree of contrast between
the text and the background. Black text on a white background is the de facto
standard for both print and the web at this point. However, this combination is
not ideal for all users. Users with very low vision may set the background to
black and the text to white or yellow. Users with dyslexia may set the
background to an off-white color or light yellow, with black text. Some people
with dyslexia lay a clear sheet of tinted plastic over the screen in order to read
more effectively. Web developers cannot control for these user behaviors, and
they do not have to. Users will do what they need to do, and what they are
accustomed to doing, in order to read. The main concern for web developers is
to ensure a high degree of contrast for the general population of readers.
Example
Yellow on black is good contrast.
Black on white is good contrast.
Maroon on black is bad contrast.
Green on red is bad contrast.
Algorithms exist to help developers determine whether there is sufficient
contrast between the foreground and the background. The first algorithm is for
brightness, and the second algorithm is for color difference. The algorithms use
the red green blue (RGB) color values common in web development. A color
with an RGB value of #000000, for example, has no amount of any color. This is
black. Colors are defined by a combination of letters and numbers, which
makes the system a bit difficult to understand.
Blinking and Moving Text
Blinking text and moving text are annoying because they distract the reader's
attention. This is especially relevant to people with attention deficits or
cognitive disabilities. Neither is likely to cause a seizure, but they are likely to
decrease the readability of the document as a whole and increase the time it
takes for users to finish reading it.
The situation is further complicated if users are required to click on moving
text. Users with slower reaction times, tremors, or other motor difficulties may
not be able to click on the links accurately.
http://www.lcsc.edu/webdev/typography.htm LCSC WebDev: Typography