Visual Elements of Writing for the Web

Writing is all about how you compose your words and the meaning that they convey, right? Well, yes, but these days we can’t ignore the visual elements of writing for the web.

Visual? You mean like “word art?” No, not really—but close. Plainly stated, it’s the idea of arranging the words on the page so that they are easy to read and can be scanned quickly. Welcoming to the eye.

In other words, it’s about optimizing the reader experience so they’ll be enticed to stay on your page and engage with your content.

So how do we accomplish that? A good place to start would be to take a lesson from good old-fashioned newspapers. Study the way they used headlines and sub-headings. Notice how all the words are arranged in neat, narrow columns and not spread all over the page. Also note that they put all of the most important information, “above the fold.”

Newspapers did all of this in a very literal way, but we can duplicate this same technique in a blog post. Instead of calling them headlines and subheadings, we call them H-1 and H-2 tags. Instead of columns we use content boxes. And when we say, “above the fold,” we mean all of the content that appears on the screen before scrolling down.

But the end goal is the same: make the content easy to read.

[bctt tweet=”Visual Writing: Take a lesson from good old-fashioned #newspapers” username=”SimpleDigBrand”]

10 Visual elements of writing

OK, so now that we know our goal, let’s look at some ways to go about achieving it.

1. Set a narrow column width. You don’t want to make your readers read an entire paragraph in one endless line of text. Worse, don’t make them use the horizontal scroll. They’ll never get past the first sentence. Instead, “box” your content so that it has a natural width to it, in line to what we’re used to reading in other forms of writing.
2. Use headers and sub-headers. This is almost like presenting your article in outline form, and the reason is that it makes it very easy to scan. The text of these headlines will be bigger and bolder than the body text, so make them short and snappy to grab the reader’s attention.
3. Bullet point and numbered lists. Again, this just makes your content easier to consume, especially on mobile devices. Don’t make the entire article one long list, but use lists intermittently to emphasize the main points of your post.
4. White/blank space. When I land on a page and it looks “cluttered,” I’m immediately inclined to click away. It just seems like too much trouble to plow through the mess to find what I’m interested in. So give the readers some space to find what they’re looking for and let them rest their eyes between sections and paragraphs.
5. Short sentences, short paragraphs. We can blame the Internet for the fact that humans now have a shorter attention span than goldfish. You can lament this, but you can’t change it. Better to just get onboard and learn to break up your words into “byte-sized” pieces.
6. No goofy fonts. Stick with standard web fonts for two reasons. First, because many of the “creative” fonts just don’t look right on some devices or in certain web browsers. It’s a practical matter that people might not be able to read your words. Second of all, well, it just looks unprofessional.
7. Increase the font size. What font size are you currently using as your default? It doesn’t matter—make it bigger. 14-point should be the bare minimum, but I would suggest 16 or 18. The reason is because over 50% of webpages are now viewed on mobile devices. If we can’t see it, we can’t read it.
8. Bold (yes), Italic (rarely), Underline (never). Using bolding scattered throughout your text is a great way to highlight key points and keep the reader scanning down the page. Italics, on the other hand, should be reserved for specific circumstances, such as words in a foreign language or titles of works such as books, movies, magazines, etc. Don’t ever use the underline. We’ve all been trained that an underlined word is anchor text for a hyperlink. If the reader tries to click it and it doesn’t link to anything, that leaves a bad impression.
9. Background color. For most websites, the background color should be slightly off-white. Pure white is too harsh, and colors usually just look silly and unprofessional. A few exceptions: websites representing the creative arts, such as photographers or musicians, can play with color a bit and get away with it. And while the body text should always be black text on an off-white background, you can use white text on black (or other dark color) to draw attention to a specific headline or call to action.
10. Mix images with text. If you consider yourself a writer, then of course it’s all about the words. For you. But most of your readers would enjoy have some images to complement the text. Again, it gives their eyes and brains a chance to rest and absorb your words. Going back to our newspaper friends, they knew how to mix these two mediums together on the page perfectly.

Writing isn’t just about writing

For a long time I wanted to be a writer. I mean a “real” writer, you know, the kind that produces one best-selling novel after another. I studied the craft, took classes, and practiced, practiced, practiced. Back then, it was all about the words, the nuances in crafting a story, creating interesting characters, and touching the reader at a visceral level.

Now I blog and write web copy. We’ve established that it’s not exactly the same thing, but it has its own sort of elegance and craft that challenges me. The words still matter, but it’s all about driving the reader towards an action rather than an emotion. Yes, emotion can be important in writing web copy, but it’s a means to an end, not the end itself.

Nowadays, I still allow myself to write freely and without much care to the visual elements when jotting down a rough draft. Then I like to put the piece aside for a while (preferably overnight) and then revisit it with an editor’s eye for visual appeal. Hopefully the final result is something that’s both interesting and easy to consume.