Tips for More Effective and Readable Website Typography

Best practices to help you create better website typographic styles

Type blocks
Type blocks. Image courtesy Grant Faint / Getty Images

The bulk of almost any webpage is text content. Whether your site contains informative articles, products with descriptions and reviews, or frequently refreshed information and updates, a good portion of that content is delivered via the written word. Beyond just the fonts you use on your website, the overall typographic styles of that site are critical to the success of your webpages. Let’s take a look at some tips you can use to review and improve the typographic styles on your website.

Readability Is Key

Bottom line - if people find it difficult to read your site’s content, they will not read your site’s content. If people do not read your site’s content, they will be unable to take the necessary actions on your site to make it a success (make a purchase, review your services, contact your for an appointment, etc.). Effective website content includes typographic styles that make that content easy to read.

While there are a number of factors that contribute to the readability of website text, a few of the most important points, and the ones which are easiest to address and improve, are the text’s font-family, contrast, sizing, and the whitespace surrounding that text.


The variety of font families available to use on websites today is more diverse than it has ever been before. This variety is a great thing, but it does provide challenges. Not every typeface is suitable for every purpose and you need to be careful how you use different typefaces.

Very thin typefaces may be readable when set at large sizes and used in small bursts, like for headings, but those same letterforms can be very difficult to read if you try to use them for paragraphs of content displayed at smaller sizes. The same holds true for overly ornate fonts, like many cursive styles.

They may work for a large headline, but not for body copy. Using font families that are appropriate for the purpose at hand is an important factor in website readability.


The contrast of the text is another key factor to consider when reviewing your site’s typography. As boring as it may seem to some people, black text set against a white background is incredibly readable because the contrast between the text and the background color is so extreme. Many designers prefer to use text has far less contrast than black against white, and while they may be able to create designs that look wonderful, they sometimes do so at the expense of readability. A design may look wonderful in Photoshop, but real people have to actually use that design and read the text contained within it. If the contrast of that text is to low, it can make reading a challenge, and we have already discussed what happens when reading a website’s content becomes too challenging for people.


The size of the text on a website is an important consideration. Text that is too big may become unwieldy and awkward, while text that is too small becomes a strain to read, especially for anyone with less than perfect vision.

 Text must be displayed in a size that is easy to read, and that appropriate size may change depending on the screen size and device that someone is using to visit the site. A responsive site with text sizes that adjust to different screens can help ensure that text is always sized accordingly from the smallest to the largest screens.


The “stuff” that surrounds text on your site plays a role in how easy that text is to read. By adding adequate spacing between lines of text and around the text itself, you help prevent people from becoming confused by a jumbled mess of words and letters than adversely affect the readability of a site.

In Closing

These are just a few of the factors that contribute to effective typographic design, but they are ones that are often easy to identify issues with and where simple changes can yield immediate results in terms of more readable, effective, and attractive online type.

Take a look at your own website’s typography and consider whether the points covered in this article could help improve your own text presentation.

Edited by Jeremy Girard on 1/126/17

mla apa chicago
Your Citation
Girard, Jeremy. "Tips for More Effective and Readable Website Typography." ThoughtCo, Jan. 26, 2017, Girard, Jeremy. (2017, January 26). Tips for More Effective and Readable Website Typography. Retrieved from Girard, Jeremy. "Tips for More Effective and Readable Website Typography." ThoughtCo. (accessed December 17, 2017).