Monday, 17 May 2010

Bad typography on the web

Aimee previews an episode of Futurama on a Macbook

The goal of most web sites is to communicate with customers: to provide helpful information and to increase sales.

Legible typography, as a part of design, is a tool for enhancing the user experience.
Web sites, sadly, suffer from technological limitations in rendering type in a moveable feast.

Print typography does not translate to the web well, and this can lead to poor usability.

a)  Web browsers do not come with hyphenation dictionaries, so words cannot automatically split over two lines when a line is too long, as is common in print media.  This becomes a problem with full justification because browsers can squish words together, or increase the space between words; both decrease legibility.

While a paragraph might look nice with flush left and right margins, its content might also be compromised by poor legibility.

b)  Unlike with print media, web sites do not display consistently between browsers and computers.

By adjusting the web site's width depending on window size/screen resolution, line length can vary.

Lines too long or too short reduce legibility, and this is true in print also.

c)  A manually labour-intensive method to enhance legibility with full justification is to add soft hyphens (­) at the break points of all words that potentially can be at the end of a line.

Remember to account for all browsers across all computer platforms.

d)  Centering headlines and subheads can reduce legibility
by over-emphasizing their content, and by having the eye travel widely around the page.

Visual communication follows different rules, depending on the media.  Reading on the web is a bit better than reading a fax, and nowhere as good as reading printed material.

When rock climbing, wear proper footwear, not flip flops to avoid sweaty toes.

More Learning

Bad web typography: full justification

Web typography with CSS3

Readability:  making web pages easy to read