Line Height

Let your text breathe

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

Line Height is the space between your lines of text. In TIME Sites default line height is set automatically in em. Em is a unit of measurement which indicates size relative to the size of the font. 1em means "equal to the current font size", and 2em means 2 times the current font size. (For example in a 2em unit of measurement, if your font is 11px (11 pixels), then 2em equals 22 pixels.)

However, you can manually type in any measurement type into the Line Height field, such as px, vh, vw, em, or pc.

You can find the Line Height field in either the Text Formatting Panel or in Global Styles.

As you're creating your site, you might notice that while your text looks great on desktop, it starts looking like this on smaller devices where the text overlaps.

This is because the line height value is less than the height of the text. Line height is the space around the line of text and gives the text room to breath. 

Having a line height smaller than the text height leads to this kind of overlap when you have multiple lines of text. To make sure your text is properly spaced out, increase the line height. The greater the line height than the text value, the more space there is between the lines.

As a rule of thumb, line height can be 5-10px larger than the text size, and you can adjust as needed from there. Make the changes in Global Styles or as an element level change (which is done by selecting the text element NOT the text directly) so that you're able to adjust the spacing on different device modes and make your site responsive.

Did this answer your question?