What is Typography in UX/UI Design?

What is Typography?

Typography, in short, is a way of arranging text and numerics to add to the readability of a document or medium. This could range from an essay to a website, app, poster, or even a brochure; the options of where it applies are endless. What is important to understand is that it is to add legibility and ease of reading to whatever the product is being created. It can also be as simple as the type of font being used for a given document. 

Typography is important because it adds style, and even tone to a creative work that creates a more immersive feel when interacting with a product. The wrong font or space between text or letters can result in a dull, or cluttered product that may leave a lasting impression on a user.

What is Leading in Typography?

Leading is the amount of space allowed or disallowed between each line. Leading on a newspaper is quite fine, while leading when reading a blog post may be more open and allow for an easier read. It’s use depends on how much information one is trying to put on a single page. Like most of the aspects of typography in this article, it can determine the look and feel of a document or product. In most cases, more lead makes a document look better and cleaner. If you find yourself with text that seems cluttered and difficult to focus your eyes on, try increasing it some.

What is Kerning in Typography?

Similar to leading, kerning refers to the space between each letter on a document and can have similar impacts to a document at leading. It is important to play with the two to find what is most suitable for what you are working on. Too much or too little of ether can result in a product you or your clients may not be proud of calling their own. Kerning also adds a sense of uniformity to a document. Some letters may call for more space between others. Therefore, it is important to comb through a product when designing to ensure it is consistent throughout. This may mean some works and letters get more or less kerning than others to add to uniformity.

What is Tracking in Typography?

Tracking is similar to kerning in the sense that it decides the space between letters, but instead of changing just small aspects or samples of a product, it will impact everything. This aids in balance and can be used in a similar fashion to kerning. The difference between tracking and kerning is that kerning handles the space between a pair of letters while tracking manages the space between a large portion of letters, a title, for example. 

Recap:

• Leading determines the amount of spacing between lines on a document. This can be used to make room for more information, or fill blank space and add an aspect of easy reading.
• Kerning determines the space between a small portion of letters in a document and is handled on a case-by-case basis. This fine tunes the look and feel of a document.
• Tracking determines the space between all characters on a document or a specific section. This can be done for multiple reasons, and kerning and tracking should be used together rather than interchangeably. 

What is Typography in UX/UI Design?

When practicing UX/UI design, typography is vital and plays a big role in the user experience when interacting with a product. Although the practice of typography is something that sometimes requires flamboyant fonts that are really expressive, in most instances, it’s best to use standard fonts. Another good tip when it comes to utilizing fonts in UX/UI design is to avoid using too many different fonts, and when you do use a different font, it should almost appear seamless or “fit in” with the other font being used. A UX/UI designer should also avoid having too many characters, yes, characters, not words, per line. A general rule is to keep a 60-character maximum per line in a document. This helps prevent users from growing bored. If their eyes skate across the screen, flowing through the information that appears to be quick, the longer they are likely to continue utilizing the product. Consistency is key, and if a type face looks good in a 42-size font, but not good in a 12-size font, this is a UX/UI designer's sign to pick something different; readability is important. 

So let’s focus on some general rules when using typography in UX/UI design:

• Use font hierarchy: There should be an obvious change between a headline, subheadline, photo description, etc. This could be done by the size and or transparency of the font being used. 

• Use familiar font types: Times New Roman is the most common font used in long essays because it is statistically the easiest to read in large portions. Sans-Serif is also considered a safe font. Also, remember to use font choices that will look good in various sizes.

• Be consistent with your text sizing: As it is important to have variation from title to headline, to text, it is equally as important to make sure each headline subheadline and text are the same sizes throughout the document. 

• Text Alignment: There are specific usages for each text alignment, such as a pull quite, which would commonly be center aligned. But for general text, left aligned is the standard.

• Line Spacing: A UX/UI designer should aim for 140%-180% for optimal readability.

• Character Spacing: A headline should have tighter alignment to limit the blank space between letters, whereas a smaller font may have a bit larger. Both of these techniques boost readability.

• Color: A great tip for a product being made for a computer is to use gray text in the body text. By doing this, it makes reading body text less tiering for the audience.

• Negative Space: Also known as white space, is the space between elements of the page. This should be consistent throughout the document.

For more information involving UX/UI design, schedule a free mentor call today, and see if Avocademy is right for you.

Author:

Trenton Carlson is a journalist, content writer, and aspiring airline pilot. He likes his avocados baked with an egg in the hole where the pit goes.