Monday, May 17, 2010

Bad typography on the web



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

by Cyril Chen, Shard



Hey Designers, if you love CSS, layout some comments right here.

photo above: Aimee previews an episode of Futurama on a Macbook where the brilliant use of type and colour is evident at this screen size and resolution so the words: CARGO BAY lets the viewer know exactly where it's at.

1 comments:

  1. In addition to "all browsers across all computer platforms", there are the old geezers like me who have special setting for incoming text. My choice of a big bold font (I need high contrast) frequently causes strikeovers and the lines running off the screen.
    My eyes do't like long lines and I often minimize the screen and rely on wordwrap to keep the text on screen. Not having it means a lot of back and forthing.
    Almost uiversal is the failure of text entry boxes to enable the use of my choice of font with the result of my not seeing my errors. Where can a fix be found? I don't like to beef about it without being able to say where to learn about it.
    gfmueden@verizon.net ===gm===

    ReplyDelete