Line height

Line height is the ver­ti­cal space be­tween lines of text. You can use different units for line height to make it scale automatically with the font size, or be independent of the font size.

Here we’ll cover:

• Editing line height
• Using relative units
• Using fixed units

Editing line height

You can set the default line height for the entire project (the Body tag) or on an individual element (like a paragraph).

Line height is located in the Typography section of the Style Panel.

Setting the default line height

To set the default line height for the entire project you’ll need to set the line height on the Body (All Pages) tag. The style will cascade down to all text in the project, unless there are more specific styles set on an element.

Changing line height on a text element

Changing the line height on a text element will only affect its text content. It overrides the styles that are coming from the element’s tag or the Body (All Pages) tag.

Editing the unit

To specify the unit of a line height you can do do any of the following:

1. Click on the current unit in the line height field and then choose the unit from the menu
2. Type in the unit after your value like “150%” and press enter

Using relative units

If you want your line height to scale proportionally with your font size, you can use unitless number values or percentages. You won’t have to change the line height every time you change the font size.  

Unitless

Using the “unitless” unit is the best option for line height because it makes the line height a multiple of the font size. When the font size changes, the line height scales automatically.

To set the “unitless” unit, choose the “-” from the unit menu.

Percentage (%)

Percentage values for line height also multiply the font size. However, there are inheritance issues that can arise with %, so it’s recommended to use unitless instead.  

Using fixed units

If you want to have more control over line height, you can use fixed values like px, em, or rem. Unlike with relative units, you’ll need to set the font size and line height independently. Learn more about using typography units.