Too many web design templates (and the trends they follow) treat every element as a design element that must support an overall balanced design. But the best way to highlight written content is rarely in a perfectly balanced designed.
Getting visitors to read your website copy is hard enough. Why make it harder to read what you thought was important enough to include on your website? This happens when design decisions favor overall design over readability.
Give your website copy the best chance to connect with your ideal customer by looking out for these issues with any templates you use, or when working with professional web designers.
Text alignment
Center-aligned copy gives a nice balanced white space on both sides that allows your eyes to slide smoothly to the next section. But you don’t want visitors to slide smoothly to the next section. You want them to stop and read it.
Center-aligned copy is also much harder to read because your eye takes longer to find the beginning of the next line. It’s best used for text no longer than a short sentence or two.
Justified text (think books or magazines) has straight lines on both sides of the text which gives a perfectly balanced white space, but then you have the same problem within the paragraph because word spacing varies on screen sizes.
Left-aligned copy may be “ugly” (look at those ragged right edges) but it’s the most readable and reader friendly.
Text color contrast
The higher the contrast between the background and text color, the more readable it is. But too high of a contrast causes eye strain. What’s a design solution? Use a much lower contrast. Often so low it’s hard to read the paragraphs because they almost seem to fade into the background.
There is a more effective middle ground.
The Web Accessibility Initiative suggests an ideal contrast of 7:1 for regular text and 4:5:1 for large text. (I wouldn’t know how to figure those on my own either, so try this color contrast checker). There are contrasts with easy readability that are out of this range, but it’s a good guideline to start with. For my body copy, I went with a much higher level of contrast (12:63:1).
Font sizes
Web design templates usually come with fonts that are readable and pair well together. But some website designers then minimize the effectiveness of the copy by making fonts too small. I assume it’s meant to provide plenty of white space around the text elements so the webpage doesn’t look too busy.
Visitors can view your website on a variety of screen sizes. But most likely it won’t be on a large, high-resolution monitor that it was probably designed on.
Websites can be designed with the ability for visitors to view website text at a preferred minimum size they set up on their device. That’s great for accessibility, but how many people actually set a preferred text size?
Some recommended body copy font sizes are a minimum of 16px, with an ideal size of 18px, especially on text heavy pages. (I used 18px on my body copy here and 16px for most of it on my home page). Try viewing your website on different screen sizes to see where you might need a font size increase.
Why hire a professional?
The best way to showcase your brand and content is by hiring a professional web designer when you can. I rarely get the chance to give input on how the copy I write looks on a website. But I try to plan and write my web copy with a focus on reading patterns for a screen. If that’s the type of help you’re needing, contact me.