Site maintained by John Beatty
Top Twelve Type Tips
1) Antialias large type (display type, that is anything over 16 pixels) not small (body type) typically <= 12 pixels.
2) Use screen fonts where possible (Verdana sans-serif, Georgia serif). Made for monitors, and these two are cross-platform.
3) Cross-platform fonts better: Arial, Comic Sans (Comic Sans MS onWindows), Verdana, Courier New, Impact, Times Roman (Times New Roman on Windows), Georgia, Wingdings (also Dingbats on Mac).
4) Don’t let the user define fonts. Give choices in the CSS rule (known as the font stack, which tries the first one listed, then the next and so on):
p {font-family:Verdana, Arial, Helvetica, "Helvetica Narrow", Tahoma, sans-serif;}
If you want an obscure novelty, script, cursive make a JPEG or GIF or use @font-face (Google or Web fonts) so user can download the font.
5) AVOID ALL CAPS, especially in large chunks of type. We recognize words in part by shape.
6) Avoid body text that is italic or bold.
7) Don’t center body text.
8) Keep text off the edges of <div>s (use padding:) or border:, graphics, etc.
9) Keep lines of body text short (3 inches for 12 pixel type).
10) Underlining is for links only. Most sites turn off underlining even for links.
11) Use real typographic characters for headline/display type. (e.g. “ ” © real dash = — not --). Either do in Dreamweaver or use character entities (e.g. © for ©, ’ for apostrophe).
12) Cascading Style Sheets (CSS) allow most of the things (indents, tracking, leading, etc.) that you need to trick HTML into doing, e.g. p {line-height: 1.5;}.