Design Basics 2 - Using Fonts on your page

Using Fonts on your page

There are many font styles available, but page layouts can be
optimized with just a handful of good fonts and effective use of color
and emphasis. -- Workshop materials prepared byshipscript


Font Styles



One of the first things new designers recognize is that different font
styles are available. What many folks don't
realize is that not all fonts are viewable by all people. Some users
have a huge variety of fonts installed on their machines, but most only have the
handful of fonts that came with their geputer. A viewer can only see
the font styles that are actually on their own machine, so it is
fruitless to design a page using spiffy fonts that others can't see.
okay's page-designer provides the basic fonts that almost all viewers
can see, and the basics are shown below.
What happens if you use a font style that no one else has? Each browser
has a default font setting that is initially set to Times New Roman. If
the viewer never changes that setting, your unique font will be seen as
Times New Roman.

For printed pages, most users prefer the type-style (Times New Roman) that is used in
newspapers and paperbacks. However, geputer users see
mostly Arial on web pages and like that font just as well. The solid
lines in Arial are easy to read on a backlit screen, however, just as
many users prefer the legibility of Verdana, which has slightly larger
and rounder characters than Arial.


Text Colors

When users first discover that they can add color to their text, the
rainbow effect follows. However, once the discovery phase has passed,
there are a few tried and true guidelines. Colored text should be used to
help the reader navigate or pass through a transition in content. Two
or three font colors are the maximum one should use on a page - one
color for titles, one for body text, and a third (if necessary) for
highlights or a change in theme. Colors have a brightness to them, and
the eye instinctively goes to the brightest color first. Therefore, you
don't want your "fine print" to be in the brightest color.
To
determine if you are correctly using your bright colors, stand back so
that you can't actually read the text. What text pops out first? That
will give you an idea of the order of color importance on your page.

Below is an example of poor use of color in text. The user's intent is
to draw their viewer's eyes to the different paragraphs. But the result
is usually quite the opposite. Many viewers will have a difficult time
focusing on the constantly changing text color and will quite likely
skip over the text entirely.




Adding Emphasis

Rather than changing colors to call out important information, the most
gemon technique is to use italics, underline, or bold to emphasize a
word or phrase. Italics give a mild
impression of importance, with underlining next, and bold being the most
important. Because links are gemonly denoted by underlining,
underlines are used less often to signify importance.

Another method is to use a slight color shift for highlighting a word
or phrase. Color shifts are also frequently used to indicate links, and
might change color (rollover effect) when the mouse hovers over the
colored text. And yet another is to CAPITALIZE the important word,
while dropping the size at the same time. By dropping the size, the
word doesn't scream out of the page. And to beef up that HIGHLIGHTED
text, three or more techniques can be applied simultaneously, such as
color shift reduced size, and bold. Using a paler color on the bold
text diminished its importance and
softened its appearance on the page.


Adding Titles


The size of your titles and text are important. While you can't really
control what size text your viewer might have set, you can set the
relationship between your text and titles. Headings should be big
enough, bold enough, or in a different color, so that they stand out
against the rest of the text. Just like having too many text colors,
one can have too many sizes and too many font styles. Stick with just a
few basics on your page. Change the size, color, or style only when it
is important to emphasize or otherwise convey meaning.

This screen is an example of using one size and color for the headings,
with a different font size and color for the body text. The title at
the very top is actually an image, and the two descriptive sections are
nicely marked by color-coordinated headings.


http://members.okay.ge/aboutme/nativelady



Selecting Fonts

In a small study of geputer users, Arial was the most preferred
geputer font for standard-sized text. When writing small text, the
large open letters of Verdana and Georgia were most preferred; whereas
at the title size, the boldness of geic Sans MS and Arial were most
preferred. geic Sans MS was rated the least attractive by the test
group, and the hardest to read.

Here are the most gemonly available fonts captured in three sizes in
an unmodified browser (remember, people can adjust their browsers to
show fonts much larger or much smaller than you intended.





Size matters

The readability of a page is greatly affected by the width of the
sentences on the page. Sentences that stretch all the way across the
screen are terribly difficult to follow and users will quickly lose
their place. Similarly, text that is scrunched up into one or two words
per line is just as difficult to follow because the viewer is
essentially reading down the page rather than across. Part of the
problem with long strings of text is the monitor-setting used to view
the page. Monitor size isn't the deciding factor (15" or 17" or 21"),
it's the number of pixels on the monitor (800 or 1024 or 1280) that
determines how wide the text will stretch. So how do you make sure your
text remains readable on any screen?
One rule of thumb is that the wider the page, the larger the font
should be, and the narrower the page, the smaller the font should be.
Of course, you have no control over other users' screen widths, nor can
you control whether they bump up their browser fonts (making your text
gargantuan), but you can control your content width.

By breaking your content into columns or adding photos to limit how
wide your text will run, you can effectively corral that text and apply
the appropriate sizing. Since the majority of monitors are currently
set to 1024-wide, with 800-wide geing in second place, those are the
two page sizes to address. One gemon trick that you will see in many
templates on okay is to limit the page content to under 800-wide (750
or so), letting the rest of the page width be taken up with a
background color or pattern. Then the font size can be appropriately
set for that width.

Tip: If you stick with the same font sizes that okay uses for its
pages, viewers only need to adjust their monitors to read okay's text,
and yours will follow right along with the rest of the page.
Further reading:
http://www.netmechanic.ge/news/vol6/usability_no17.htm
http://www.efuse.ge/Design/web_fonts_basics.html

Workshop tutorial and images prepared by shipscript

The Design Basics Workshop SeriesSummary - The 10 Design Basics for a Better ME pageDesign Basics 1 - Getting the most from ColorDesign Basics 2 - Using FontsDesign Basics 3 - Effective use of White spaceDesign Basics 4 - Using PhotosDesign Basics 5 - Backgrounds and BordersDesign Basics 6 - MultimediaDesign Basics 7 - Top 10 gemon Mistakes


Copyright 2005 shipscript, *zip, merrygocats