Typography in Design: Rules and Tactics

Why do you think not everyone is a reader? Why has reading being categorized as a hobby? Why has blogging itself become a full-time job or passion for some people? Because the person who doesn’t read knows how much patience it needs to read even a single line. And, when someone becomes habitual of the same they would know even the minute details of a text whether that is on a book, magazine or over the internet. They would be able to tell you what type of font and what size will be easily legible by the majority and this is where UI Designers comes under the limelight. They are responsible for making it readable whereas the job of the writer ends with the drafting and editing. It is a designer’s job to make it understandable along with making the typography aesthetically pleasing. Web Design can be creative but it makes sense only when the user gets the relevant information out of it. Therefore, the idea is to leverage typography to the point of making useful for both UI and UX Design.

Words are the ultimate source of communication. And your website or application will acquire the communication language via the perfect content and that content too should be in the perfect typography in order converse with the user.

6 Rules to Follow for Perfect Typography in UI Design

1. 
   

   Hierarchy

   
   

The hierarchy in the typography will highlight the importance of the content and will establish a difference between the multiple categories to promote effective communication. Designers can represent hierarchy between the title, heading and the body of the content. This can be done using the font size and other things like presenting the heading in bold and the body for that heading in normal font. One example of the same is given below:

2. 
   

   Font Choice

   
   

The type of font designers select will have a significant impact on the legibility of the content. Henceforth, it becomes the responsibility of a designer to work accordingly and select a font which can be understood easily. For example fonts like Arial, Sans, San Francisco and Roboto are preferred above all. Further, for easy and better user experience the font can be same as the application or website meant for. For example, font for an IoS App can be the actual font of IoS; i.e, San Francisco, choosing such a font will enhance user experience and will boost flow in the application. Further, it is advisable that the font should be kept the same throughout the application or website design.

3. 
   

   Font Size

   
   

Hierarchy of the content is the foremost aspect on which the font size depends, where the title comes with the largest among all the font sizes selected and the body with the smallest. Apart from hierarchy, there is one more aspect that affects the font size which is the legibility. It is usually advised to select the font size whose clarity is in the interest of the majority.

4. 
   

   Text Alignment

   
   

There are two aspects on which the text alignment depends first is the language and second the kind of content.

• Left Alignment is highly preferred by the designers because in most of the cases English is chosen as the language for the websites or the applications. Whereas in other cases where the regional language is preferred like Arabic, text alignment will have to be right.


• The Kind of Content: It depends on the content type as well by which I mean if it is a quote then it has to be centre- aligned instead of the left or the right alignment.

5. 
   

   Text Spacing

   
   

This can be further categorized into two forms:

• Line Spacing: This refers to the vertical distance between the lines. Go for 140-180% legibility where the distance between the two lines should be 1.5-2pts.


• Letter Spacing: If the text is for headlines, headings or titles then the space between the letters has to compress to increase the readability of the word. And, if the text is for the body then the space between the two letters or between the words has to narrow to enhance legibility.

6. 
   

   Colour and Contrast

   
   

Font colour should be aligned with the website theme. Select contrasting colours for a font with the theme. For example, shades like black and grey for the font when the website theme is white and select white for the font when the website is of a dark theme. Lastly, present a slight colour contrast between the headings and the body of the content. For instance, Black is best suited for headings and grey for the body.

Conclusion

Think of all the ways that your typography affects your design and apply all the above rules there. A responsible designer must understand the significant difference typography makes to your design. If your design can communicate then typography becomes the medium of the language through which the design speaks.