Images look nice, but eyetracking research shows that visitors look at text - particularly headlines and sections headers - before they notice the images. Snappy headlines that are carefully formatted for readability are a great way to catch visitors' interest and draw them deeper into your site.
People Look At Text First
A research report published in 2004 by several research groups (the Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools) found that text, not pictures or multimedia grab visitors' attention first when they visit a Web page. Furthermore, the report found that: "dominant headlines - not photographs - most often draw the eye first upon entering the page."
However, not all headlines are created equal. Some draw visitors in and encourage them to read the text below, but others act like visual stop signs. For instance, the study found that underlined headlines discouraged visitors from reading further and acted as visual breaks" that "discouraged people from looking at items beyond the break."
The entire study is quite long and comprehensive. We'll be referring to it again in future Webmaster Tips articles. If you'd like to read the entire report for yourself, it's available from the Poynter Insitute Web site in an English language version or a Spanish language version.
This research shows how important it is to create readable headlines and section headers. Fortunately, CSS make it really easy!
Add Emphasis With Size And Color
The study found that visitors quickly scan headlines before jumping quickly to other information. "On average, a headline has less than a second of a site visitor's attention." Headlines and section headers have to clearly stand out from the rest of the page content if they're to be noticed at all!
Font family, font size and color are the main ways to visually distinguish header text from regular content. Use these three CSS properties to standardize the display across each page in your site:
Font-family: It's perfectly acceptable to display headline text in a different font from article text.
Font-size: Select a size large enough to catch the eye, but not so large that it overwhelms the rest of the text.
Color: Select a font color and/or a background color that contrasts with regular text. Keep Web site accessibility principles in mind though and be careful with red/green color combinations because that's the most common form of color blindness.
You have a lot of leeway when designing headline and section header text. The most important thing though, is to be consistent. If you have three articles or sections on the page, the colors, fonts, and text sizes shouldn't change from section to section - or even from page to page in the site.
Remember to create a consistent look and feel across pages. That helps keep visitors oriented and comfortable on the site.
Consider the difference between this example page that is inconsistent and this example page that uses the same "rules" for color, font, etc.
Anchor Article Text To The Section Header
One of Web designers' biggest complaints is how ugly standard header text looks. Here's the example image from our May 2001 HTML Tip Structure Documents With Header Tags:
How about the size of that all-important H1 tag? It seems more suited to announcing big events like "WAR OVER" than introducing more mundane matters like "Sale Items" and "How To Order."
Fortunately, you can control that display with the CSS properties we just discussed (font-size, font-family, and color) and can use the "margin" and "padding" properties to control the space that browsers automatically add underneath header text.
Always remove extra spaces below the headers so the text looks like it "belongs" with the headline. This is particularly important when you include a "blurb" or text that briefly describes article content.
Here's the default display in Explorer 6 for Windows:
We can create a more attractive display by added some CSS properties to the header text and creating a class called "underheader" to apply to each paragraph that appears immediately below header text.
See the spacing difference? All three pieces fit comfortably together into a single unit.
Space Text To Add Readability
The technique of adjusting spaces between characters is called kerning in the print layout world. HTML does allow a very limited amount of letter spacing, but it has to be done with non-breaking spaces ( ). With HTML, you can add more spaces, but not decrease spacing.
CSS gives you much better letter and word spacing control using these two properties:
letter-spacing: adjust the spacing between letters in a single word.
word-spacing: adjust the spacing between individual words
Generally, the only time letter and word spacing is an issue on Web pages is when the type is quite large - as with headline text.
You'll often find that adjusting these properties for your headlines creates a much more dramatic impact and saves space! Just how often does a technique save valuable page real estate and create a more attractive layout?
Here's an example page that shows the difference between a headline that uses kerning and one that doesn't.
Be careful using negative values in CSS declarations: they can sometimes cause unexpected and awful displays in some browsers! However, sometimes it's the only way to create the layout effect you need.
Use NetMechanic's Browser Photo tool to make sure that your visitors see the same page layout that you do. Even simple coding errors can break your page in some browsers. Browser Photo shows you how your pages look in 16 different browser versions and operating system combinations. It helps you fix problems before they turn visitors away.
