Design Basics 2 - Using Fonts on your page

shipscript
By Published by
Design Basics 2 - Using Fonts on your page
. Views . Comments Comment . 41 Votes

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 by shipscript

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 computer. 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. eBay'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, computer 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 common 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 commonly 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.ebay.com/aboutme/nativelady

Selecting Fonts

In a small study of computer users, Arial was the most preferred computer 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 Comic Sans MS and Arial were most preferred. Comic Sans MS was rated the least attractive by the test group, and the hardest to read.

Here are the most commonly 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 coming in second place, those are the two page sizes to address. One common trick that you will see in many templates on eBay 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 eBay uses for its pages, viewers only need to adjust their monitors to read eBay's text, and yours will follow right along with the rest of the page.

Further reading:
http://www.netmechanic.com/news/vol6/usability_no17.htm
http://www.efuse.com/Design/web_fonts_basics.html

Workshop tutorial and images prepared by shipscript

The Design Basics Workshop Series

Summary  - The 10 Design Basics for a Better ME page
Design Basics 1  - Getting the most from Color
Design Basics 2  - Using Fonts
Design Basics 3  - Effective use of White space
Design Basics 4  - Using Photos
Design Basics 5  - Backgrounds and Borders
Design Basics 6  - Multimedia
Design Basics 7  - Top 10 Common Mistakes

 

Copyright © 2005 shipscript, *zip, merrygocats
Explore More
Choose a template