Website copy can be beautiful, simple, engaging, boring, and exciting. It is present to help users understand your message and intention. Type can be a variety of things, but in all aspects of communication and design, it must be readable.
In today’s design world, type is often used as an ‘art element,’ which can be fine and good in some cases, but in most it hinders the user from understanding the real message. I really like how Smashing Magazine has done it:
There are many factors that contribute to a website’s copy being readable…
1. Line length: This is especially key when designing webites. If a paragraph is super wide, readers tend to get lost as they read. The bigger computer monitors are made, the more this ‘wide style’ of page design is tempting. Be intentional (and cautious) when deciding how long a line of text should be. For desktops, we suggest 55-75 characters per line. For mobile, about 45 per line.
2. Font choice: The font you decide to use can greatly affect readability. That’s why more often than not, you rarely see a serif (Times New Roman) on a website, especially for body copy. Open Sans and Lato are two of my favorite sans serif fonts.
3. Leading: The amount of space between lines of text in a paragraph is also important. Consider this blog post you’re reading right now, if the top of this line touched the bottom of the line above it, it’d be difficult to read (and rather unpleasant).
4. Color and contrast: Usually these issues arise when using a dark background and white text. This is a significant decision for making your website a pleasant experience for any user. I highly suggest a light-colored background for any major copy; the contrast makes lettering easier to read.
5. Text heirarchy: Utilizing headers and secondary lines apart from body copy can help with scannability also. Styling headers to be larger and bolder will draw the eye quickly, making the page easier to scan (which is what people love to do these days).
As you are designing a page, keep these 5 things in mind! If the body copy of your website is difficult to read or understand, it will be never relevant to your users. How you plan for readability in your design? Leave us a comment.