UI/UX Trainer

Typography in UI Design- Complete Illustrated Guide 2024

Mastering Typography is a must for every designer. This discipline lets you create delightful experiences only with beautiful text. Let’s see how to move from good to great design just by improving letters.

Tactics in this post will help you:

  • Realize that less is better when it comes to typefaces.
  • Professionally align text horizontally & vertically.
  • Set the right line-height.
  • Set a good line width.
  • Handle RTL (right-to-left) text.

Typeface vs Font

Font vs typeface 2

First, let’s briefly explain this subtle difference because many designers confuse these two terms.

A typeface is a set of glyphs with a common design. A font is a specific set of characters and glyphs within the typeface. For a practical example:

  • Helvetica is a typeface.
  • 16pt Helvetica Regular is a font.

Less is better, pick one, maximum 2 typefaces

Take a moment to browse the sites and apps you often use. You will notice that a majority of them use only one typeface. This simplicity enhances user readability, allowing them to comfortably read the content without distraction from various typefaces.

When considering the use of more than one typeface, it’s advisable to use one for headings and another for body content. This approach helps establish an attractive and strong visual hierarchy. It’s crucial not to mix two typefaces for the same type of content.

Now, as you select two fonts, consider how to pair them. If you don’t want to spend hours experimenting with pairings, I have listed some practical font pairing websites. A pro tip is to trust the suggestions provided by these websites.

My personal favourite and the best free resource:

https://fontjoy.com

Other resources:

https://fonts.google.com

less is more

Limit the number of weights and styles

When installing or applying fonts, you may have noticed six, seven, or even eight different styles of a single font, ranging from “Ultrathin” to “Heavy Black.” Don’t stress over these additional styles, as they can be overwhelming. Planning to use all these styles in your designs can lead to chaos.

All you need are 2-3 styles, which may vary depending on the font. For example, I use Semi-Bold for headings, Medium for subheadings, and Regular for paragraphs when using the font “Public Sans” (my personal favourite). This simple trick is incredibly effective in establishing hierarchy in your designs.

Limit the number of weights and styles

Avoid ultra light and black weights

This point is connected with the previous one. As I mentioned sticking with 2-3 styles, it’s important to remember never to include “ultra-light” and “black” in your designs.

These are extremely weighty extremes for a font, making it challenging for users to read. Your primary goal is to ensure good clarity in your designs. Therefore, opt for styles from the middle of the font family range for better readability.

Avoid ultra light and black weights 1

12-16 is Perfect base body font size

The body font is crucial for providing standard text for explanations and is essential for maintaining good readability, aesthetics, and creating visual balance in your designs. In most cases, the perfect body font size is 14, a size I have used consistently in hundreds of my projects. However, there are instances where you may opt for sizes like 12 or 16, depending on the font being used.

As a tip, I recommend avoiding odd-number font sizes. It’s best to stick to even numbers like 8, 10, 12, and so on. Reserve odd-number font sizes for situations where no other suitable choice is available.

Perfect body weight size

Build typography scale and stick to it

It’s crucial to formally prepare your typography system. While it may seem like a significant effort upfront, it will ultimately save you a substantial amount of time in the future. Personally, I have developed typography systems for my most frequently used fonts, allowing me to import them easily into new projects.

Here are the benefits of investing your time and effort into this process:

1. Consistency in fonts across your designs

2. No need to remember font sizes

3. Saves a significant amount of time

4. Easy to implement (only one click needed)

I recommend against manually generating your own scale for typography. Instead, utilize typography generators that can accomplish this task for you effectively.

https://typescale.com

Typography scale

Set good line height

Line height is just as important as the font size, yet some people tend to overlook its significance. Proper line height significantly enhances the readability of text. I have found that the best results are achieved when the line height is set between 140% to 160% of the actual font size.

For instance, if your font size is 12 px, the line height should be around 20 px. However, there’s no need to calculate this manually. If you are using Figma, which I highly recommend, simply input the specified percentage in the line height section, and it will automatically adjust accordingly.

Line height

Always align block of text to left

Our eyes naturally scan from left to right, making left-aligned text the preferred choice as it’s easier to read and scan. The text you are currently reading on this blog is aligned to the left for optimal readability.

While there are instances where center alignment may be suitable, I recommend using it sparingly, especially for smaller blocks of text. If you are unsure about how to align your text, defaulting to aligning it to the left is a safe and effective choice.

right align

Never Align right, except dates & number values in table

As mentioned in the previous section, text alignment choices can vary based on the context. While left alignment is commonly used for general content, there are instances where right alignment is more suitable.

When dealing with numbers presented in a table format, it is recommended to use right alignment. This makes it easier for users to scan and read numbers from right to left.

Number

Never justify

It’s important to break the habit of justifying every block of text you come across. While justified text may look visually appealing from a distance, it can be challenging to read due to the varying spacing between words. For optimal readability, stick to left-aligning your text.

Never justify text

Keep text and elements separate

Text aligned to the left may not always guarantee improved and easy readability, especially in cases where text is accompanied by elements like icons, buttons, tags, or avatars. In such instances, a different approach is required to ensure the text is easily scannable.

As a general guideline, we place elements like buttons, text content, links, and tags in one column—referred to as the scannable section. This arrangement assists users in recognizing the content more efficiently.

Conversely, icons and avatars are placed in a separate column as they serve a different purpose in capturing users’ attention.

Ux trainer 1

Align to baseline

When placing two different font sizes together, utilizing the baseline feature is key. The baseline is an invisible line that defines the bottom of a character’s body. For example, when aligning smaller and larger text together vertically, it’s essential to do so to the baseline.

Aligning text to the baseline not only enhances visual appeal but also creates balance, making it easier to read and comprehend.

align to baseline 1

Set line width to 45-75 characters per line

When reading large blocks of content, the line width plays a crucial role in determining how comfortable it is for the user to read the text. The optimal range for line width is typically between 45-75 characters per line. Text that is shorter or longer than this range can make reading more challenging.

A pro tip to keep in mind is not to stress too much about this guideline; instead, go with the flow of your designs. While it’s helpful to be aware of the recommended line width, remember that design considerations should also align with the overall flow and aesthetics of the content.

Set width to 45 75

Cut line width to 75% for long titles

In a well-designed layout, you will seldom encounter long titles displayed in a single line. Instead, longer titles are typically broken up into 2 or 3 lines. This practice is essential to enhance the scanability of your content. Titles spanning multiple lines not only make the content easier to scan but also contribute to establishing a clearer visual hierarchy within your designs.

Cut line width

Set the Rhythm

No one enjoys reading long blocks of text, myself included. The ultimate solution to this issue is to create optical rhythm when presenting longer portions of text. This is achieved by breaking up the text into paragraphs and adding subheadings, thereby enhancing the visual hierarchy and improving the scannability of the content.

Consider how far you have read in this post; the optical rhythm created by utilizing paragraphs and subheadings has likely played a role in keeping you engaged. Information presented in this manner is typically not freely given, which may explain why you are continuing to read.

set rhythm

Use smaller letter spacing for headings

For headings, a letter spacing of around -1.5 is recommended to establish a well-balanced typography scale in your designs. As a general rule, the smaller the header, the larger the letter spacing should be to enhance readability and visual appeal.

When it comes to uppercase headings, different tactics can be employed to ensure they stand out effectively and maintain consistency within the overall design scheme.

Smaller letter spacing for headings

Use bigger letter spacing for Uppercase text

When working with uppercase text where all the letters are the same size, readability can be improved by adjusting the letter spacing. Using a letter spacing of 1.5 or even larger can help users identify each letter separately, making the text easier to read. This adjustment allows the text to breathe better and creates more space between the letters for enhanced clarity.

This general rule for increased letter spacing applies not only to headings but also to all types of uppercase text, overlines, and buttons to ensure better readability and visual appeal across various design elements.

larger spacing

Handling RTL

Left-to-right (LTR) and right-to-left (RTL) are two different language scripts that determine the direction in which content is displayed on a page. LTR languages display content from left to right, while RTL languages display content from right to left, as the names imply.

To accommodate RTL languages effectively in design, certain elements such as icons and UI components may need to be mirrored to ensure a consistent and professional appearance. Understanding the key considerations for mirroring content in RTL languages is important for creating designs that are inclusive and accessible to diverse linguistic audiences.

Mirror this type of content

In preparing an RTL (right-to-left) design for your project, consider mirroring the following types of content and UI elements to ensure the design is appropriate for RTL languages:

Content to be mirrored:

  • Blocks of text (such as sentences)
  • Arrow icons indicating flow or process direction
  • Illustrations depicting sequences of events

UI elements to be mirrored:

  • Navigation buttons arranged in reverse order (e.g., the menu button on the left side of the navigation bar)
  • Text fields/input icons on the opposite side of the field
  • Groups of buttons presented horizontally in reversed order
  • Progress bars and sliders
  • Icons indicating direction (such as arrows)

By mirroring these elements, you can create a more cohesive and user-friendly design that caters to RTL language users.

Mirror this type of content

Content that should not be mirrored

Content that should be displayed in the same direction for both LTR and RTL languages includes:

  • Numbers
  • Untranslated text

UI elements that should not be mirrored:

  • Icons that do not communicate direction (e.g., phone or settings icons)
  • Charts and graphs
  • Media controls for playback (as they reflect the direction of the tape being played, not the chronological time direction)
Icons mirror

Conclusion

Typography in UI design should not be overly complex, but it is essential for every designer to be familiar with certain terms and settings. A good understanding of typography can greatly elevate the quality and professionalism of your designs. It’s important to remember that these rules are guidelines and should not be treated as strict laws that must be rigidly followed.

One response

  1. […] The most important thing is to have a goal in mind. Ask yourself, “How do I want the audience to react to the text?” and let it guide the process. The right font for a task has a combination of legibility and readability and is appropriate for the audience and the message. If you want the complete guide on typography check out “Typography in UI Design- Complete Illustrated Guide 2024”. […]

Leave a Reply

Your email address will not be published. Required fields are marked *