What is Typography in UI Design?

Typography is the segment of UI Design that falls under the content part of UX Design. Typography is equally important for both UI and UX design and designer to focus. Websites or apps both have content that helps users navigate, interact, and guide them to take action. Organizing the content in a manner that helps ease navigation, interaction and action is a very important part of user interfaces.

Typography is not only about picking the best fonts and their placement, it is the overall visual language used to communicate with users. Typography can effectively convey a product in such a manner one wants it to be perceived, just like any other visual components like color, form, and pattern can. In this article, we’ll look into different elements of typography and how to seamlessly integrate them with designs. 

Introduction to Typography

Typography is the art of utilizing typefaces and fonts to create content on a website/app that is clear, readable, understandable, and pleasurable to the user who is viewing it. Clear content prevents any confusion for users in navigation and taking action. In fact, a good choice of fonts helps in enhancing the overall aesthetics of the products. In typography, we study in detail fonts, their structure, appearance, and style that evoke emotions.

The role of a UI designer includes making sure the typeface contributes to both aesthetics and optimizing accessibility of a website/app. Effective use of fonts makes text legible. There are many fonts and typefaces that exist, among them, few are only created for brands such as Netflix, Zara, Google Play, etc. Therefore it is also correct to say that along with product aesthetics and legibility typography also creates an overall brand perception.

Ever wondered how a font mismatch would look? Imagine Nestle’s logo font is replaced by Netflix’s logo font. It won’t look good right? This is because the font associated with Netflix’s logo has made an emotional space in our minds, and it is very difficult to re-create and associate that emotion with any other brand. So as a UI designer, the work is to create that emotional association for users for the product using typography.

Typography Terminologies

Typography Terminologies

• Typeface – It is the design of specific letters, also called the font family. It includes a lot of variants, size, and heights that comes from a pack/font family. For example Futura, Poppins
• Font – Often confused with typeface, but it is a particular size and style of the typeface. For example 10px Regular – Poppins. 
  Note: Fonts have different styles that are associated with personalities. These personalities determine the tone of the interface such as fun, contemporary, or professional, then choose a typeface that reflects that.

• Serif – The extended decorative strokes or lines on a character in a font are called embellishments. Generally preferred to use in titles and books, as they have more rough edges good for short reading.
• Sans-serif – Fonts that are standard without any embellishments. Sans is good for long-paragraph reading.
• Italics – A version of a typeface that is slanted at an angle. Used for titles to make them stand out.
• Baselines – It is an invisible imaginary line on which all the characters sit. Helps in measuring x-heights and line heights in typography. Using baseline we check the ascender and descender of a character.
• x-height – As the name suggests, it is the height of the lowercase alphabet letter “x”. It is measured without any ascender or descender.
• Ascender – A portion of a lowercase letter that is raised upwards from the letter’s body. Ascender is measured using x-height. For example, the lowercase letter “f” has an ascender.
• Descender – A portion of a lowercase letter that is extended downwards from the letter’s body. It is also measured using x-height. For example, the lowercase letter “p” has a descender.
• Font Size – Also called “Point size”, determines the distance between the top of the ascender and the bottom of the descender. Basically is the overall size of a font. As per the W3C recommendation, it is good to use relative font sizes( in ems). As it allows ease in scaling up or down fonts based on the screens and browser settings.
• Letter Spacing – It is the spacing given to each letter in a particular section like a sentence or paragraph. It can be normal, tight, and loose. Letter spacing is also known as tracking.
  It is good to keep in mind while using letter spacing that while using uppercase text, increase the letter spacing and when using larger fonts, decrease the letter spacing. This leads to better readability and legibility. Also, keep the letter gap reduced when the font weight is increased.
• Line Spacing – The vertical spacing between lines that are measured through the baseline is called line spacing. It is also known as leading and in CSS it is called line height. It is preferred to use more leading when using white or light text on a dark or black background.

Now that we have become familiar with some very important terminology of typography, let’s know what are the benefits of using typography and how it can make a difference when used appropriately in interfaces.

Benefits of Typography

Good and appropriate use of typography helps in better readability of textual content that also indirectly enhances the user experience. Typography creates an optimal balance between content, tone, and graphics on a website. 
Here are a few benefits that good use of typography brings:

• Building strong brand perception: Through unique typefaces, typography builds a very strong and emotional connection with the brand. Users start recognizing the brand through its visual languages such as color, graphics, and typography.
• Create visual balance: A website is a mix of colors, elements(like cta, tables, etc), images, and textual content. To create better visual hierarchy text comes into the picture. Even with the use of one single font family, one can create aesthetic visual balance using different font weights and styles. A good visual hierarchy of text leads to better scanning of content on screen. 
  For example: Using one dedicated style and weight for a heading, one for paragraphs & normal text, one for a subheading, etc helps in maintaining the visual hierarchy.
• Holds user attention: By holding attention I mean, good typography can decide whether people are clear about the content and find it easy to scan, navigate and make decisions or it is too difficult for them to understand. Basically optimal use of typography can tell whether people would stay or move on after a few mins.
• Encourages better decision-making: When a user is clear about what is there on a page(through crisp content and text), it would encourage better and faster decision-making. The clear text would come on the base of what a user would get on doing a certain action. I know this is more on the UX side including good information architecture but it is equally important to clearly show what can be done and what a user would get by doing so. This would only come by using clear and crisp text on the website/app. 
  For example, rather than just “Submit” on a CTA, if you choose to write “Submit to Subscribe” it gives users a clear picture of what they would get by hitting the action.

So these were some benefits of typography. Now to understand how to align textual content, we need to know about text alignment. There are four basic styles of text alignment, but each style has its own way of usage. Let’s look at each one of them.

• Left Alignment: It is the most widely used default and popular text alignment. Left-aligned text is easy to read long paragraphs and comprehend them. It enhances readability as human eyes move in such a direction while scanning content. 
• Right Alignment: It is not a commonly used alignment unless we are talking in the context of a particular language like Urdu, Arabic, Hebrew, etc, or for a comparatively small sentence.
• Center Alignment: It is generally used for CTA text and short text-like headings. It is only suitable for small text as overuse of center-aligned text can cause difficulty in scanning and reading content. 

Why is it not a good option to opt for centered aligned long text?
It is because after a break in each line, to find another piece of text there is a certain drop in reading that slows down the reading speed. Therefore it is better to avoid using center aligned text or long paragraphs. Use of center aligned text is only acceptable till max 3 lines but not more than that. This point is based on research. So it is good to adapt left aligned text for long text.

• Justify Alignment: This type of alignment is more common for specialized purposes like elegant and luxurious designs. It is very balanced from left to right which makes scanning better but can be an issue if the word count of each line is not the same. Some unbalanced gaps can be noticed. It is a formal way, and this type of alignment can be more often seen in newspapers, books, and presentations.

Sometimes a good mix of different alignments(such as Centered aligned CTA text, with left-aligned paragraphs and heading along with having some quotes right-aligned) can be great. But it depends upon the UI principles, make sure doing a mix is fitting well with the principles.

So far we have covered a lot of things that are essential to know about typography, but to make it readable and legible let’s also look into both of these terms in detail. Let’s know what is readability, what is legibility, and how both of these terms are different.

1. Readability(Appearance of Font)

Readability is something that can be controlled by a designer because it is how a typeface is arranged. It is focused on users but not on any font. It determines the ease of reading, successful comprehension, and how much a piece of text makes sense to the reader. Readability focused on elements such as typeface(its arrangement), typecase, line spacing, contrast, and line length. An important point to consider is that even extremely readable fonts may lack legibility when configured in specific ways. It is because the readability variables are determined by the designer rather than being intrinsic to the text. To be readable it is necessary to be first legible.

2. Legibility(Choice of Font)

It is the capacity to differentiate one glyph(called the particular shape, design, or representation of a character) from one another when reading. While talking about legibility we look into x-height, strokes, and weights. Keep in mind that not every typeface is legible, so picking typefaces wisely is all that a good designer needs to do. Sometimes legibility is not the only consideration designers have, but there are other things as well like colors, overall design tone, and theme. Legibility purely concerns a font being appropriate for readability, Legibility is a necessity for the text to be readable.

3. Line Length(Measure of Characters)

Line length is all about reading efficiency. It refers to the measure of the number of characters per line– called CPL. Line length helps in maintaining better reading speed. According to research, too long or too short line length “decreases the reading speed”. Therefore a good measure of CPL would enhance reading speed. Users actually jump while reading rather than reading line by line, which means most of the user actually skips a lot of content. In such a situation giving limited but crisp pieces of information is a good option. A count of 100 characters per line is efficient for an average reader. Always remember users never read the content they tend to scan information that seems relevant to them.

Best Practices For Using Fonts

So this was all about typography, its elements, and everything related to typography. If you have understood everything till here it is pretty much clear that you are now familiar with the concepts and fundamentals. But to actually implement these knowing some of the best practices should also be considered.

1. To place text or any written content on a website/app limit yourself from using more than 3 fonts at once. For beginners try to stick to only one font, unless there is any specific need of using another font.
2. When using a combination of fonts, always check whether the fonts you have chosen are going well with each other or not. For example, one can use pacifico and Arimo or Nunito and Lora.
3. Try to balance text, by not cluttering too much information. Make websites dense with quality content and avoid clutter or creating a mess.
4. Pick text colors that create a good contrast with the background as well as within a piece of text. to have optimal text legibility.
5. Balance white spaces around text, and graphics so that the website looks rich and airy.
6. Use proper alignment, keep in mind the alignment principles, and effective use of left, right, center, and justify alignments.
7. Focus on creating a balanced text hierarchy to lead to better scanning of content.
8. Try to use the simplest method of capturing user attention while presenting the information. Most subtle ways include highlighting and using italics, whereas being careful when using any animation to grab attention.
9. Picking the right font size as per the screen is always very important and should be given equal emphasis as using fonts. The right font size makes the text legible enough to be easily interpreted. Following are some font sizes which is mentioned with respect to screen sizes:
   • Desktop(27 to 32 inches screen): It is best to use 16px of font size, as it is neither too big nor too small. 
   • Laptop(13 to 16 inches screen): Font size varying from 14 px to 16 px would be used; it would be optimal for laptop screens.
   • Android: Such devices have given a minimum size of 12sp( stands for scale independent pixel). But it is good to use font size between 12sp to 14sp as per screen sizes.
   • IOS: These devices have a text size of at least 11 points mentioned in the guidelines, this size is legible to read for iPhones, iPads, and apple watches.

Conclusion

We have discussed typography in every detail. Always try to focus on typography while designing any product. It should not be missed out as 70-80% of our websites/apps consist of text. As a beginner, if you go through all of the pointers mentioned above, you’ll surely excel in typography.  Start observing your surroundings, from a chocolate wrapper to beautiful websites. Get started with practicing UI design on a regular basis and sooner you’ll see that things would start falling into the right place.

Related Articles:

• How to Become a UI Designer? (2023 Guide)
• UI vs UX Design: Which Career Option Should You Choose?
• Top UI/UX Design Terminologies That Every Designer Must Know