EnterprisePricingCustomersLog in
Thomas Lowry
Thomas Lowry
Designer Advocate at Figma

Setting line height

In addition to choosing the right fonts for your system, you'll also need to specify the right line height pairings for them. For example, you should take a different approach to setting line height with body copy than the approach you take with headlines. Below I provide more detail on what to consider in those two use cases.

Body copy

To make typography in body copy readable, you can afford to have a bit more space between the lines. Body copy is text dense, and users will sometimes spend a long time reading it. As a starting point for figuring out the right line height, I recommend multiplying the font-size of your body copy by 1.5. Then evaluate whether that's legible enough.

Optical effects

In figuring out body copy line height, you should also consider the color scheme of your text and its background. Do you have a positive application (dark text on light background), or a negative application (light text on dark background)? A style with the same properties can look different depending on the context and resulting optical effects.

For example: In Figma's own design system, we have separate text styles for both positive and negative applications. The main difference between these styles is a slight change in letter spacing that opens up the space between letters for styles intended for use on dark backgrounds.

Headlines

With display sizes, you won't need as much space between the lines or letters of type as you do with body copy. So, you will generally want to reduce the line spacing as you get into your headlines. If the typeface you're using has a specific variant for display sizes, the designer of the font has most likely tightened up the spacing as part of the design.

While choosing, I recommend setting up a type waterfall to arrange your text sizes from largest to smallest. That will give you an overview of the complete system.

Try Figma for free.