FrontPage Web Design banner.

Text | Serif vs. San Serif | Paintbrush | Bullets & Numbering | Symbols | Horizontal Lines

Text

Always use high contrast between your text color and your background color for easy readability.  A rule of thumb is to pick several fonts to use within your document: One for your heading, one for your subheading, and one for your body text.  Ariel or Veranda 12 pt. are good sans-serif fonts for body text and Times New Roman 18 and 14 pt. bold are good serif fonts for headings and subheadings.  Arial Rounded MT Bold is also a good font for headings and subheadings.  It is all a matter of taste!

Times New Roman & Arial

Heading
Subheading
Body Text

Arial Rounded MT Bold & Arial

Heading
Subheading
Body Tex

Use bold and/or italicized text when you want to emphasize your text.  Do not underline text – underlining usually represents a hyperlink.  Left justify your text using centering and right justification only when needed, and don’t animate text because it is difficult on the eyes, especially for people with visual impairments.

The difference between sans serif and serif fonts.

          Serif               Sans Serif

Serif versus Sans-Serif

Notice the extra lines at the end of the strokes in the left character. This is a
serif font.

The right character does not have these strokes and is said to be a sans-serif font. (Sans is the French word for without.)  Times New Roman is a commonly used serif font.  Arial is a commonly used sans-serif fonts.

Serif fonts are usually easier to read than sans-serif fonts. This is because the serif makes the individual letters more distinctive and easier to recognize quickly.  The commonly used convention for printed work is to use a serif font for the body of the work and a sans-serif font for the headings because printed works generally have a resolution of at least 600 dots per inch; whereas, computer monitors are usually only 72 dots per inch. This lesser resolution can make very small serif characters harder to read than the equivalent sans-serif characters because of their more complex shapes.  Therefore, sans-serif fonts should be used for body text and serif fonts for headings on the Web.

Paintbrush format paint brush

If you create a text format you really like, you can copy it and apply it to other text. For example, say you've created a sub-heading Arial, 12-pt, bold text. You can use Format Painter to consistently apply this format to all your sub-headings. To copy the format of your text, select the text with the format you want to copy. Click the Format Painter button on the Standard toolbar. The cursor turns into a paintbrush. Use the paintbrush to select another body of text. This "paints" the text with the same format as the text you selected in the previous step.  If you want to format several sections of text at one time, double click on the paintbrush instead of single clicking.

Bullets and Numbering

If you need to add Bullets and/or Numbering to your text, you can do so by creating a list, highlighting the list, and clicking on either the Bullet or Numbering button in the Toolbar or by clicking on Format, Bullets and Numbering, Plain Bullets, or Numbers.  If you want to create your own picture bullets, click on the Picture Bullets tab and select either Use Pictures from Current Theme or Specify Picture.  Browse for the location of the picture and click OK. You may need to resize the bullet once it has been inserted. 

 Adding picture bullets.     Setting paragraph properties.

If you would like to add more vertical spacing between your list items, click on Format, Paragraph, and Spacing.  You can add spacing before or after a word or sentence.  I usually add 6 or 12 points spacing before or after a word or sentence. 

Remember when spacing that hitting the Enter key will add paragraph (double spacing) to the sentence, while Shift + Enter will add single spacing, but single pacing takes on the attributes of the previous line. Do not use single spacing if you do not want to take on the attributes of the previous line.

The table below shows the difference between regular bullet spacing in the left column, and 6 pt. spacing in the middle column. The right column is an example of a bulleted list using a graphic.

  • Template

  • Tables

  • Borders

  • Graphics

 

  • Template

  • Tables

  • Borders

  • Graphics

bullet

Template

bullet

  Borders

bullet

 Graphics

 Symbols

You can insert a Symbol into your text by clicking on Insert, Symbol, selecting a symbol, Insert, and Close. Here is an example of an inserted symbol, Trademark™.

Symbols that can be inserted into a web page.

Inserting a Horizontal Line

If you want to separate items or sections of text, you can insert a horizontal line.  Click Insert and Horizontal Line. You can format the line’s color and width by right clicking on the line and setting the horizontal line properties.


Setting horizontal line values.


Web Design Tips | ADA Standards | Design Tools | Local & Live Sites | Browser Compatibility | Creating a Home Page | Text | Tables | Hyperlinks | Pictures | Spell Checking | Forms | Search Forms | Discussion Webs | Meta Tags | Resource Links | Lesson 1 | Lesson 2 | FrontPage Booklet | Home |