How to format text on your website

Formatting web textImprove your website’s readability with these 10 easy text-formatting tips

I don’t care how interesting your writing is; if you haven’t formatted your copy with a web audience in mind, you’re probably turning people off from your content before they start reading.

Even if your blog posts, articles, or news updates tend to be longer, in-depth pieces, a web page shouldn’t look like a Herman Melville novel.

You want to get people immersed in your subject immediately. And that means — you guessed it — text formatting!

1. Use headers

See what I just did there? I used a header (a line of larger font that introduces a new section)! Headers are a great visual way of controlling the pacing of the information on your web page. Headers also help frame the content for readers so they can more easily scan through the text.

2. Leave ample space between paragraphs

Again, it’s about pacing. The eye needs a moment of rest, and some nice white space provides the breathing room. If your blog or website editor defaults to leaving small spaces between paragraphs, you might want to consider manually double-spacing the breaks (or changing the default settings of your blog/website editor).

3. Bold the most important parts

Unless you’re posting literary fiction or poetry, go ahead and put key sentences, phrases, or soundbites in bold font. Providing the reader with this kind of visual emphasis makes the reading experience less taxing — less analytical.

4. Be careful when underlining text

When people see underlined text, they often think it’s a clickable link(See, I probably just fooled you right there, huh?) So, long story short: don’t confuse them. Only underline text if it’s absolutely necessary.

5. Only use wraparound text with smaller images

Wraparound textHere’s what it looks like when text is “wrapped around” a larger image.

See what’s happening? It can be pretty annoying for a reader.

When you use wraparound text in conjunction with a larger image, it tends to push all your text into a teeny column off to the side of the page.

Paragraphs like these are often harder to read, because the natural flow of your sentences gets interrupted in more places than it might if the sentences could progress longwise across the page. So, only use wraparound text if it’s wrapping around a smaller image. Give your writing the room it needs!

6. Use bulleted and numbered lists

Bullet-point lists are great because:

  • they’re easy to digest at quick glance.
  • they can be used to summarize the main points of an article.
  • they stand out in contrast to block-y paragraphs.

Numbered lists are great because:

  1. they help the reader by setting sequential expectations.
  2. they can frame the logic of your argument, story, etc.
  3. people love sharing numbered lists on social media!

7. Use the blockquote element

According to Wikipedia:

In HTML and XHTML, the blockquote element defines “a section [within a document] that is quoted from another source”.[1] The syntax is <blockquote><p>blockquoted text goes here</p></blockquote>.

The blockquote element is used to indicate the quotation of a large section of text from another source. Using the default HTML styling of most web browsers, it will indent the right and left margins both on the display and in printed form, but this may be overridden by Cascading Style Sheets (CSS).

Well, that’s the tech-y jargon, presented in… blockquotes! Basically, if your blog/website editor has a “quote” button in the toolbar, USE IT whenever quoting longer passages from another source. Again, this new visual element will stand out to readers, while also making clear that it’s a quotation.

Another way to draw attention to a longer quotation is to put the the passage in italics and center it on the page.

Bad Fonts8. Avoid fancy fonts

Readers like simple fonts.

Web browsers like standard fonts.

Heck, even most designers like simple, standard fonts.

So you too should like simple, standard fonts — ones that are clear and easy to read.

Don’t go crazy, or you’ll end up like the video store in this image, confusing customers (or worse).

Stick with what works for the most amount of people (Times New Roman, Helvetica, Courier New, etc.), and leave Papyrus and other whacky fonts where they belong — in the 1990’s.

9. Avoid light text on dark backgrounds

… unless your goal is to give people headaches. It might look cool at first, but reading white text on a black background is hard on peoples’ eyes after a while. Unless your blog posts are always super short, go with a dark font on a light background instead.

10. Align left

This one is more a personal preference, and there are certainly many great looking sites that center their text — but unless you have a really specific design need for centered text, let people start reading at the far left of the page (indents are ok, of course). It’s how we’re used to reading anyway, both online and off.

————

 So — those are my ten text-formatting tips to help you improve your website’s readability. (And I hope I put them all to good use in this article, or at least demonstrated their importance).

Do you have any advice to add on formatting web text? Disagree on any points? Let us know in the comments section below.

[Stamp photo from Shutterstock.]