Penn State Learning Design Community Hub

The Best Choice.. according to the experts

1. Include white space or padding/margin on the left and right sides of a block of text
2. Increasing space or "leading" between lines can enhance legibility
3. Long lines of text can decrease legibility
4. Include "visual organizers" like list bullets, data tables, and bold text. See Writing for the Web for more details
5. Use H1,H2,H3 tags to divide long blocks of text into sections
6. Shaikh & Lenz (2006) found that users expect the following
   
   1. Home page link on the upper left
   2. Menu links to be on the left
   3. Search box to be at the top of the page towards the center
   4. The "About Us link to be in the footer of the page

Rationale

The first three specifications are generally aimed at incorporating white space

Bernard, Chaparro and Thomasson (2000) – "Medium levels of whitespace should produce higher levels of satisfaction and overall preference than very dense or very spread-out use of space. This was substantiated by statements made by some participants that the Low level of whitespace was too "cramped" to afford easy reading. The High amount of whitespace was described as being easier to read than the Low space, however the participants stated that they felt it was slower since they had to scroll more to see all of the text."

Basic Information

How to increase margins, padding

You can use CSS formatting add white space on the sides. For example, the following code indents all text 25 pixels to the left and right.

body {margin-left: 25px; margin-right: 25px; }

How to increase line spacing/leading

You can use CSS formatting increase the leading in all paragraphs. The following code stretches line height to 120% of normal.

p {line-spacing: 120%}

How to decrease line width

There are several CSS formatting options available to decrease line width.

1. You can increase the right margin until the line width is what you desire at your target screen size. See the code below
   p {margin-right: 50px;}
2. You can fix the width of a paragraph to a specific width (e.g. 550px). See the code below
   p {width: 550px}
3. In lists, you can adding padding below each list item. See the code below
   ol li,ul li {padding-bottom: 5px}

References

Additional Links

• WebAIM Accessible Text Layout
• Usability.Gov Guidelines
• CSS Formatting Tutorials