When someone visits your website, does the person get what he/she wants? You need to know your site well enough to answer this. Content plays a major role in making your website relevant and popular. I remember that Bill Gates had once said,“Content is King”. I totally agree; because good, usable content boosts communication between users and your website, thus increasing the number of your website users and enabling sales conversion.
Good content, with the right typography, enhances user experience. If we take a look at the two live sites below, we can easily identify the one that has better typography (which is, the second one). The first website has no consistent use of fonts, the content is not easy to read for reasons such as a dark background, and no proper spacing or hierarchy. The second website, however, has good typography and everything is laid out to enhance the reading experience.
- Design with bad typography
- Design with good typography
Web Typography is the art / technique of arranging content in a website. Good typography is all about selecting the right font and using the right content hierarchy with text alignment. With appropriate examples, I will illustrate the factors that constitute good typography.
Factors constituting good typography
- Content must be easy to read: In the image below, the content on the left is clear and easy to read, while the content on the right is not. This is because the content on the left has good typography and enables easy reading.
- Choose the right font: In the example above, we can see different fonts. The content on the right has a smaller and less readable font than the one on the left. Which one appears easier to read? I’ll let you figure that one out for yourself.
- Keep proper line spacing: Line-height refers to the vertical space between lines. The first paragraph in the screenshot below has a default line-height and the content appears abitcramped. On the other hand, the paragraph on the right has had its line-height increased and the text has a bit more breathing space, thus making it more legible.
- Keep proper content hierarchy: In the example on the right, below, we can clearly identify headings and sub-headings as compared with the one on the left. The example on the right clearly indicates the hierarchy of information. The example on the left, however, shows all content in one standard size, making it difficult to know which part is important. Headings should usually be large, sub-headings - a size smaller, and the body copy can be in the smallest size. This will clearly indicate a proper hierarchy. However, size is not the only way to define hierarchy; this can also be achieved with color, spacing, and weight.
- Align text appropriately: In the example on the right, below, text alignment is not proper when compared with the one on the left, which is perfect and makes reading easy.
These combined factors that I’ve illustrated above, constitute good web typography.
I guess it is clear now why typography must be considered when designing a website, especially as typography is a key element in most designs.The choice of font is one of the most important decisions a designer can make because it can make or break a design. After all, web design is more about communication than anything else. Always think of how you can convey your message with the right use of images and typography.
The subject of web typography is huge, and I have just begun to scratch the surface. Up till now, we’ve covered typography in general, but what about typography compatible across devices? This brings us to the topic of Responsive Typography, which is very important for the web. It may not be very important in print media, but it is crucial for the web. How can typography be made to work in these situations?
Stay tuned for more on cross-platform web typography. And, happy reading :)