How to Design Readable Web Pages
Before computers, manually cutting and pasting-up images and text was how magazine and newspaper pages were designed. Today, it's quicker, easier, and a lot more fun to design websites that are attractive and reader-friendly. The following tips can help!
November 23, 2024 • 7 min read
WHAT YOU'LL LEARN
The success of any online article obviously depends a lot on the "wording" of the message. But what if the article never gets read? It is "how" your message displays on the web page that will largely determine whether it is enjoyed and shared...or quickly passed over.
This guide walks you through seven important design elements that can make a web page both more attractive, inviting, and readable.
When implemented correctly, these tips will help you provide a consistently more interesting and impactful experience for your visitors.
Many website owners, content generators, and bloggers spend hours perfecting "what" they want to say. And, studies suggest, that this is time well spent. But, while carefully thought-out content is crucial, it is "how those words appear" on the page that may be even more important.
Two example web page designs
One page has been design-optimized for engagement and easy reading. The other? Not so much. If the wording was identical on both pages, which would you be more interested in reading? Both are from NYTimes.com.
7 Important Elements of a Web Page Designed for Easy Reading
A well-designed web page makes your content look more inviting, quicker to scan, and easier to read. (After all, getting visitors to read what you wrote is the ultimate goal of any web page.) Here are 7 essential elements for improving the readability and visitors' experience of your website.
1. Choose the Right Fonts
Font choice can have a big impact on how your content is perceived and how easy it is to read.
Serif vs. Sans-Serif:
Serif fonts (e.g., Georgia, Times New Roman) feature small lines or "feet" at the ends of characters. They're often seen as being more traditional, professional, and authoritative. That's why serif fonts are so popular amongst newspapers. Some designers, however, feel that they display better in print than online.
Sans-serif ('without' serif) fonts (e.g., Arial, Helvetica, Roboto) lack these small embellishments, which can make them feel cleaner, more modern, and easier to read on screens. These fonts are often preferred in web design, especially for body text.
If you doubt that font styles matter, check our 2nd of 3 example sites, included below.
Stick to a Maximum of Two Fonts: While it's tempting to incorporate a wide variety of fonts, using more than two is likely to make a page look cluttered. One font for headings and another for body text is a safe and generally accepted approach.
2. Use the Right Font Sizes and Line Heights
Font sizes and spacing can be just as important as font selection for making your content easy to scan and digest. Here are general guidelines for font sizing and spacing for the web:
- Headings (H1, H2, H3, etc.): Use larger font sizes for headings to create a clear visual hierarchy in your writing. Typically, headings should be bold and spaced out to stand out from the body text.
- Body Text: For legibility, body text should be no smaller than 16-18px for desktop users and downsized a bit for mobile devices.
- Line Spacing: The space between lines (line-height) should be adjusted based on the font size. As a rule of thumb, use a line height of 1.4-1.6x the font size to prevent lines from feeling cramped.
Example:
/* Default styles for desktop (larger screens) */
h1 {
font-size: 36px;
line-height: 1.2em; /*Approx 43px */
margin-bottom: 1em; /*36px */
}
p {
font-size: 16px;
line-height: 1.5em; /* 24px */
margin-bottom:1.5em; /* 24px */
}
/* Responsive styles for smaller screens (mobile) */
@media (max-width: 767px) {
h1 {
font-size: 28px; /* Reduced font size for mobile */
line-height: 1.3em; /* Approx 36px */
margin-bottom: 1em; /* 28px */
}
p {
font-size: 14px; /* Slightly smaller text for mobile */
line-height: 1.4em; /* Approx. 20px */
margin-bottom: 1.4em; /* Approx 20px */
}
}
3. Ensure Adequate Spacing and Contrast
- Spacing Between Paragraphs: You may have noticed in the above example that we included
margin-bottomsettings. Adequate spacing between paragraphs makes a big difference in readability and appearance. A margin of 1.5 to 2 x font-size for body text and a little less for larger headings is generally recommended. - Maximize Line Length (Column Width): Forcing visitors to read across long lines of text can quickly tire the eyes. The ideal width for paragraphs is between 600-800px. This allows readers to scan text easily without having to shift their gaze too much.
- Contrast: While black text on a white background is a classic combination, you can experiment with dark grays and tinted backgrounds. Use tools like Contrast Check (by Experts) to confirm if you have enough contrast to ensure readability.
4. Use Responsive Design for Mobile Devices
Since many visitors will view your pages on mobile devices, it's important to make sure your web pages look just as attractive and readable on small screens as on large ones. Responsive text sizing ensures your content looks great on both desktop and mobile.
5. Break Up the Text with Visuals and Subheadings
Large blocks of text can overwhelm readers, so break up your content with:
- Subheadings: These guide the reader through the content, making it easy to scan and find specific sections.
- Visuals: Include images, charts, diagrams, or videos. They don't just make a page more visually appealing: they can also help explain complex topics more clearly.
- Whitespace: Don't be afraid to leave blank space around your key elements. It gives your page room to breathe, making it feel less cluttered and more approachable.
6. Keep It Simple: Limit Distractions
A readable web page is clean and free from unnecessary distractions. Avoid excessive use of bold text, italics, and underlining (except for links). Keep buttons and call-to-action elements easily noticeable, but not overwhelming. And avoid distracting the readers' attention with intrusive advertising and popups.
7. Test and Adjust for Performance
Once your page is designed, test it on different devices and browsers. This ensures your fonts, spacing, and responsiveness are working as expected. Tools like Google Analytics can provide insights into how visitors are interacting with your content. Then use this feedback to continually improve your design.
3 Examples of Web Pages That Are Easy to Read
Example 1: printMag.com
What we love about this page:
- The font sizes are larger than usual: H1 has a max size of 68px, and the body text is 20px with a 1.5em line height.
- The abundance of visuals (after every paragraph or two) keeps the content easy to read and engaging.
- The 'minutes to read' feature (just below the author line) encourages visitors to investigate the article.
Example 2: ericPortis.com
What we love about this page:
- Even though this page discusses a dry subject (web programming), it kept our interest through the use of humor and comical illustrations.
- The playful, custom headline font and large body text add to the enjoyment. Body text is 22px with a 1.8em line height.
- One suggestion: The contrast between the text and background could be improved for better accessibility.
Example 3: pimpMyType.com
What we love about this page:
- As a site dedicated to typography, the design is a great example of readability.
- The body text is 23px with a 1.6em line height, super-sized for easy reading.
- Generous use of lists and subheadings guides us through the page.
- This site accepts comments. When properly monitored, those can increase engagement, gather valuable feedback, and add insightful content to the article.
We would love to hear your thoughts on these three sites. If you'd care to share, please email us at info@JoeWeb.com
Conclusion:
Designing a web page that is both visually inviting and highly readable requires the coordination of many elements. By considering font styles, sizes, spacing, contrast, responsiveness, and more, you'll create a visitor experience that's pleasant to look at, easy to scan, and enjoyable to read.
The result is a website that looks great on any device, guides readers through your content, and helps them understand and remember the important information that you worked so hard to create.
How is the Readability of Your Website Design?
If your website isn't performing as well as you'd like, it might be time to evaluate its readability. A clean, inviting design can make a big difference in visitor engagement.
If you'd like help developing more readable web pages, or if you need any other improvements to your site, contact us today. We're friendly, knowledgeable, and based right here in Asheville.
Let’s chat about your online goals! Call us today: 800-551-9761
EMail: 
