The Importance of Typography in Web Design

 

A user’s journey on to a website will typically involve seeking answers to satisfy their queries. This can be absorbed through many website elements such as images, videos and text. 

The text element of your website or typography can be seen in every aspect of everyday life; from the bathroom, road signs, restaurant menus and even on the device you’re reading this on. Typography is the term used to refer to the arrangement and display of text in relation to its readability, legibility and appeal to the reader. 

This is particularly important for websites that contain more informative and rich content. Below, we have compiled the reasons as to why typography is important and how it affects user experience (UX). 

Hierarchy

Hierarchy helps guide readers when absorbing content in a comprehensive manner – from level of importance. This could be applied with the text’s size, colour, contrast and more. 

For example, if we search up ‘who was the first man on the moon’ on Google, the answer is easily highlighted through the use of hierarchy; by separating the names into actual boxes. While for actual websites, the important answers are often bolded or coloured for emphasis and easy finding. As seen on this screenshot from Wikipedia, the important details are set in blue to indicate the important detail and link:

typography in web design

Increases readability.

The use of fonts play a part in how users read text. The composition and weight of the lines used in fonts can influence readers ability to digest the contextual meaning behind the fonts – subconsciously providing guidelines for readers.

Serif typefaces contain sharp edges in its design. This includes fonts such as Times New Roman, Garamond, Baskerville and many more, as seen in the image below:

While Sans Serifs contain fonts without these sharp characteristics. This includes Century Gothic, Arial and Helvetica to name a few, as seen in the image below:

Kerning and Line Spacing can also play an important role to add to the readability of the displayed text. Kerning is considered the space in between single letters. While ‘line spacing’ is simply the amount of separation in between in each row of text on a paragraph. 

For example, the text that contains Serif – Minion Pro with a line spacing of -10,  a kerning measurement of 100 is harder to digest in comparison to the text that contains Sans Serif font, Futura with a line spacing of 10 and a kerning of 0, as seen in the image below:

Creates a tone of voice for your website.

Typography can help create tone in the context of our website’s landing page. It can influence readers’ thoughts, impressions and behaviours. 

For example, serif fonts can be used for companies that have a strong traditional and classical persona. Such as well-known car brand, Mercedes-Benz and luxury clothing brand, Dior as seen in the image below:

 

 

Through this, companies evoke a sense of respect, formality and an appreciation to reputable authoritative entities.

On the other hand, sans serif fonts evoke a more modern, straightforward and sophisticated impression, which can be used for businesses like; fashion brands and tech companies. The simplicity in the typography can further accentuate a sense of minimalist cues that are common in today’s branding with companies such as Apple and Google, as seen in the image below:

We recommend choosing the appropriate fonts and style that best reflects your website’s objectives. 

Conclusion

The impact typography has on readers can play a significant role on how they digest website content. This inturn may influence how users evaluate your content. Ultimately, typography may enhance UX, increase engagement metrics and subsequently increase conversion rates depending on other web design elements. 

Leave a Reply

Your email address will not be published. Required fields are marked *