Lets face it we had a bad start

With its original inception the internet was a wonderful idea, basically create a digital library of information that everyone can see. This of course brought us the enormous beast we know and love today. Web design has gone from eye straining table based layouts to our wonderful CSS based designs that give us the freedom to display our information in any way we choose. So why has typography not been one of the primary focuses?

People like to see beautiful things. I think this is why designers have put such an emphasis on designing the skin or outer shell of a website instead of focusing on designing a website based around the content. Simplicity is the easiest form of usability and I think it relates extremely well to web typography. Readability and simplicity go hand in hand in my opinion, as the users reading experience is determined by how easily they can consume the information being given to them. If you take away readability you are essentially removing usability and overall user experience.

How do we improve readability?

Readability, although being a relatively simple idea, is actually a fairly complex. It deals with many aspects of typography such as line length, vertical rhythm, font size, contrast, and more. Without some form of guidance this can be a pretty challenging thing to tackle. Below are a few simple guidelines for you to follow when trying to develop ideas for improving overall readability within your site.

1. Use easily digestible font sizes

You want the reader to be able to clearly distinguish words or sections of an article, this simply cannot be done effectively with smaller font sizes. Information Architects wrote a brilliant article on the subject and it deserves a good read. Basically we should be viewing fonts at their intentional size of 16px, nothing less than that. When designing my own site I started out with 16px and went to 18px. This actually made my reading experience increase dramatically and I was very surprised by what just 2px’s of size could do for readability.

2. Make use of white space

Bringing focus to a specific area does not need to be done with any form of graphics or backgrounds, white space alone can draw attention to a specific area. This is because you are letting the text breathe, and most importantly letting the content do the communicating not the design. Ample use of white space is usually associated with simplistic design and is the reason why websites like Google and Apple are regarded for their elegance and ease of use. This all goes back to the idea that readability = simplicity = usability.

3. Develop prominent color contrast

This should be an easy one for most of us. At no point should there be any strain on the eyes to read a line of text. I know all of you want to put green colored text on a red background but just trust me when I say its a bad design decision. An easy benchmark of contrast to use is setting your font color to #444 and your background to #fff, with headings having a color of #333 to give a little bit more distinct visual hierarchy.

4. Establish a vertical rhythm

This is one of the more important aspects of macro typography and is one that can be easily controlled through a little bit of CSS. Vertical rhythm in this case deals with the typography term leading, which is the idea of putting space in between lines of type to add vertical space. The default HTML leading is a bit too small and sadly brings out poor readability. A leading of around 150% should be your starting point when establishing your vertical rhythm.

5. Create visual hierarchy

Visual hierarchy can be done through a number of different things like font sizes, font weight, and color. There is a big difference between a computer and a person, we interpret data visually whereas a computer will process the information in terms of its purest form (1′s and 0′s essentially). So when presented with a body of content our brain will naturally differentiate things between the text like the font size and color before any reading is done. Making a clear difference in heading sizes and font weights can go a long ways in increasing visual hierarchy and thus adding more readability.

To sum things up

There is plenty of information on the web right now on utilizing these rules to improve readability for your website and I suggest you give it a good read as typography is something that is not going away, it will only become more important to designers in the future. To give you a head start I will be showing a small framework I created for a font size of 18px. As always feel free to throw any suggestions or ideas in the comments below.

Check out the demo

/* ------------------------- *\

	Typography Baseline Styles 
	
	Shared 
	Headlines
	Links
	Blockquotes
	Bold Elements 
	Italic Elements
	General Styles

\* ------------------------- */

/* ------------------------- *\
	Shared 
\* ------------------------- */

html{
	color: #444;
	font-size: 100%;
	background: #fff;
}

body{
	font-family: Cambria, Georgia, "Times New Roman", Times, serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased; 
	font-size:18px; 
	font-size:1.125rem;
	line-height: 1.3334;
}

/* ------------------------- *\
	Headlines 
\* ------------------------- */

h1,h2,h3,h4,h5,h6,p, p + p,pre,blockquote,input,textarea,ol,ul{
	margin-bottom: 24px;
	margin-bottom: 1.5rem;
}

h1,h2,h3,h4,h5,h6{
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
	font-weight: bold;
	color: #333;
}

h1{
	font-size: 36px;
	font-size: 2rem; 		
	line-height: 1.5; 		
}
h2{
	font-size: 27px;
	font-size: 1.5rem; 		
	line-height: 1.125; 			
}
h3{
	font-size: 22.5px;
	font-size: 1.25rem; 		
	line-height: 1.2; 		
}
h4{
	font-size: 20.25px;
	font-size: 1.125rem; 	
	line-height: 1.3334; 		
}
h5,h6{
	font-size: 18px;
	font-size: 1rem; 		
	line-height: 1.5; 		
}

/* ------------------------- *\
	Links 
\* ------------------------- */

a{ text-decoration: none; }

a:visited{ opacity:0.8; }

a:hover{ text-decoration:underline; }

a:focus{ outline: none; }

/* ------------------------- *\
	Blockquotes 
\* ------------------------- */

blockquote{ quotes: "\201c" "\201d"; }

blockquote p:before{ content: "\201c"; content: open-quote; }

blockquote p:after{ content: "\201d"; content: close-quote; }

.source{
	display:block;
	font-style: italic;
}

.source:before{
	content:"\2012"; }
}

/* ------------------------- *\
	Bold Elements 
\* ------------------------- */

strong,b,mark{
	font-weight:bold;
	font-style:inherit;
}

/* ------------------------- *\
	Italic Elements 
\* ------------------------- */

em,i,cite,q,address,dfn,var{
	font-style:italic;
	font-weight:inherit;
}