The Importance of typography in web design

Author

Published: 17 March 2016


The Importance of typography in web design

Typography is a key part of any design project, and web design is no exception. Despite this it is often overlooked by designers. This article covers the most basic elements of typography and how to apply them.

Space is always as important as content, and typography is a good example of this. The space between letters is called kerning (or sometimes mortising), can radically alter the look and feel of a piece of text. You can adjust the kerning on a website using the css field ‘letter-spacing‘, for example ‘letter-spacing:1px;‘. In the examples below letter-spacing is set to -2px, normal, and 2px.

The quick brown fox

The quick brown fox

The quick brown fox

Leading is another aspect you’ll want to consider, the amount of space between lines of text. Pronounced ‘ledding’, it comes from a time when type setting involved letter blocks that were packed into a frame, and padded with lead strips. Too little space between lines and the text becomes hard to read.

Volutpat, hendrerit felis quis, finibus urna. Nunc eleifend erat eget tellus aliquet, id consectetur augue rhoncus. Mauris ut laoreet odio. Praesent lacus orci, euismod sit amet facilisis id, commodo eu felis. Cras commodo, nibh at lacinia molestie, lorem ante dignissim lectus, nec bibendum mi turpis a lectus.
Volutpat, hendrerit felis quis, finibus urna. Nunc eleifend erat eget tellus aliquet, id consectetur augue rhoncus. Mauris ut laoreet odio. Praesent lacus orci, euismod sit amet facilisis id, commodo eu felis. Cras commodo, nibh at lacinia molestie, lorem ante dignissim lectus, nec bibendum mi turpis a lectus.
Volutpat, hendrerit felis quis, finibus urna. Nunc eleifend erat eget tellus aliquet, id consectetur augue rhoncus. Mauris ut laoreet odio. Praesent lacus orci, euismod sit amet facilisis id, commodo eu felis. Cras commodo, nibh at lacinia molestie, lorem ante dignissim lectus, nec bibendum mi turpis a lectus.
line-height: 10px;
line-height: 14px;
line-height: 18px;

The final point you’ll want to consider is how many fonts to use. As with any creative endeavor there are no strict rules, but normally you should restrict use to a maximum of two fonts. There are instances where you’ll want to use an additional third font, as above where the css code was picked out with the ‘courier‘ font.

The graphic below gives more example of leading and kerning, and instructions of adjesting them in PhotoShop and InDesign.

The Importance of typography in web design

This infographic was designed by Design Aglow.

Signup for Updates


Related Posts