Typography Test Page

Good Typography

The typography system is one of the most foundational parts of any interface design. If your users are unable to read your content, you can say goodbye to them immediately. That’s why even a rudimentary understanding of typography means you can determine for yourself the best fonts for modern UI design.

Text is never just text. It often goes unnoticed in good design, but good type design can elicit emotion, guide attention and even create a typographical identity.

I’ve always felt that good typography is the most undervalued and underappreciated elements in modern product design.
Bad typography, by contrast, sticks out. Even to non-design-oriented folks, bad typography is easy to spot. It reflects badly on the brand and leads to a poor user experience, even if users can’t pinpoint why…

Often, designers fall back on trends rather than carefully considering the best typography for a design. Partly, because good typography skills are difficult to master. Paired with great copywriting, understanding the basics of effective typography is a powerful force multiplier to help you stand out and improve user experiences.

What does “Display” mean?

A display text style is intended for use at large sizes for headings, rather than for extended passages of body text.

As a general rule, “text” styles should be used for the majority of informational copy (body, labels, UI elements) and small sizes in user interfaces, while larger “display” styles should be reserved for headings (H1-H6).

Base Font Size

Defining your base font size is an important step for responsive design. The base font size refers to the “default” or “primary” font size used in a website or app. The base font usually applies to most paragraphs, labels, menus, and lists.

Most modern UI and web utilizes a base font size of 16px. This is always a good default to start from as it is legible for users to read text on screen.

Ultimately, you want the body text on your phone (when held at a natural distance) to be as readable as the text in a well-printed book (when held at a natural – usually slightly farther – distance).

Line height

Determining the correct line height for a text styles is important to ensure legibility. Determining the correct line height can differ between different typefaces and sizes, so it’s important to adjust and experiment until it looks and “feels” right — it’s not an exact science.

As a general rule (and a good starting point), body text should be between 1.5 to 2x the text size, depending on the width and length of the content. For example, if your body text is 16px, set the line height to 1.5 or 24px.

To complicate things further, there is an inverse relationship between font size and appropriate line height — the larger the text, the smaller the line height should be. As a general rule for display text (headings etc.), aiming for 1 to 1.25x is usually a safe bet. For example, if your display text is 60px, set the line height to ~1.2 or 72px and see how that looks.

We’ve stress-tested Untitled’s typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project.

Optimizing letter spacing for display text

Often, typefaces are designed with an intended usage in mind — they’re optimized for display usage (larger headings), or text (smaller body copy etc.) In general, text type is designed to be legible and readable at small sizes.

Don’t worry, you don’t necessarily need to choose a separate typeface for display and text. Many typefaces can be used for both. Inter is a great example — it’s clean, consistent, and uncomplicated design features make it suitable for use at all sizes.

However, if you’re using the same typeface for both body text and display test, it is often a good idea to tweak letter spacing to the display text style to make it more legible in larger sizing. Don’t go overboard though, a little goes a long way and helps display text look and feel tighter.

Unfortunately, Figma only allows you to define a % value for letter spacing in text styles, which doesn’t mirror CSS. If you’re handing designs to a developer or building a design yourself, you’ll need to define either a hard-pixel value or a rem/em value (e.g. -0.1em).

Choosing the right typefaces

In order to implement a good typography system, the first thing is to choose an appropriate font family. Every year, thousands of new typefaces are released, and it can be hard to choose the right one for your project.

Here’s the thing: you should ignore 99% of these new fonts. This might sound hyperbolic, but 99% of modern fonts are low-quality and are usually just tweaked versions of popular font families in an effort to make a bit of money.

Here are a few tricks you can use to start picking out high-quality typefaces right away.

…