Hello, we are Creative Fabrica

By working together with crafters and designers, we provide a creative hub with the tools and content that you need for your next venture, idea or project.

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.

Get unlimited fonts

Free Graphics

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

Continue
355748 Graphics

Get access to 355748 Graphics as part of our Graphics subscription. Check them out now.

Continue
Discount Deals

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

Continue
Daily Gifts

Download Now

Read next


10 Things to Look Out for When Choosing a Type for Print

This article focuses on perfecting your printing process with 10 practical tips.

Read the article

Inspire & get inspired with the Creative Fabrica community

Get a heavy dose of inspiration with these creative projects.

Read the article

How to start an online business with Creative Fabrica

Build a successful online business with assets from Creative Fabrica.

Read the article

Things to Consider when Using Dark Color Schemes in Web Design

More and more you see big brands playing with dark colors. In...

Read the article

Inspiration: Creamy and Floral Junk Journal

Gather ideas for junk journaling with this inspirational video.

Read the article
Daily Gifts

Download Now
Discount Deals
Daily Gifts

Download Now