Type Tips
The typeface you choose for your Web site is critical. If you choose the wrong font you could be conveying the wrong message. You may be changing your corporate identity or worse your page may display all wrong. Too many typefaces and styles will make your Web site look like a kidnapper's ransom note. The placement of type on the page is as important as the addition of graphics. Use a grid to help line up the blocks of text. Look at the Design Tips and Page Layout Tips pages for more information on grids and page layout.
Font Choices
The text you choose for your Web site will set the tone. If you were to take flying lessons you would chose the instructor with the most professional, business-like no-nonsense sign. The first line of FLYING LESSONS would be your choice. On the other hand if you were driving in the country looking for real fresh eggs you would chose the farmer with the hand written sign because you know he is too busy feeding the chickens to go to town and have a professional sign made. The sign with FRESH EGGS that is professionally designed does not give you the feeling the eggs would be as fresh.
- A sans serif typeface like Arial or Helvetica displays better than a serif typeface such as Garamond or Times Roman.
- No two computers have the same fonts installed
- If you hard code the text on your site, stick to standard typefaces
- Fonts may be embedded
- Embedded fonts = larger file sizes and longer downloading
- Keep your font size large enough to be read by older visitors!
- Avoid italic fonts--Italics are difficult to display within the constraints of a square pixel grid and will almost always look awful, especially at small sizes.
- Use only one or two fonts and avoid "ransom note" documents
Return to the top of the page or scroll down for more type tips.
Headlines
- Create headlines with unusual typefaces in a graphics program
- Import headlines as GIF or JPEG images
- Reduce the palette of those headlines to keep the graphic file size small
- Remember -- Many users switch off, or can’t display, graphics
- Use the ‘ALT’ tag for graphics that contain text so that the headline message is not lost altogether
Return to the top of the page or scroll down for more type tips.
Body Text
- If using a multi-column layout, the column height needs to be considered
- Each column should fit comfortably into the viewable height of the screen
- Don ‘t make the reader have to scroll a page to go from one column to the next
- Height is determined by the minimum default browser height, which is about 400 pixels, regardless of computer type
- Keep line lengths short
- Long lines make it difficult for the eye to find the next line—causing eyestrain
- Restrict line widths to about three or four inches
- Avoid placing text from edge to edge on the screen
- Place ‘hard’ <BR> (break) characters where you want a carriage return—this keeps lines short and controls the typographic shape of the right-ragged edge
- Choose typefaces that are designed especially for the screen
- Don’t have too many lines, boxes and graphics
Return to the top of the page or scroll down for more type tips.
- What you see is not what you get!
- You can never be totally sure how a browser will display your text.
- Each browser is different and PC users have, depending on their monitor resolution, the option of using ‘Large’ or ‘Small’ fonts.
- Leave room around graphics in case the text displays unexpectedly on a PC
Return to the top of the page.
 |
 |
 |
 |
 |
||||
 |
 |
 |
 |
|||||