One great reason to use a CMS such as WordPress is to ensure that each page looks like the one before it. In the old days of “flat-HTML” sites (often managed with Dreamweaver), it wasn’t uncommon to see a page missing a footer or using three different versions of a “universal” menu that had fallen out of step over time. Luckily, those days are behind us, but there’s still one place where I see a lot of inconsistency: text formatting.
Why Does This Happen?
There are many reasons that good people do bad formatting. Frequently it comes from not thinking about formatting as a means of adding information to text. Whenever a person formats something, they should ask themselves “what does this communicate to the reader?”
Not Knowing Better
The WYSIWYG editor is intended to be easy-to-use. However, “easy to use” can also mean “easy to misuse” or “easy to overuse.” For instance, it’s considered bad practice to underline text that’s not a link yet the WordPress editor’s third button is “underline.” ((I remove that button from all sites I make so people don’t have the option—and I have no idea why WordPress still includes it.))
Making Up for Sub-Optimal Writing
Some people are very concerned that a website visitor will miss the “most important” information on a page. I think this is where you start seeing entire paragraphs bolded or made red. Rather than formatting the text, write short and clear copy that follows a structure like the inverted pyramid.
Wanting Visual Interest
Site owners often don’t like the fact that each page of their templated website look similar. One “solution” to this problem is using randomly centered-paragraphs, more colored text, and oddly-distributed headings and images. Again, this is a noble motive, but it can disorient to visitors.
A site owner spends days working on their entire website. They’re right that 30 pages of their site may look very similar, but to the average user who looks at 1.75 pages on a single visit (my site’s average over the past six months, results vary), it’s not a big deal. In fact, being able to acclimate to a site’s style is advantageous in that a user can carry consistent expectations with them throughout the site. Imagine if Wikipedia moved around their page table of content and sometimes added bold or colored text. It would be a lot less pleasant to waste hours of your life on Wikipedia.
What Not To Do
The following is an incomplete list of “worst practices.” I have made an effort recently to focus on listing positive examples rather than negative, but in the case of text formatting, the positive is usually just “write unformatted text.” And so in this situation, I feel it necessary to point out the types of formatting that should not be done.
Paragraph Formatting
- Don’t put entire, multi-sentence paragraphs in bold or italics.
- Don’t center- or right-justify them either.
- Don’t write anything in ALL CAPS unless it’s supposed to be yelled.
Paragraphs using these styles are generally harder to read, and, when done on this scale, communicate little to a reader besides “Look! I formatted this paragraph!”
Broken “Visual Rhythm”
- Don’t use headings out of order.
- Don’t put extra spaces before/after a paragraph or heading.
- Don’t randomly-align images. I right-justify all my images and center the biggest ones.
I talk about headings a lot. They’re important for accessibility, SEO, and readability of posts. They’re easy to use once you understand their intended purpose. Headings, excessive spaces, and scattered images all disrupt the visual “rhythm” of a design. That rhythm makes the page look nice and easier to read.
Don’t Use Colored Text
This gets its own heading. I really can’t think of any good reasons to color text (write a comment if you know one!).
Know the Rules Before You Break Them
There are exceptions to every bullet above, but it’s important to think of each technique as potentially violating best practices. Better still, if you generally avoid these techniques, they will be more interesting and effective when you do use them.
Accessibility & Usability
I also feel the need to briefly point out that this isn’t just an issue of preference. Many of these recommendations have important accessibility concerns. What’s more, even for people who have no problem reading oddly-formatted text, they’ll have an easier time reading text that’s formatted in a sensible matter.
Some examples:
- A paragraph of underlined text distorts the natural shapes of words making them harder to read.
- Colored text on certain backgrounds is hard to read for everyone and impossible to read for some.
- Misused headings can take your brilliantly organized essay and make it a jumbled mess for search engines and screen readers.
Two Rules of Thumb
In thinking through this issue, I think I’ve come up with two pretty easy rules of thumb about when your text formatting might cause you problems down the line. Those rules are:
- If you find yourself repeating a multi-step format (example, using bold + italic all the time), chances are you could do that more efficiently and sustainably!
- If you find the WYSIWYG editor removing or breaking your formatting, chances are that the editor can’t be consistently used that way and you should find an alternative. ((There are lots of great WordPress features like custom page templates, shortcodes, filters, and more that are better solutions for tasks such as adding code or creating a custom layout.))
If you’re feeling frustrated by the limitations laid out in this post, PLEASE (yes, that’s yelling) don’t just throw up your hands or, worse, carry on without changing anything. A friendly web designer can build systems to format text using headings, blockquotes, images, and “CSS” styles in a visually-interesting but consistent way that keeps text easy to read. We’re happy to help.
I’m Not That Creative
Communication usually works best when it’s presented in a format that is easily consumed. Much too often, formatting gets in the way of that information consumption. So we’re better off when we stick with vanilla formatting and leave the weird stuff to E.E. Cummings.