TypeTalk: Dos and Don’ts for Effective Web Content and Typographic Treatment
|
Viewing and reading habits differ on the Web from those in print. Therefore, you need to take steps when preparing and styling content to reflect these differences. Regardless of where text content appears, your goal as a designer is to attract and hold your readers’ interest. In print, it is common practice to bookmark a page, or return to read it at a later date. But on the Web, it is more likely to be “now or never”; that is, once a person leaves a page, chances are they might not return.
Here are some guidelines to help attract viewers and keep them engaged:
Do
Keep content clear, concise, and crisp. Web content should be economical, and not contain more (or larger) words than necessary to get the point across. Readers have a shorter attention span for lengthy copy on the Web, so write (and edit) accordingly.
Use shorter paragraphs to allow viewers to more easily “scan” content.
Add a line space to separate paragraphs for increased readability.
Use subheads, bulleted lists, and other “chunking” techniques to break up lengthy copy and organize content into small, digestible bits.
Add pages as necessary to avoid lengthy scrolling.
Keep most important information highly visible, and “above the fold” (to borrow a term from print design). Navigation elements should be easy to find, preferably on top and/or on the left, and on every page.
Establish appropriate typographic hierarchy. Style the type with enough contrast and emphasis to reinforce this.
Add a word space before and after dashes to allow for more line-break choices. Without spaces, most browsers will read the entire phrase as a single word, which often results in unsightly deep rags if hyphenation is not used.
Choose text colors and backgrounds carefully for maximum readability under varying conditions.
Don’t
Justify type on the Web, as the lack of hyphenation and the variation in type size from viewer to viewer can create unsightly rivers and holes.
Make manual line breaks or word breaks to adjust a rag as one does in print, as text flow is unpredictable on the Web.
Make text columns too wide or too narrow, both of which can greatly reduce readability. Two- and three-column text grids are a safe way to go.
Drop small text out of black or a color close in value, both of which can be difficult to read.
Set a lot of text in all caps, which reduces readability.
Examples
This graphic designer’s strictly typographic web site draws you in and down through the page with its effective typographic hierarchy, from the navigation elements on the top to the headline and pull quote, down to the body copy.
Lots of information, but it is all easy to find due to the strong heads and subheads, good contrast, and a composition that draws you in and around the page.
Whole Foods
https://wholefoodsmarket.com/
This page’s lengthy copy is organized with hyperlinked bulleted points in order to keep the most important information visible without scrolling, often referred to as “above the fold.”
This site successfully organizes its content (in three languages, no less!) with a smart, simple typographic layout, good typographic hierarchy, and effective use of color.
Gray type and background can be challenging to use effectively, but this site achieves it with a clean, uncomplicated type treatment and solid background for the nav bar on the top and the menu on the left.
Energy Kids
https://www.eia.gov/kids/energy.cfm?page=1
This site is attractive to both kids and adults alike, with its liberal use of white space, effective use of graphics
 |