Using Fonts and White SpaceFont stylesOne of the first things new designers recognize is that different font styles are available on different web pages. 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 that might have come with their editing software, but most users 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 basic ones are shown below. If any two of these fonts look identical, then they are not all installed on your machine.
- Arial
- Times New Roman
- Verdana
- Courier
- Comic Sans MS
- Trebuchet MS
- Georgia
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 that is used in newspapers and paperbacks. We find that style (
Times New Roman) easiest to read because we are accustomed to it. 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. This paragraph is shown in Verdana.
Text Colors When users first discover that they can add color to their text, the rainbow effect follows. It's fun to play with and exciting to see mastery over the results. However, once the discovery phase has passed, there are a few tried and true guidelines. Color 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.
What are the brightest colors? Yellow is a bright color and various tints of yellow (orange, light green) are perceived as bright. White and light colors can be bright depending on the background 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 EmphasisRather 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. In general, my perception is that italics give a mild impression of important, with underlining next, and bold being the most important. Because links are commonly denoted by underlining, underlines are used less often to signify importance, since it could cause some confusion.
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. Notice that using a paler color on the bold text diminished its importance and softened its appearance on the page? Also notice that I used a color that blended with the titles, to prevent a jarring appearance.
Adding TitlesThe 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.
LinkThe sections in this workshop were also written with title contrast in mind. The body text uses the nice round Verdana font set to a smaller size. It is still just as legible as Arial at a normal size. Then, because Arial font makes nicer bolded text, we used a normal-sized, but bolded, Arial for the headings and set them in a different color. The titles at the top of each section are yet a larger size and are centered for importance.
Selecting FontsIn 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 mattersThe 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, but that is not the way your new monitor is shipped to you. High resolution monitors have tiny text, so you may have bumped up your browser fonts or you might be inclined to use giant text on your page. 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.
Breaking up your PageA page should not run on and on. A page is easier to navigate if it is broken into groups of ideas, or sections with headings. Those sections should then contain paragraphs that are smaller visual blocks. That way viewers can skip around to the areas that most interest them. Web visitors do not normally sit down and read a whole page, they tend to skim. So use meaningful titles to pull them into relevent sections.
A page can be broken with titles, horizontal divider lines, photos, tables, or colored sections. However, be careful that there is useful content between those dividers. The only thing worse than a page that runs on and on is a page that is diced up into unrelated little bits that create a scattered mess. This interestingly divided page has lots of white space and uses images, titles and lines to denote sections.
LinkTip: One of the easiest ways to break up a page is to use titles to organize your paragraphs, as we have done with this workshop.
Shape up your text In advertising,
white space is king. White space doesn't have to be white, it is just that blank space around your text. There should be a margin of empty space all around your page and text. Writing in paragraphs, and leaving gaps between blocks of text, provides a resting point that allows the reader to absorb what has been written before continuing to the next idea. Paragraphs should be short and contain a complete idea.
Paragraphs that are left-aligned (even on the left, ragged on the right) or fully justified (even on both the left and right) are far easier to read and comprehend. Our well-trained brains have difficulty reading text that is ragged on the left, as is the case with centered text or right-aligned text, and comprehension slows down. That is why only headings and small blurbs should be centered. Another problem is text that is too wide. If the eye can not pan the text without moving the head, the text is too wide, and the reader can lose their place on the line. The solution is to bump up the text size, or decrease the page width, or create columns of text (as in magazines and newspapers).
Further reading:Link Link
eBay Live 2007 Community Hall of Fame Award
Free Resources for Better Auctions • Programs • Tools • Hosts • Templates • Help • Guides • Blog
Must use Buy It Now and PayPal.
)
)
- visit my 
Photos are a fantastic way to break up the text on a page and draw in readers. Most people love to look at pictures, and many are naturally drawn to photos of people; however, caution should be used if deciding to place photos of yourself or your children on your ME page.
A pleasing arrangement of your photographs can make the difference between a ho-hum page and one that viewers want to visit again and again. In addition to the tips in this workshop, you might want to pay close attention to the way pictures are displayed on your favorite website, or in a popular magazine, for some good ideas on photo arrangement. Scattering pictures around your page with blocks of text between is much more attractive than stringing a bunch of uniformly sized pictures vertically down the center.
Animated Gifs
)
Welcome to the Workshop Board!
Visit our
eBay Education 