Knowledgebase: Development, Design, FCKEditor
Fonts and Text Formatting
Posted by Viktor Klymonchuk, Last modified by Viktor Klymonchuk on 10 December 2010 06:33 PM
According to Karen Schriver, a document design expert, studies of writers and editors working online have found that reading online can take people 20 to 40 percent longer than reading on paper. Fortunately, considerable research has been done on ways of making online displays more "legible and aesthetically pleasing."
In Appendix C of her book, Dynamics in Document Design, Schriver provides advice based on a synthesis of this empirical research as well as her own extensive practical experience. A few of these tips related to fonts and text formatting are:
* Limit the variation of typography to a few sizes from only one or two typeface (font) families.
* Avoid using italics since it is hard to read online.
* Avoid underlining for styling text within paragraphs or headings. Reserve underlining for link displays.
* Do not use all uppercase lettering (for example, ALL CAPS) for styling paragraphs. Instead, use uppercase and lowercase lettering. When more emphasis is needed, try other cues such as moving to a larger point size.
* Use uppercase lettering for labels or headings.
* Use justified left, ragged-right margins for your text.
More Expert Advice:
"When laying out text, actually read it! Think about how someone with even less interest in it than you would look at it. Also, short line length is a good thing. Often Web pages let the sentences run wild–best to keep them under 400 pixels." (Brady Clark, former designer at HotWired.)
"White space is your friend. White space doesn't necessarily need to be white–it can be any color you want, but it should be blank. Eye relief is the concept here. Don't be afraid to leave some space around a GIF. Fat margins around body copy work nicely as well . . . It helps unclutter your design and focus your concept." (Jim Frew, HotWired.)