Skip to content We're live on Product Hunt today Upvote
install

free tools runs in this tab no account, no upload

free tool

Line height

What unitless line-height is 28px on 18px text?

A px line-height inherits as px, which is why a small caption inside a large heading ends up with the heading's leading. The unitless value is the fix and this is the conversion.

1.5556 Unitless, so a child element recomputes it against its own size.
ready to paste
font-size: 18px;
line-height: 1.5556;
  • as a percentage 155.56%
  • a 13px child gets 28px if you write it in px 20.22px
  • leading above and below 5px each

how to use it

  1. Type the font size and the line height your design file gives, both in px.
  2. Copy the unitless value.
  3. Check the inheritance row: it is the failure a px line-height causes.

what this page cannot do

The extension reads the computed line-height of any element you point at, along with the rule that set it, which is how you find out the leading came from a reset rather than from the design.

Fonts in the panel What would this page look like in a different typeface?