Skip To Main Content
5 Web Design Ideas to Increase Readability on Your Website
Keisha Croxton

Everyone can agree that an aesthetic website is great to look at, but what about the content that fills it? An interesting, and equally important, aspect is readability. It doesn’t matter how clever your school marketing is, if no can (or will) read your content. 

The unfortunate truth is that website visitors don’t read content anymore. Instead, visitors scan pages, catching only 20-28 percent of all words. This, combined with the rise of mobile web browsing, makes it even more important to make reading easier for your website visitors. 

What is Readability and Why is it Important?

Readability measures the complexity of the words and sentence structure on your website. Legibility, the size and contrast of the text, also has an influence on readability. 

Readability is important for two main reasons:

  1. It helps website visitors who are scanning content (on desktop or on mobile) quickly find the information they are looking for.

  2. It impacts your website’s overall accessibility — which refers to making your website usable by as many people as possible, including those with disabilities or situational limitations.

Related: 6 Easy Web Accessibility Best Practices Every School And District Should Follow

Related: WCAG 2.1 Is Here: What Districts Need To Know

1. Choose Typography Wisely

Your typography is the foundation of readability and legibility on any school website. Typography is the combination of fonts, their sizes, and their spacing. You should aim to have a consistent theme with your fonts to avoid confusing the website visitor. 

Here are a few tips to help you with your font choices.

  • Heading tags should be relative in size to each other, starting with large and scale down as you go from H1 to H6

Correct order of headings
  • The minimum font size that is comfortable to read is 16px, but please keep in mind that different fonts have different base sizes

Example of different fonts at 16 point font sizes

 

2. Use Shorter Sentences and Easy-to-Understand Words

Although prospective parents may be willing to read longer sentences and paragraphs in print, they most likely won’t want to read that much online (especially when browsing from their phones). Short paragraphs make it easier for your website visitors to scan pages.

Example of writing short sentences

 

3. Use Heading Tags Strategically

Your school website’s heading tags (H1, H2, H3, etc) may be styled in a way that inspires you to use them throughout your site, but these tags serve an important function. These are designed to help separate content and explain to the user what is most important to least important information on the page. Each heading should signify an important section of the page and should appear every two to three paragraphs. When heading tags are used correctly, screen readers do a better job at reading the information back to a person with visual impairments.

Example of using header tags correctly before paragraphs

 

4. Use Images to Break up Text

Walls of text can be intimidating and difficult to read. Website visitors love photography that compliments what they’re reading. The photos help give the reader a visual break while keeping them engaged. Plus the visuals help them better understand that content they’re reading.

Example of using images to break up text

 

5. Leverage Whitespace

Whitespace is an underrated asset at times. Many people view whitespace as large areas of the screen that are blank. While this is true, another form of whitespace that is even more important is the space between text and letterforms. Here are a few tips to help you create more whitespace.

  • Use bullet points to break up the text and make it more scannable.

Example of using bullet points to make text easier to read
  • Create a new paragraph every four lines or so with a line of space between the current and next paragraphs.

Examples of using line breaks to make paragraphs easier to read
  • Use table headers to help define what information is being displayed in the table.

Use table headers to define data and provide context

 

Key Takeaway

Readability is important to ensure your website’s content is both easy-to-scan and accessible. Work with your website provider to choose typography colors and styles that can help website visitors of all kinds easily scan, read, and enjoy your website’s text content.


GET MY FREE WEBSITE REPORT CARD


ABOUT THE AUTHOR
keisha croxton headshot

Keisha is one of Finalsite's many talented web designers and front-end developers. She currently serves on the board of directors for AIGA, a professional design association. On a personal level, Keisha loves interesting fashion, traveling to new places with great art museums, and killer make-up and nail art. 


Explore More Recent Blogs

Subscribe to the Finalsite Blog

Love what you're reading? Join the 10k school marketers who get the newest best practices delivered to their inbox each week.

Request a FREE
website report card

Want feedback on your school or district's site? Get a free website report card, generated by an in-house website expert, sent right to your inbox.