How to get ahead of 99% of UI designers? Honor your typography skills!

Textual information makes up to 90% of user interface design, and the better you ‘design’ text, the higher your chances of creating a positive user experience.

This article overviews typography essentials that all UI designers should know. We will start with the basics, such as typeface and move to more complex concepts, such as creating type scale. You will also learn how to practice typography in Figma.

Typeface

A typeface is a design or style of a set of letters that share common characteristics. The term “font” is often used interchangeably with “typeface,” but there is a difference between the two. A font refers to a specific instance within a typeface, often distinguished by factors like weight (e.g., bold or regular) or style (e.g., italic).

Difference between a typeface and font.

Typefaces can be classified into a few categories:

Serif

A serif is a small shape that appears at the beginning or end of a stroke on a letter. Serif typeface works well for the headings but its not recommended to use it for body text. Serifs, especially at smaller font sizes, can become less distinct and may not render as clearly on screens, affecting readability.

Example of a serif typeface (Inria Serif).

Sans serif

A typeface without serifs is called a sans serif typeface, from the French word “sans,” which means “without.” A sans serif typeface works well for body text. In digital interfaces, sans-serif fonts can provide a crisp and clear appearance, especially on high-resolution screens.

Example of a sans typeface (Inria Sans).

Monospace

Monospace typefaces display all characters with the same width. A monospaced typeface is commonly used in programming languages to distinguish programming code from natural-language text.

Example of monospace typeface (Roboto Mono).
Python code example in monospace typeface.

Handwritten typeface

Handwriting typefaces are unconventional with a natural, handwritten feel. Often, handwritten typeface is used as a decorative element in design. But sometimes, UI designers use the handwritten typeface for headings (H1–H6) to make the UI look more visually attractive.

Example of a handwritten typeface (Savoye LET).
Analogue Foundation nicely pairs handwritten letters with a serif typeface.

Font size

Font size is a measurement of the height of characters in a typeface, typically measured in points (pt) or pixels (px). The chosen font size plays a crucial role in determining the readability, visual hierarchy, and overall aesthetics of text within a design. In web design, it is recommended to use 16 pixels for body text. This is considered a good starting point because it provides a readable and comfortable size for most users.

Setting text size to 16px in Figma.

Type scale

A type scale is a system that defines a set of harmonious and proportionally related font sizes for body text and headers. The system helps to create a visually appealing and consistent visual hierarchy in UI design.

A common approach to creating a type scale is to start with a base font size and then define a series of sizes that are multiples or fractions of the base size. For example, a simple type scale might look like this:

  • Base size: 16 pixels
  • Scale: Multiplier (1,25) (16 pixels x 1,25 = 20 pixels)
  • Text sizes: 13 pixels (Caption), 16 pixels (Body), 20 pixels (Header 3), 25 pixels (Header 2), and 31 pixels (Header 1).
Generating typescale in Figma using the Typescales plugin.

Here is a quick guide on how to create a type scale for your Figma project.

Font weight

Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights. A typical number of weights for a typeface is four or six.

Setting font-weight to Thin in Figma.

Its recommended to use Regular font weight for body text. Regular font weight provides a balanced and moderate thickness of characters, making text more readable, especially in longer passages of body text.

Bold text can enhance the user experience when applied judiciously. Here are some scenarios when it’s appropriate to use bold text in UI design:

  • Headings and titles: Use bold text for headings and titles to make them stand out and clearly indicate hierarchy.
  • Call-to-action button labels: You can apply bold styling to text on buttons or links to emphasize their importance and encourage user interaction.
Smae button with regular and bold labels.
  • Highlight individual words in body text: Use bold text to emphasize critical information, such as important points in an instructional text, key details in a message, or bullet points.
  • Highlight active elements: Bold text can be used to indicate selected or highlighted items in lists or menus, making it clear what option the user has chosen.

Letter spacing

Letter spacing, also called tracking, is a space between letters in a piece of text. Letter spacing should be selected proportionally to the font size:

  • Larger type sizes, such as headlines, use tighter letter spacing to improve readability. By reducing space between individual letters, you improve readability since the reader’s eye will travel a shorter distance.
  • For smaller type sizes, such as body text and, especially, text in vertical columns, looser letter spacing can improve readability as more space between letters in smaller type sizes increases the contrast between each letter shape.
Configuring letter spacing in Figma. Setting 5% spacing for body text to make it more readable.

Line height

Line height, also known as leading, controls the amount of space between baselines in a block of text. Both too big and too little small line height can negatively impact text readability.

It’s recommended to choose a text’s line height proportional to the type size. For most text, the optimal line spacing is between 120% and 145% of the point size.

Setting line height in Figma for the body text. When set to auto, the line height will be 19 pixels, but we will set it to 23 to make more whitespace between lines.

Text alignment

Text alignment is the horizontal placement of text within a defined space, such as a paragraph, text box, or column.

Left and right- aligned text

In left alignment, text is positioned along the left margin, creating a straight left edge, while the right side remains uneven. Left-aligned text is the most common setting for left-to-right languages such as English. We read from left to right (F-shaped reading pattern) so that left-aligned text aids in good readability.

Text alignment controls in Figma.

Right-aligned text is the most common setting for right-to-left languages, such as Arabic and Hebrew. Right alignment is uncommon for left-to-right languages, but it can be used for specific design purposes (for example, to provide contextual information for a particular part of the text).

Right-aligned text is used to provide contextual information for the user.

Centered

Centered text is best used to distinguish short typographic elements within a layout (such as pull quotes) and is not recommended for long copy.

Center alignment for text.

Want to learn UI design?

Try Uxcel. Uxcel will help you learn and improve your design skills with interactive UI courses and skill tests built specifically for professional designers. You will get 25% off discount for the Pro Yearly subscription if join through this link.

The best way to learn UX design

This post contains affiliate link(s)

Typography essentials was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.