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?