How to format website copy and improve your user experience
Whether you’ve hired a copywriter or spent hours writing, writing, and rewriting your website’s words, I’m sure you can hardly wait to get your message out there.
But here’s the thing: if your copy ends up looking cluttered, chaotic, or headache-inducing once it’s on your website, it’s going to push even the most eager readers away.
You could hire a website designer to take care of it for you – and I highly recommend you do – but if you’re going to be the one formatting your website copy, you can still use a few best practices to make your copy more inviting and visually engaging.
Keep reading for my go-to formatting tips for clean, concise, and easy-to-read website copy.
10 website copy formatting tips to improve your user experience
1. Choose a clean, readable font
Your copy will have a greater impact on your readers if they aren’t subconsciously straining to read it.
Opt for clean serif or sans-serif fonts for your headlines, subheadings, and body copy. While a decorative script font can be fine for “extra” copy (such as a “hey there!” to welcome visitors), you want to make sure your key points are easy to read.
Speaking of readability, don’t leave your readers struggling to read the tiny text on your website. Aim for a font size of about 16px for your body copy (although this can vary based on which font you use).
2. Put white space to work
“White space” is any space on your site that isn’t filled with text or other visual content; for example, it could be the space before or after a block of text, or the space to the right or left of a photo.
White space is essential to a clean, professional-looking website. In the words of designer Wojciech Zieliński, “Whitespace is like air: it is necessary for design to breathe.”
On your website, add spacers between headings, paragraphs, photos, and other elements to give everything plenty of breathing room.
3. Condense your columns
Believe it or not, lines of text that go all the way across the page make your copy feel longer and create more work for your reader because their eyes have to travel further.
Instead, keep columns to less than 50 percent of the page width to leave room for white space or other visual elements and to make your copy appear shorter.
4. Break up blocks of text
Even if your copy isn’t wordy or rambling, a paragraph that appears to go on forever can make it look that way. And on the mobile version of your website, a hefty paragraph could be completely overwhelming when it fills your reader’s entire phone screen.
You can make your copy more approachable by keeping your paragraphs about four lines or fewer in length (on the desktop version of your site, at least).
Bulleted lists are another way to break up your text. You can also use lists to:
make a long sentence more digestible
create visual interest
clearly articulate multiple points
Keep in mind that several four-line paragraphs in a row – or even several one-line paragraphs – can become monotonous. To avoid this, use a variety of paragraph lengths in your copy to hold your reader’s attention.
5. Incorporate images, icons, and color
Another key way to break up your text is to add other elements to your site.
Look for opportunities to place an image next to a section of text, add icons or graphics to support your points, or add in a colored background every now and then so your reader isn’t scrolling through one long, white page.
Incorporating a few visual elements – without going overboard – will complement your copy and make your pages more enjoyable to read.
6. Avoid shouting at your reader
All-caps text has its place on a website; some business owners may find that all-caps headlines are the look that best suits their brand.
But when it’s not used as part of a clear brand strategy, all-caps text can make your reader feel like you’re shouting at them. When all-caps is applied to a full paragraph – as I often see in testimonials on small business websites – it’s harder for readers to take in, because we’re not used to seeing long blocks of text displayed that way.
That’s why, for most of your headings and body copy, I recommend sticking to traditional sentence case (where only the first word of each sentence is capitalized).
7. Guide readers with headings
Most website visitors are actually skimmers who scroll through your pages until something catches their eye.
That’s where your headings come in. These important pieces of copy pull your reader into each section and deliver your key points.
To ensure your headings grab your reader’s attention, make them bigger and bolder than your body copy. Your biggest heading should be Heading 1 (H1), followed by Heading 2 (H2), Heading 3 (H3), and so on.
Keep in mind that for SEO purposes, each page should only have one Heading 1, because that’s what search engines read as the title of your page. With the other headings, feel free to use as many as you’d like!
8. Use left-aligned text
I love a centered heading every now and then – it feels symmetrical and clean. But for most of the copy on your site, left-aligned text is the way to go.
By aligning text to the left, you make it easier for your reader to follow along with your copy, because their eyes know exactly where to start each new line. Text that’s centered or right-aligned creates more work for your reader, because every new line starts at a slightly different place on the page.
Centered text is okay for two or three lines; longer copy should always be left-aligned.
9. Mix copy and images carefully
We’ve all seen it – a website that opens with a compelling photo and a headline running across the image.
I love this look, but it can be tricky to do well. If your photo is busy or contains a lot of different colors, your readers might have a hard time distinguishing your copy from everything else. And even if you’ve perfectly positioned your text on the photo, the placement could change, depending on the screen size it is being displayed on, or on mobile versions of your site.
To make sure your text stands out regardless of the photo content, swap out a busy photo in favor of one with more open space for your text, or add a colored overlay to your photo.
10. Make calls to action clear
If your readers see underlined text on your website or a line of copy surrounded by a colorful, button-shaped block, they’ll expect that clicking one of those elements will direct them to another page – so be careful not to use this treatment for anything that’s not clickable.
Similarly, readers are likely to miss a call to action that isn’t placed in a traditional button shape. Since one of the key goals of a website is to guide your reader to take action, make sure your design choices don’t leave readers guessing about what you want them to do.
Formatting your website copy for a better user experience
If you’ve invested time or money into perfecting your website copy, don’t let it go to waste.
Hire a website designer or follow these steps to create an enjoyable experience that converts readers into happy clients.
Here’s a quick recap:
Choose an easy-to-read font in an appropriate size.
Add white space between website elements.
Condense columns to 50 percent (or less) of the page width.
Break longer paragraphs into smaller pieces or add bullet points.
Increase visual interest with images, icons, and color.
Avoid all-caps text so you don’t sound like you’re shouting.
Use headings to guide your readers through each page.
Left-align your text as much as possible.
Be careful when running copy across a photo.
Make your calls to action look clear (visually).