#typography #readability #webdesign
Example: Tax Centers of GA example
Typography Tips
- Fonts – Sizes, Colors, line height, and Styles
- Contrast – color difference between the words and it’s background color
- Words per line – 9 to 12 words, words per sentence would be 13–16
- Paragraphs – 2 to 3 sentences per paragraph
When it comes to web design, small tweaks in typography can make a world of difference in readability and user experience. At Shepherds Loft, we specialize in identifying websites that are on the brink of failure due to poor design choices and turning them into something truly exceptional. One of the most crucial aspects of design that impacts readability is typography.
Today, I’m going to walk you through four essential ways typography can improve readability on your website, and I’ll show you real-world examples to demonstrate these principles in action. Whether you’re redesigning your site or simply optimizing an existing one, these tips will help guide your approach.
Fonts: Size, Style, and Spacing
Choosing the right fonts is foundational to readability. But it’s not just about picking a nice font; you also need to consider its size, style, and spacing.
Font Size
Larger text is generally easier to read, especially for body copy. For headings, make sure the font size is big enough to catch attention, but not so large that it overpowers the page.
Line Height – Good line height (the space between lines of text) is essential for making content legible. Text that is too cramped can be hard to follow, while too much space can make reading a chore.
Font Style
Be mindful of font weight and style. Too many font styles on a page can cause visual clutter. Stick to a limited set of fonts and use them consistently across headings, subheadings, and body text.
In one example, we worked on the homepage of the Tax Centers of Georgia. Initially, the fonts were a mix of sizes, with body text that was too small to read comfortably. The contrast between the text and background wasn’t strong enough, especially in key areas like tax preparation. We increased the font size, improved contrast, and ensured that headings stood out to improve readability.
Contrast: Ensuring Legibility
Contrast between your text and the background is essential for making your content legible, especially for users with visual impairments.
Poor contrast not only makes it difficult to read text but also harms the overall user experience. A great rule of thumb is to ensure there’s enough contrast between the text and its background, particularly for body copy.
Dark text on a light background is generally easier to read than light text on a dark background, but it all depends on the context and your design goals.
For instance, we found that the Tax Centers of Georgia homepage used light blue text for active menu items, which didn’t provide enough contrast against the white background. We adjusted this to a darker color, which made the navigation more readable and user-friendly.
Words Per Line: How to Format Text for Easy Reading
Did you know that the number of words per line can significantly impact readability? Ideally, a line of text should contain between 9 to 12 words to make it easy for readers to move from one line to the next without getting lost.
Long lines of text, especially with small font sizes, can overwhelm readers. To avoid this, break up long paragraphs and adjust your layout so that lines of text are neither too long nor too short. It’s all about creating a smooth reading experience.
When reviewing the blog page of the Tax Centers of Georgia, we noticed that some lines were too long, and paragraphs were difficult to scan. We broke up large blocks of text into smaller chunks and ensured that no lines stretched too far across the screen, improving readability and flow.
Paragraphs: Breaking Up Content
Paragraphs are another critical element that affects readability. Large, dense blocks of text can quickly discourage readers from engaging with your content.
The best practice is to keep paragraphs short and sweet—ideally between 2 to 3 sentences. This helps users absorb the content in manageable chunks, reducing visual clutter and making the page easier to navigate.
In the case of the Tax Centers of Georgia, we found that some paragraphs were unnecessarily long, making them difficult to read and understand. By breaking them up into smaller, more digestible sections, we significantly improved the layout and made the content much more approachable.
Real-World Example: Before and After Typography Updates
Let’s take a closer look at the changes we made to the Tax Centers of Georgia website to improve typography and readability. We identified a few key issues and addressed them using the four principles mentioned above:
Before:
- Font Sizes – Small body text, difficult to read.
- Contrast – Active menu items had poor contrast with the background.
- Words Per Line – Some lines were too long, which made them hard to follow.
- Paragraphs – Large, dense blocks of text that lacked structure.
After:
- Font Size – Increased to make text more legible.
- Contrast – Improved the contrast in both the menu and body copy to ensure readability.
Words Per Line – Adjusted the layout so that lines of text fit within the optimal 9-12 words range. - Paragraphs – Broke up long paragraphs into smaller, more digestible chunks.
By implementing these changes, we improved the readability of the entire website, making it more user-friendly and visually appealing. Additionally, the search engine optimization (SEO) also benefitted from the improved readability, as search engines prioritize user-friendly websites.
Bonus Tip: Mobile-First Design
As an added note, typography should also be optimized for mobile devices. With a large number of users browsing websites on their phones, it’s essential to make sure your fonts, line spacing, and contrast look just as good on mobile screens as they do on desktops.
Final Thoughts On Typography
Typography is more than just choosing pretty fonts—it’s about making sure your content is easy to read, accessible, and engaging. By focusing on the four key aspects of typography—fonts, contrast, words per line, and paragraphs—you can greatly enhance the readability of your website and provide a better experience for your users.
If you’re looking to improve your website’s typography or need help redesigning your site, Shepherds Loft is here to assist. We can help you create a website that not only looks great but also functions flawlessly.
Podcast: Play in new window | Download