What's New Tutorial Index References RSS Feed Contact

Increasing Readability

If you read and make use of Tesserae, you're likely mainly dealing in text with some images and videos for garnish. One thing you've probably noticed as you start building a site is that the default styling in nearly all browsers isn't exactly appealing to look at or read.

A basic HTML page with no styling applied
Here's a sample page of text and a few floated images. Aside from the plain font, lines are scrunched together, long, and impenetrable, and especially around our images, things run into each other.

Thankfully, browser defaults are meant to be overwritten. There are plenty of good, efficient, simple ways to give your text room to breathe that'll help whatever you're trying to say come across better. Here's five easy ways to make your text look nicer and increase readability.

Making good use of headings

The first of my suggestions on readability is the only one that explicitly involves your text and markup: section headings. If you're writing an especially long piece, say, an essay where you're discussing multiple topics, try to break things down into logical sections that flow into one another, and split the sections up using headings. This gives your readers not only an easy way to skim through your text for what's relevant to them, but if they're reading the whole piece, it provides a convenient place to stop and catch their breath.

Headings applied to text
We've split our sample page up into sections using h2 elements.

Already a good bit easier to read, but believe me, we're not stopping here.

Line height

Getting into what CSS properties you can use to make text easier to read, my personal favorite, and one I think is rather overlooked, is the line-height property. Simply put, the default line height in the browser is pretty short and scrunched together; line-height lets you put some breathing room between each line.

body { line-height: 1.5; }

You can either set your line height to a pixel or em value (which will make it use the line height of that font size) or go unitless, and you can either apply it to your body element to apply across the page or just to specific elements, like p. Unitless values are the easier option if you simply want to double-space your text (line-height: 2;) like a paper.

Text spaced out more with line-height
Applying the line-height property to the entire page spaces out all the text on the page, making it easier to read.

Width (and line length)

But at this point, the text is still stretching across the entire width of the viewport. Long lines of text can be especially bothersome to read, especially if the user has their browser maximized on-screen. To reduce the amount of scanning your reader's eyes need to do, constrain the width of the text's container, or, for a simpler page, constrain the entire width of the page.

body { line-height: 1.5; width: 800px; }
Text spaced out more with line-height
Constraining the width and splitting the text into more paragraphs seriously reduces the congestion on the page.

Your paragraphs are likely to grow much longer as a result of this. Too many lines in a paragraph can be just as bad as the lines being too long in the first place. When in doubt, remember that a paragraph expresses a complete thought, and 5-6 sentences is your goal for a paragraph. If you can get the paragraph under six lines or so, you're golden.

Margins

You might notice the text runs rather close into the images. You can fix this by setting a margin value on the images, which will produce some extra negative space around them to keep other elements a comfortable distance away.

img { margin: 0 10px; }
Images get a little more breathing room with a margin value
Setting margins on the images helps keeping the page looking as clean as possible.

If you set two values on the margin shorthand property, the first value will refer to the top and bottom margins of the element and the second value will refer to the left and right margins.

Font families and sizes

A final suggestion: fonts! The default font often used in browsers, Times New Roman (or its doppelganger Times), is legible, but stiff, cramped, and rather tedious to read. Using a more comfortable serif font (or even going sans-serif, depending on the look you want) and setting a better size is an excellent way to give your text an extra unique touch and increase its readability.

If you're going serifs, Georgia is pretty second to none, though Palatino Linotype (or simply Palatino on Macs) and Bookman are also very common and appealing to read on screens. Common, easy-to-read sans-serif fonts include Verdana (and its Mac equivalent, Geneva) and Trebuchet MS. And of course, if you pack in your own fonts, you can se just about anything you want.

body { line-height: 1.5; width: 800px; font-family: Georgia, Bookman, serif; font-size: 62.5%; }
h1, h2, h3, h4, h5, h6 { font-family: Verdana, sans-serif; }
p { font-size: 1.5em; }

(Remember that you can set as many fallback fonts in a font stack as you want; it's useful to have a couple in case one of them fails to load or the user doesn't have them installed.)

Custom fonts top off our lightly-styled page of text
Altogether now, we can see what a dramatic difference our styling had on the original page versus the formatted one.

Summary:

  1. There's several easy, quick ways to reduce the amount of congestion on a page full of text.
  2. Splitting the page up into sections using headings is a good place to start.
  3. The line-height CSS property gives each line more space above or below it, making it less easy to get lost in a big paragraph.
  4. If text is running from one side of the screen to another, constrain the width of its parent. You don't need more than a few words per line.
    • As a corollary, if you have more than six lines in a paragraph, consider splitting it into two paragraphs so it's less easy to get lost.
  5. If you have images inline in the text, always set margins so they have plenty of space around them to breathe.
  6. Finally, change out the fonts and increase the sizes! A good, clean, strong body font will always make your text more interesting over the cramped, stiff Times New Roman.

Further reading