Don’t underestimate the importance of Typography when designing and developing a website or mobile app. UX/UI designers have some rules when it comes to their use in interfaces. This article takes you through ‘The Rules of Typography’ and ‘How to Use Typography Effectively’.  

Rules of typography 

Setting rules in how we use typography is important for maintaining a high level of user experience and consistency across single and multiple projects. 

The first and arguably most important rule is to not get carried away when choosing a typeface! It’s best practice to keep to a maximum of 3 for one project, this will give a cleaner look and feel and stop it from looking too busy and dated. On top of this, we need to keep in mind using a typeface that may not be installed on a user's device can hinder the user experience of the project.  

The next rule when using multiple typefaces is to ensure that they both complement and contrast with each other. The nuances of the typeface can be lost if the contrast between them isn't clear.  

Don't forget accessibility. A key rule across UX/UI is to make sure that your typography is readable. If the user can't understand what the text is saying then it loses all impact and meaning. Test your typefaces and fonts before you put them to use.  

You can use font accessibility tools which check the legibility of your font against different colours, the tool is free, and we recommend  https://colourcontrast.cc/  

How to use it effectively  

The importance of typography in an interface can often be overlooked but it plays a crucial role and can make or break a platform's UI and UX. 

Don't skip spending time exploring your font family options. A great start is to just scroll through Google fonts and see what styles appeal to you and what you think might fit with your project. If this is rushed, you might end up having to redo your design or replace the typeface of your copy halfway through a project when you realise the typeface just isn't right.  

Think about hierarchy. What might seem obvious but is often done incorrectly is setting the hierarchy of text on a page. It's important for the user that important information is set apart, be it with the weight, height or size of the typography you use. An accessibility tip for developers is to ensure this hierarchy is tagged correctly when coding the platform (H1 H2 H3 etc) so that screen readers can navigate the text in the correct easily.  

Alignment can affect the readability of text. Left-aligned text ensures uninterrupted reading, However, justified text (where space is added between words to keep the edges of a paragraph straight on both sides) can be mistaken as the most readable when this is not necessarily the case, words can end up hyphenated and have irregular gaps.  

Center align text should be kept to a minimum and only used for headings as it can make the text difficult to read.  

The use of free alignment text can be a great design element when done well, just be careful and make sure that the order or the text is obvious.  

I hope this article will help you and your team pay closer attention to typography and how it's used to create a positive user experience.  

Have you got a vision for your product that you want to bring to life? Yellow Panther offers an extensive UX/UI service for all our clients.  

Interested? Drop us a message at hello@yellowpanther.co.uk.