When people are on your website, they are either skimming through content to find what they are looking for, or they have found what they are looking for, and want to absorb it as easily as possible. Either way, having a readable text will help them achieve their goal. A small change in typography can hugely impact the interpretation of your content.
If you look at the above picture, the words “Stop” and “Love” can both be seen as authoritative, urgent, and bold warning signs even though both words have completely different meanings. If we combine the knowledge of the copywriter and the skills of a designer, we can achieve great solutions to design problems.
But, as an industry, are we aware of the importance of typography? Are we using typography to the fullest? Let's find out.
If you look at all the websites referred to, I haven't done much research on which typeface may be best suited for their audience, or the type of content the authors are producing. I simply changed the font, font-size, and line-height for the sites, and, the results still look a lot better than the original. Just think what the authors can achieve with a proper designer doing a research and setting the type. The result could be clickable and readable content.
If you don't have the luxury of hiring a designer or want to set the type yourself, here are the basic principles of what makes typography click.
Every layout needs this element of typography. It defines how to read through the content. Generally, hierarchy refers to the difference in the size between the headers and body text. It plays a huge role in how readable the layout is. It is an important technique to master to achieve readable layout.
more on this topic: Typographic Hierarchy
Contrast is the main factor in whether a block of text is easily readable or not. Good contrast makes the text easy on the eye and easily readable. On the other hand poorly contrasted text makes reading almost painful. For example, black on white is generally very readable. This is what we have all been used to since we picked up paper and pen. To achieve readable content, it is generally safe to stay on an accepted range of black-on-white contrasts.
more on this topic: Contrast Rebellion
Line height refers to the space between individual lines of text. It is another factor in the readability of the content. Line height is important in type setting as it makes the content more readable. Line height that is too short will be too hard to read. If it is too large, the text will be separated instead of being grouped together.
more on this topic: Line Height
White space forces the user to focus on the text, and hence influences the flow of the content. In the example shown above, just whitespace is used to separate text elements. The whole layout is very clean and minimal. Because of the amount of white space, reader's eyes flow from element to element with ease
more on this topic: Whitespace
Density of Content
Density of content hugely affects the readability of your content. It is mostly affected by kerning (letter spacing), leading (line height), and font size. If you can find a balance for all of these elements, you will have a content that is neither too
compact nor too spaced. The end results will be perfectly readable and content that can be scanned well.
Consistency is regarded as one of the important technique for typography. This means all the headings with the same importance should be of same color, font, and size. For example all the
tag should have same font and size. This helps is organizing the content and also provides a focus point for the reader.
How to Choose a Font
- Choose fonts with a good amount of spacing between the letters
- Choose fonts with a tall x-height
- Choose a category of type – oldstyle, modern, slab serif, sans serif, script, decorative
- Choose a font that is designed for your purpose
- Check out what others have done in their site on typography
- Above all trust your instinct when choosing the font
…and one more thing. Never use faux weights and don't use more than three fonts per page.