Typography is a key part of any graphic 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.
line-height: 12px;
line-height: 24px;
line-height: 32px;
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 adjusting them in PhotoShop and InDesign.
This infographic was designed by Design Aglow.