Ask a Question ?
Design & Publish Websites Faster

Choosing a Safe Line Height Without Knowing It – All The Time

I’m super happy to announce a very small feature that you will enjoy without knowing it. It locks your line height to be 1.68x the font size choice for that particular text area.

A Text app with a low line height

A line height too small makes the text difficult to read

What’s the point of this awesome feature?

  • The responsive version of your site will not look all broken because of bad line heights
  • You will practice semi-ok-not-horrible-and-safe typography rules without knowing anything about type
  • You don’t have to readjust your line height every time you write. Just change your font size
Comparisson of before/after states of a Text app in a scaled down window

With this feature, responsive version looks good too

What is line height anyway?

Line height (or leading) is the distance between lines of text. The bigger this number is, the larger the distance between lines.

Large line height for text formatted in Arial, 15 pixels

In this sample, line height has been increased to 36 pixels

Line height should be slightly larger than the font size to keep it readable. If this number is too high or too low, the readability for a given block of text may be compromised.

How do I turn it on?

You must activate this feature manually through the Design Mode menu.

Design Mode menu with "Lock Line Height" option checked

Activating the line-height lock

Once active, you can change any font size and your line height will be automatically updated.

Note that it only runs at the time of changing a font size, doesn’t automatically update current text.