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 a either a hard-pixel value or a rem/em value (e.g. -0.1em).

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 a either a hard-pixel value or a rem/em value (e.g. -0.1em).