Get Yearly ALL ACCESS, now just $3.99/month
  • $3.99/month, billed as $47/year (normal price $348)
  • Discounted price valid forever - Renews at $47/year
  • Access to millions of Graphics, Fonts, Classes & more
  • Personal, Commercial and POD use of files included

How to Improve the Body Text in Your Web Projects

How to Improve the Body Text in Your Web Projects main article image
Posted on August 17, 2017 by Roemie Hillenaar from Creative Fabrica

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.


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.

Receive Digest

Receive a weekly digest that highlights the most popular articles on The Artistry.

To show your appreciation, you can add this article to your favorites or share it.

1X Added to favorites

No comments yet
Get access to all 9,573,408 designs. Get 10 downloads 100% free
Free Graphics

Every week we release new premium Graphics for free, some available for a limited time only.

9113904 Graphics

Get access to 9,113,904 Graphics as part of our Graphics subscription. Check them out now.

Discount Deals

Our discount deals are premium products for just $1. Available for 1 week only, so act fast!


Download 9,573,408 designs

Get 10 downloads 100% free

Activate Free Trial
Daily Gifts

Download Now

Read Next

How to Transform an Empty Can with Air-Dry Clay
Lindsey Shares Her Passion & Love for Handmade Junk Journals
Hooray For Teachers – Three Fun Teacher Gift Ideas
Mommy and Me Hats with Your Knitting Machine
Thanksgiving Craft: Make a Set of Wine Charms
Daily Gifts

Download Now
Discount Deals
Daily Gifts

Download Now