Why is typography important in web design?

Typography makes the words of text come alive, with shape, style, size and colours of the font. ‍Hence it’s logical to add that a web designer should build the discipline of shaping written form, in other words: Typography.

Author
Updated on
July 26, 2023
website design typography

Typography usage in website design

If there was one medium that could communicate on your behalf for your business effectively, I would pin it down to a website. And what makes or breaks your website, is the right communication and messaging. 95% of the impact that a website has is dependent on the written form. 

Shaping the written form with typography

Typography makes the words of text come alive, with shape, style, size and colours of the font. 

Hence it’s logical to add that a web designer should build the discipline of shaping written form, in other words: Typography. Typography can make the act of reading seamless or a big turn off. 

So one of the primary tasks in website design is to organise a mass of information into palatable chunks, which a user can sift through to find exactly what he or she needs. 

Some things to keep in mind while building the typography language of a website are - the changing behaviour of users with very short attention spans, ability to skim keeping in mind not everybody is seeking everything and lastly the varying devices that the users will use for accessing information.

Once this premise is clear, following are some thumb rules that help optimise typography which leads to better readability and an overall better graphic language and a better user experience. 

  1. Pair it right

The task of pairing the right typefaces can be daunting. Ensuring the right font pairing requires that the font families complement each other based on their character width and weights. It's essential to limit yourself to 1-2 fonts per website, unless it's an intentional mismatch. This has to be consistently carried across all pages, in order to build familiarity and ease. Typically in a website design process, it’s essential to set a stylesheet that defines the fonts in detail, along with leading, tracking, weight and other defining elements of the font families that are part of your design language. 

Eg . Sora which is the display font of www.ximkart.com cues low resolution aesthetics and early screen typography, with every decision considered towards the crisp digital environment of today, keeping in mind clarity and effectiveness at any size. This is paired with Manrope, a simple and modern open source sans serif font which contains variable weights and plays a complementary role. 

  1. Choose fonts wisely - 

Anchoring the reader and drawing attention to the content is the main purpose of your design. Hence it’s important to evaluate how the typeface is bringing the content alive in combination with the graphic language. Web design is not about picking great typefaces, it is how we use them, in balance with other elements of design. Hence choose fonts that match the personality of your messaging and truly bring the content alive.

Eg . Soliel and IBM plex are juxtaposed to create interest and build curiosity. When used in isolation, both these fonts evoke a very generic feeling. However when used together, they bring a sense of delight.

  1. Build Hierarchy - 

Building hierarchy in your type styles, helps segregate content in order of importance. Typographic hierarchy shows the reader which information to focus on—which is most important and which is simply supporting the main points. Hierarchy can be defined using several parameters, size being the first thing new designers turn to when trying to create typographic hierarchy. Making a typeface bolder or thinner is another easily recognisable way to create hierarchy that’s easily identifiable even by non-designers. Using lighter and darker shades of colour can be also a very effective way of creating distinctiveness. Contrast, case portion and alignment are other elements that significantly impact the reading sequence and hence the overall hierarchy of the message.

Eg . This is a typical example of a basic stylesheet. Stylesheets help you define hierarchies and create a consistent system that can be replicated across different pages of the same design language.

  1. Content, longer or shorter?

Finding the optimal length of your paragraph is essential to make it compelling to read, especially when it involves large chunks of information. We humans are quite choosy when it comes to reading as we favour lines of text that fall between 40 and 80 characters, typically on a desktop website. Anything less forces our eyes to move to the next line too frequently, which distracts us. On the other end, any line length greater creates boredom and discomfort among readers, hence dissuading them to consume the content. 30 -40 characters is the sweet spot on the mobile.

Eg . The ideal paragraph length is 60 characters or so on desktop, beyond that the reader feels overwhelmed and can eventually lose interest to read further.

  1. Space and type - 

There are some fundamentals in type details that will change the whole viewing experience. Spacing between two lines of text is leading (or line height) happens to be one of them. By increasing the leading, you increase the vertical white space between lines of text, generally improving readability in exchange for screen real estate. As a rule, leading should be about 30% more than the character height for good readability. This enables better comprehension of the written word, improving the overall reading experience. The other element of space within typography is the tracking, the space between characters/ letter spacing. The tracking can be increased or decreased depending on the nature of the font to further enhance the readability. Fonts need optimum breathing room, to make them easy to read. Next in line is white space, often known as ‘negative space,’ is the space around text or graphics. Optimum white space ensures that the interface is neat and visible making the design clean and well organised, while drawing attention to the content.

Usage of Typography in Botim Website

Eg . The simple use of white space in this website BOTIM creates calmness, stripping it of all clutter and creating less work for the eyes and the mind, so that you can focus on the messaging here.

Conclusion

Basically typography is the foundation of your website design. Good typography can help the user navigate through a website with ease and discover what is of interest to him. Typography plays an important role in establishing brand identity, framing the site’s overall personality. By using unique and consistent typography users will come to associate a particular typeface with your brand.

Hence in web design it's a mandate to divide, organise and interpret content, in such a way that the reader seamlessly sifts through the website, discovering areas that interest him/her. Good typography along with strong messaging can make the users website experience more memorable and will drive them to take the desired action.

Additional Resources

https://fonts.google.com/knowledge/choosing_type/a_checklist_for_choosing_type

https://www.fontfabric.com/

https://webflow.com/blog/fonts-for-web-design

https://www.toptal.com/designers/typography/web-typography-infographic

More Blogs

Top web development companies

Updated on
February 22, 2024

How to design an about us page for a b2b brand?

Author
Updated on
February 14, 2024