Design: Web: Text
Text is a logical element of a web page. You'll provide information, label diagrams, and provide help for users. You can enter text directly into your web page or store it in a word processing document.
Keep a style sheet showing the fonts, sizes, styles, colors, and indentation for each page to maintain consistency.
Fonts
The default font is dictated by the browser that the viewer is using. Although it's possible to change the font, the default works best in most cases.
CAPS. Avoid using ALL CAPS. They are difficult to read, particularly on a dark background.
Font Size. The sizes are relative. In other words, you can only make them larger or smaller but not dictate a specific size. The font size of this paragraph is good for reading large chunks of information. Use the standard size. The next size larger or a bold style is good for headings and subheadings. Stick to two or three sizes and styles of text. Think readability. If your font size is too large, the text will spread across the page onto multiple lines. If your font size is too small, your information will be difficult to read.
Keep in mind that the end user controls the fonts through their web browser. If you use a small font, you may remind them that it can be adjusted using the VIEW menu in most broswers.
Font Styles. You can use styles and colors to add interest. Italics is difficult to read when it is small.
Color
Use caution in applying colors. Be sure to provide enough contrast. Also, avoid competing colors.
Scrolling Text
If you have to scroll more than three or four screens, break up the page into multiple pages. Be sure to use headings if you have long scrolling pages. Headings can help a person find their place. It also helps if you provide a space between paragraphs.
Justification
Left justified text is the easiest to read for multiple lines of information. Many web developers center their text which also makes it difficult to read.
Headings and Subheadings
Use the standard formatting tags for establishing heading and subheadings. Then, stick to these for a consistent layout.
Read Fine Points: Little Things that Make a Big Difference. Examine their design ideas. Create your own list with examples from your favorite websites.
Read Web Style Guide: Typography and Website Style Guide: Editorial Style for some background information on typography and editorial style.
As you develop text, consider the following designs:
- Fonts
- Scrolling Text
- Justification