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 your CSS rule (known as the “font-stack”):
p {font-family: Verdana, Arial, "Arial Black", Helvetica, Tahoma, sans-serif;}
If you want an obscure novelty, script, cursive make a GIF or use @font-face (CSS3).
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 divs (use padding:) or borders, 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 point 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). See text pages 483.
12) Cascading Style Sheets (CSS) allow most of the things (indents, tracking, leading, etc.) that you needed to trick HTML into doing.