Ways to Improve Your Website’s Readability

Your content is one of many reasons users visit your website, but what happens if your content is designed poorly. Poor readability can cause readers to squint, causing eye strain and frustration and can drive visitors to leave your site. Readable text affects how readers process information and if designed correctly can allow your user’s eyes to flow throughout the paragraphs and retain all your information.

Here are some easy to follow tips on using font on your site for optimal readability.

Using Fonts

A good rule of thumb is to only use a maximum of three fonts throughout your website. For example, one font could be used for headings while another could be used in the paragraphs. Fonts such as Georgia, Times New Roman and Arial are safe for the web. If you want to use a font that represents your brand better try using @font-face to incorporate a non safe font on your site. To utilize @font-face:

  • Find a @font-face kit generator such as https://www.fontsquirrel.com/fontface/generator
  • Add your font, choose the optimal setting and download your kit. Note: Some fonts may have restrictions so always check the font’s terms or author notes.
  • Add the code below to your CSS file:
@font-face {
   font-family: 'FONT-NAME';
   src: url('FONT-NAME.eot');
   src: url('FONT-NAME'?#iefix') format('embedded-opentype'),
               url('FONT-NAME'.woff') format('woff'),
               url('FONT-NAME'.ttf') format('truetype'),
               url('FONT-NAME'.svg#FONT-NAME') format('svg');
   font-weight: normal;
   font-style: normal;
  • Then add the code below anywhere you would like the font to appear (e.g. heading tag, paragraph tag, form input box):
    font-family:FONT-NAME, fallback font optional;

web safe fonts

Font Size

Experts say, for the best readability your content should be a minimum of 16px. Larger font sizes indicate higher priority because it draws the reader’s attention, which is why headings are typically larger and bold or a different color than the content.

Font Colors

Good contrasts makes text easy on the eyes and easy to scan quickly. Choose font and background colors that are easy to read. Black text on a white background is the easiest to read. In college, our final for my first web design class was to create a working website. I will always remember one student’s website because it was a pink background with green text. A great example of what NOT to do.

Font Spacing

White space helps break up large amounts of text and helps the reader’s eye travel through the text. You can achieve this by adding extra padding or margin space between block and paragraph breaks. Line height is the space between the individual lines of text. If the line height is too short readers will have to squint. If line height is too long it will seem like separate bodies instead of one paragraph.

Font Spacing Example

Leave a Reply

Your email address will not be published. Required fields are marked *