Marketers often mistakenly assume that font, color, layout and other style guidelines applicable in the print world can also be used for online media. The problem is that online media is typically viewed on a monitor where the resolution is far lower than in print. As such, to deliver optimum readability to clients, prospects and other users, marketers need to follow different style guidelines on the Web (as an aside, we sometimes find that attorneys protest when marketers deviate from the styles the attorneys are accustomed to (e.g., full justification vs. left justify); what needs to be pointed out politely is that styles that work in briefs and other print communications that attorneys are familiar with don't necessarily work well in online media).
Reproduced below is a short list of 10 legibility guidelines published by Tim Ash, a landing page expert, in an article on SearchEngineWatch, that legal marketers should follow when designing and publishing web pages, blog posts and email communications (our additional comments are in italics in brackets):
- Font styles: "Use sans serif fonts, such as Arial, Helvetica, or Geneva. Don't use serif fonts (with small lines at the end of characters) such as Times Roman, Courier, or Palatino. At typical monitor resolutions (which are a lot lower than printed materials), serif fonts are harder to read." [We find 10 point Verdana or Arial is best for body copy, and 12 point Arial for headlines and other "call out" text].
- Font sizes: "Use 10-12 point fonts for most body text. Larger and smaller fonts reduce reading speed. Consider increasing your font size by a couple of points if you're targeting an older audience, and make sure that you allow sufficient spacing between lines as well." [We find 10 point Verdana or Arial is best for body copy, and 12 point Arial for headlines or other "call out" text]
- Font consistency: "Don't use a wide range of font styles, colors, or sizes."
- Underlines: "Don't use underlines in regular text. Underlines are expected only on hyperlinks. If you must emphasize text, consider other methods (e.g., different size, bolding, italics, text color, or background color)." [bulleting can also be used for emphasis/highlighting and is easily scanned; also be sure not to overdo a highlighting technique - e.g., bolding every line in a bulleted list - or you defeat the whole purpose of emphasis, which is to be discrete]
- Justification: "Don't justify paragraphs of text to create equal-length lines. The jagged ends of unjustified lines have been shown to help people position themselves in the text and increase reading speed and comprehension. Always use left-justified text. Don't center body text, especially bullet lists of varying line lengths."
- All-caps: "Avoid using text in all capital letters. It has been shown to be harder to read." [ALL CAPS is also interpreted as shouting]
- Line length: "Blocks of text over 50 characters wide are harder to read. Consider putting in forced carriage returns (also called "hard breaks") in your paragraphs to make sure that your lines don't become too long when displayed on wider computer screens."
- Contrast: "High contrast between text and background increases legibility. Black text on white background is best. Stay away from low-contrast text/background combinations unless you're intentionally trying to deemphasize something. Don't use reverse font treatments (lighter text against a darker background)."
- Link text: "Blue underlined links are a de facto standard (as is the purple color for previously visited links). Don't change these defaults unless you have a compelling reason." [also a good idea to use a distinct behavior for "hovering" - that is, when someone moves their mouse over a link - example: hyperlinked text is underlined, but then underline disappears on hover.]
- Text background colors and images: "White backgrounds for body text are a strong convention. Navigation and header background colors should also be relatively light to enhance legibility. Don't use high-contrast graphical images as background for text."
Read the full article (addressing other landing page best practices) on SearchEngineWatch.
Comments