Site maintained by John Beatty
Top Twelve Type Tips
1) Antialias large type (display type, that is anything over 12 pixels) not small (body type) typically <= 10 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 on the PC), Verdana, Courier New, Impact, Times Roman (Times New Roman on the PC), 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 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.; you can add space to images: <img src="pic.gif" hspace="10" vspace="10">
9) Keep lines of body text short (3 inches for 12 pixel type)
10) Underlining is for links only. More sites turn off underlining even for links.
11) Use real typographic characters for headline/display type. (e.g. “ ” © real dash = — not --). Either do in Photoshop 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: 150%;}.