How to Improve the Body Text in Your Web Projects

When designing for the web, a good rule of thumb is to start with the body text. This is the part that the readers will be looking at most, and if doing so causes a strain, they may give up and go elsewhere. So it makes sense to get this right. Of course, “right,” is somewhat subjective and the ideal characteristics of your text will depend on many other factors. But the principles below will serve as general guides to help make your text more legible and readable.

Look for a moderate x-height

The x-height is the height of a lowercase x, and it’s used as a proxy for the height of the lowercase letters relative to the height of capitals (the “cap height”). The bigger the x-height, the harder it gets to distinguish the “n” from the “h”, and you don’t get a nice, clear separation between uppercase and lowercase letters. If the x-height is too low, you’ll reduce legibility as you effectively just reduced the font size. So low x-heights are more of a stylistic choice than a functional one. For readability, aim for a moderate x-height, at just over half the cap height.

Prepare for shrunken text

In the era of small screens, fingertip zooms and responsive design, users might be reading your text at a smaller size than you envisioned. So always zoom out and see how your options look. In particular, you want open apertures – when you zoom out, could the “c” be mistaken for an “o”? If so, the aperture is probably too small. Likewise, typefaces with a large contrast – that is, the difference between the thin and thick strokes that make up the characters – can be problematic at small sizes. Yes, readers will figure out what they are — but they won’t appreciate the extra effort.

Be generous with your sizing and spacing

A font size of at least 14 pixels is generally recommended for the web, but you can go higher than this if you particular typeface demands it. Don’t be stingy with your white space either — a line height of 120%-130% is a good rule of thumb. In terms of line length, you’re probably tired of hearing the 50-75 character rule. But studies have shown that you can get away with wider lines on screens without affecting comprehension. So don’t be afraid to go up to a default of 100 characters per line if your design warrants it.

Have you got styles?

Almost every website is going to use the regular, bold, italic and bold italic styles at some point, so you must ensure you have these four. If your preferred choice doesn’t have an italic style, tread carefully — some browsers will attempt to emulate this style by simply putting a slant on the regular style, and the results can sometimes be pretty poor.

Lose or gain weight if you need to

Check the weight of your body text. You don’t want something too heavy or the readers will feel like they are wading through mud as they read. Also, if your body text is heavier than your header text, you’ll draw the reader’s eyes away from the headline, which is where you initially want it to be. So heavy body text limits your header options. On the other hand, if the typeface is too light it can affect legibility, especially at smaller sizes. For body text you want function over form — it’s best to take the middle path.

Experiment

Every typeface is its own unique beast, so don’t rule one out (or in!) based on your first assessment. Experiment with your spacing, font size, line length — all the variables at your disposal — there might be another configuration that’s a better option for your project.