I often discuss how to make marketing content more readable by using relatable, conversational language and short sentences.
Like David Ogilvy once said, write the way you talk. Naturally.
Just as important as the quality of your content is the visual presentation of your content.
I felt the urge to write about this topic because I’m in the process of having my website redesigned with a new theme. Again.
I like the appearance of the current theme, but I have to reinvent the wheel every time the theme and certain plugins are updated. It’s too high maintenance.
This has caused a bunch of little issues with the visual presentation that have popped up over time. These little details drive me nuts. The fact that I don’t know how to correct them myself drives me more nuts.
I have to say – and I’m kind of embarrassed to say – that this is the first time I’m truly obsessing over every little detail, especially those that will make my content easier on the eyes.
Here are some of those details.
Choosing the Right Fonts
Typography is a critically important but often overlooked design element. For some of the cleanest, simplest websites, it’s the only design element.
First, I had to find out which fonts are “web-safe.” That means fonts that can be used on virtually any operating system. Fortunately, Google Fonts has expanded the field of web-safe fonts from dozens to hundreds.
You can also create a stack of fonts, which is a group of fonts that look very similar. If the font at the top of the stack doesn’t work in a particular environment, the next one will automatically be used.
In the past, I’ve always used the same font for headlines and body content. But not this time.
Instead of using different colors to separate headlines from body content, I’m using different fonts.
The key is to find two fonts that complement each other. For example, a serif and sans serif font typically go well together. On the other hand, there probably wouldn’t be enough contrast if you used two serif fonts.
A serif font, like Times New Roman or Georgia, has little embellishments on the end of each letter or character. These embellishments almost look like little tails.
A sans serif font, like Arial or Helvetica, is tail-free. They’re simpler and, in the eyes of many, more modern-looking.
I have my share of gripes with Google, but they do make it easy to find and choose fonts. They even recommend font pairings to help with your decision.
Just in case you’re wondering, I’m going with Merriweather for headlines and Open Sans for body content. I have Open Sans on the current version of my site, but here’s the difference.
As in the size of your font.
My current site uses 11-point Open Sans for body content. It’s readable, but for the new site, I’m bumping it up to 13-point.
Bigger is better. It’s easier on the eyes.
That doesn’t mean the headline font size needs to be enormous, but it should be big enough to clearly differentiate from the body content.
If you’re not using a sidebar, I recommend against having lines of content that stretch the full width of the page.
Just like short paragraphs of one to three sentences are easier on the eyes than big blocks of text, shorter lines are easier on the eyes than longer lines.
And longer lines are brutal if you’re scanning for something relevant, which is what most visitors do as opposed to reading every single word.
Those newspaper pioneers were on to something hundreds of years ago when they started printing text in columns.
Give Readers Space
When I was writing radio commercials, most advertisers wanted to jam as many words as possible into their commercials.
They couldn’t seem to grasp the fact that one of the most powerful creative techniques is silence. It emphasizes what you just said and gives the listener a second to absorb it.
Any designer will tell you that white space is an equally powerful design technique for the same reasons. It helps the user slow down and focus on key points.
The same principle applies to your content.
You should have enough space between characters, between lines, and between paragraphs to make your content easy on the eyes. And the brain.
After I launched my current site, a reader of my blog posted a comment to tell me my social sharing buttons were covering the content on the reader’s mobile device.
I dropped the ball because I didn’t do enough testing.
It was embarrassing, but I’m glad she spoke up. I’m sure plenty of readers just bailed on my site out of frustration.
Every component of your website’s visual presentation must be tested in the most commonly used desktop and mobile operating systems and on a number of devices.
Look for overlapping design elements. Awkward line breaks. Registration forms that appear fine on desktop but clunky on mobile. Or vice versa.
And make sure your content seamlessly adapts to the size of your screen.
Style is just as important as substance.
You could have the best marketing content in the world, but if it’s not easy on the eyes, most people won’t stick around long enough to bask in your brilliance.
This time around, I’m happily paying someone to nitpick every last detail of my website, both functionally and visually. Just like I nitpick content.
Unless you’re an expert developer and designer, I highly recommend that you do the same.
Yes, it’s a significant investment. An investment that I expect to deliver a noticeably better user experience. Which will make someone more likely to do business with me.
Keeping with tradition, you should expect to see the newest version of my website on St. Patrick’s Day.