Stay up to date

In today’s world of digital experiences, your website has become the face of your company. The typography on your website can make the difference between your company being portrayed as savvy and knowledgeable or sloppy and incompetent—in other words, the design and readability of your website is completely dependent on the good practice of typography. Reading on screens doesn’t need to be unpleasant.

In this blog I will go over a few key tips for using typography to improve readability in your website design.

 

1. White Space

White Space in Website Design

http://lat.is/

Users won’t bother to read any content if it’s cluttered. You don’t need to save pixels; it’s all the same price. Leaving some space for margins on all sides of text is a must because too little white space is frustrating to read; finding a balance is very important.

 

2. Line Spacing

Line Spacing Website Design

http://rockawayrelief.com/

This is related to white space, but refers more specifically to space between lines of text (in the print world we call it “leading”). Increasing the space between your lines will make your body copy less overwhelming and more digestible. A general rule you can follow to make sure that your line spacing is appropriate is to set line heights to 150% the size of your font. Others suggest that the line space should be 2 to 5 points more than the font size. Your choice of typeface also matters here. Typefaces with a high x-height need more line spacing than ones with smaller x-height.  Moreover, sans serif typefaces tend to need more line spacing than serif typefaces.

 

3. Size

Font Size in Website Design
http://www.laborb.de/

The common mistake of many web designers is to make the font size too small. The appropriate font size for reading a body of text on a screen ranges between 16 and18 pixels, depending on the typeface. Anything smaller and the users’ eyes will become strained after reading a paragraph or two. The brightness and resolution of digital screens greatly affects legibility and it’s been discovered that the larger the font size of the body text, the more likely that users will read it.

 

4. Measure (Line Length)

Measure (Line Length) in Website Design

http://www.backinmotion.com/

The measure of a web page is the width of your paragraphs. If the measure is too wide it requires the user to shift her neck too much and breaks her reading rhythm. Too narrow a measure requires a lot of scrolling and shifting of the eyes, also annoying. Generally, 45 to 75 characters (both letters and spaces) is widely regarded as ideal.

 

5. Sans Serif vs. Serif

Sans Serif vs. Serif font in Website Design

http://www.mining.bc.ca/

This rule is allowed to be broken, but only as long as you have the knowledge to break it. For everyone else, a good framework is to use serif fonts for headlines and sans serif for body copy. Why? Due to the low resolution of screens relative to printed paper, serifs don’t appear in enough detail in lower font sizes (below 16 pixels—not a problem if you follow rule number 3).

 

6. Heading Styles

Heading Styles in Website Design

http://www.levon.com/s/home.asp

All websites have a hierarchical structure where the headings, subheadings and body text are of different sizes/styles. This is a good practice for SEO (search engine optimization) but is also extremely helpful for readability purposes. The majority of Internet users actually scan content rather than read word-for-word. Visually breaking up your content using headings and subheadings styled differently from the body text will actually increase the retention of information from your website and help users find the content they are looking for faster.

 

7. Use a Grid

Grid System in Website Design

http://www.thegridsystem.org/

The structure of your content is important for captivating the attention of the user. Simplify your design and give proportion and order to your content by using a grid. A good resource for getting started is The Grid System (http://www.thegridsystem.org/).

 

8. Limit your Fonts

Too Many Fonts - Website Design

It is wise to limit the number of fonts you use on your website to only two or three. Using too many fonts is overwhelming and distracting for users. Moreover, having too many fonts can also increase the load time of your website.

 

Conclusion

I’d like to end by saying that whatever typographic choices you make, just make sure that it suits your design project and its intended audience. The aesthetic aspect of websites is dependent on your typography selections; you should never overlook the importance of excellent typography.

 

 

25 Website Must Haves Part 2: Design & Usability thumb

Get Tips for a Great Website Design

High traffic isn’t worth much if your users aren’t sticking around. Download our latest white paper: “25 Website ‘Must-Haves’ for Driving Traffic, Leads & Sales: Part 2, Design & Usability”

Join the Conversation