Increasing Document Readability

Document readability is a huge part of a site’s overall usability.

The ‘bad’ text’s code (this assumes no CSS is modifying the parent elements):

bc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

A quick fix in the line-height of an element is all you need to make your document more readable.

Here’s the good code:

bc.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

And the result:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nisl diam, faucibus et, convallis nec, ullamcorper aliquet, nibh. Duis ullamcorper. Aenean ultricies mi non massa. Duis risus. Aliquam erat volutpat. Etiam faucibus aliquet odio. Proin vitae tellus id libero aliquet sagittis. Sed metus enim, sollicitudin vitae, tristique vitae, consectetuer non, nunc. In hendrerit, lectus nec sollicitudin pulvinar, diam massa posuere lectus, at scelerisque justo risus suscipit lorem. Vivamus sit amet neque. Donec non leo ut elit fermentum feugiat. Curabitur a mi.

It’s amazing what effect changing the line-height has on a the eyes. In the examples, I’m using the measurement of ems but you can use whatever unit of measure you prefer.

When you’re feeling more comfortable with CSS, you can use the [shorthand font selectors for your documents].

Downsides of this technique? It clearly takes up more screen real estate, just like changing the line-height in your research paper that required 15 pages to 2.5 meant you had to type that much less.

Advertisements

Comments are closed.

%d bloggers like this: