Navigation Bar

Home - Guide Search Table of Contents

Technical Guide

Introduction

Site Structure

Navigation

Page Layout

Color

Formatting Text

Images

Multimedia

HTML Code

Bibliography

Formatting Text

The body text should be pleasing to look at and easy to read. Factors that influence the look and readability of text include font (typeface, style, size and color), line length and spacing, and alignment.

Limit the variety of fonts used. Overuse of bold or italic, a variety of sizes, colors and typefaces, and decorative bullets can result in an uneven texture of the body text and can be distracting, or messy in appearance. Use boldface type for emphasis and be sure to bold words that carry meaning. Italicize new words, words defined in context and titles.

This text will appear in <b>boldface</b> type.

This text will appear in <i>italicized</i> type.

The face attribute allows you to specify what typeface you would like the browser to use to render the text. Since PC and Macintosh systems vary in the fonts available for their operating systems, it is a good idea to specify two similar fonts, one from each operating system. Use a comma-separated list of font names in order of preference. The browser will search for the installed font in the order listed.

The size attribute allows you to set the font size in one of two ways:

  1. in absolute values using the numbers from one to seven, or
  2. as a size relative to the base or default font using a plus sign (to increase the font size) or minus sign (to decrease the font size) followed by an number.

This text will appear in a <font face="Garamond, Palatino" size="+2" color="#0000FF" > larger, blue, Garamond</font> type.

HTML code enables ordered or numbered lists <ol> and unordered or bulleted lists <ul> in several styles. Lists generally provide information in a more concise way and make information easier to extract. Lists also add variety and visual interest to a block of text, providing they are not overused. Below is an example of a numbered list with a nested, bulleted list in list item one.

    <ol>
    <li>list item one

    <ul>
    <li>sub-item one
    <li>sub-item two
    </ul>

    <li>list item two
    <li>list item three
    </ol>

The numbering and bullet style may be defined by the type attribute. For ordered lists, if some number other than one is desired for the beginning number of the sequence, it may be specified using the start attribute. For example,

<ul type=square> or
<ol type=I start=3>

Type

Bullet Style

disc

square

circle

Type

Numbering Style

1

1, 2, 3, …

a

a, b, c, …

A

A, B, C, …

i

i, ii, iii, …

I

I, II, III, …

Table 2: Bullet and Numbering Style Types

HTML provides a hierarchy of six heading sizes—h1 (the top or most important level) to h6. Rarely will a document require six levels. Review content of the site and use only as many levels of headings as are necessary to organize the content. Level one and two headings are very large. If you require only two or three levels of headings to organize the content, consider using h3 (heading 3) as your top level or level one heading. Whatever heading level you decide to begin with, keep headings sequential and make sure their use is consistent. Headings require both a start and end tag.

When an image file is used as a headings use the "alt" attribute to repeat the heading text in the image element. This way the text displayed in the image will not be lost to users of text only or speech-based browsers, or to those who have turned off the display of images in order to decrease downloading time.

Limit the use of all caps. When we read we scan words and their overall shape helps us to attach meaning. Words set in all-caps have the same rectangular shape and thus take more effort to read.

Figure 9: Readability of Caps versus Lowercase Letters

Keep body text flush left. Centered text takes extra effort to read. Unlike reading text with a straight left margin, when text is centered the eye must search for the beginning of each new line. Also be aware that paragraphs of centered text will create an abstract shape in your layout. Reserve the use of centered text for titles or major headings.

For maximum readability, there is a relationship between text size, line length and line spacing. A line of text should contain about 65 characters; 10-12 words per line. The larger font, the longer the line of text will appear and the greater the amount of interline spacing (leading) required. Unfortunately, since everyone will not be using the same font to view your page, it is impossible to ensure that everyone will see 10-12 words per line. But, since very long lines of text should be avoided, you can restrict the overall line length by placing the text in a table column with a defined width. The only other way to selectively define the end of a line of text is to end the line with a break tag <br>. This is helpful for short passages but not practical for lengthy text.

HTML provides no way of selectively adjusting interline spacing but, again for short passages, leading can be simulated by inserting <font size=...>, a space and a </font> tag before the <br> code at the end of each line. This will force extra space above the line to accommodate larger font sizes.

Top of Page

Navigation Bar
Site Logo