Web Design 101: Please Don't Squish the Type!

http://www.landaudesignreview.comOne of my favorite things about web design is the flexibility it offers in terms of how to lay out text. With the arrival of CSS several years back, suddenly web designers who came from a print design background (like myself) got the control they had been longing for. Not only could we control the typestyle and color, but now we could control line spacing and even letter spacing. Wow, what a wonderful thing.

And so I respectfully request, when designing your website: Please don't squish the type!

What does"squish the type" mean?
When you arrive on a web page you want to be able to read what is there. But users do not read online as they would a magazine or book, instead they skim. They need the text broken up into bits so they it is easier to skim, and faster to grasp the content on the page. When you squish the type, you mush all the information into long paragraphs without a lot of visual breaks between the information (see screen shot below). If you add white space between your lines, and vary type size and color, it gives breathing room for your eyes, which makes it more likely a user will skim a little slower.

Here's an example of a web page that needs help. They are really squishing the type. It's unlikely anybody will get beyond the second paragraph because that third paragraph looks intimidating!

How users read online
It has been conjectured that browsing a website is a cross between reading a book and watching TV. When somebody reads a book, their mind is engaged in actually comprehending the words through the act of reading. They usually don't have visuals (if it's a novel say), so their mind is also actively engaged in visualizing what they are reading about.

On the flip side, when somebody watches TV, they don't have to do anything mentally in order to take in the information. They just stare at this big box, and watch what is shown. Hence the term "couch potato".

Usability experts have shown through research that browsing the Internet is somewhere in between. Some users will be engaged mentally, while others want the website to do the work for them. You must plan for this when you design, because most people will not read the precious words you have written, so you must help them read it.

Lay out your type so people will read it

• Use bold headlines.
• Create a larger, introductory paragraph that summarizes the page.
• Don't have long paragraphs - break up the paragraphs into more bite-size pieces.
• Use line spacing to bring white space between the lines of text
• Do not make columns of text more than 550 pixels wide
  
• Use subheadlines as much as possible
  
• Use bulleted lists as much as possible
• Hyperlink keywords and important points so users can get more information, and so it makes the key concepts easier to skim.

Oftentime clients will have great concerns about not creating scrolling in an article, and they want to squash all the lines together to keep everything within one page length. The only trouble with this theory as while it might prevent scrolling, it also inhibits reading. So would you rather they read the first couple paragraphs and not scroll, or read nothing at all? Besides, current usability studies show that users will scroll if they are interested in the content.

What you SHOULD do
Here's an example of the same page shown above in a much more readable fashion (after Landau Design review and changed it). The user can now decide how much or how little to read.

Site referenced here: http://www.capdsupport.org

User behavior is part of the design process
We must remember how users read content, and only then commence with the creation of that content. How type is laid out should be considered when type is written. You put a lot of effort into creating your website, you certainly want to encourage everybody to enjoy your great work!

Landau Design is a web design and online marketing company specializing in small business services. Let Landau Design review your website and help you take it to the next level!