Introduction

I was developing from a design provided on zeplin but only for consistency sake I wanted to change from unit line height to unitless line height and learnt how using a unitless line height is more advantageous than using one with unit and calculating them.

Calculating unitless line height

Line height unit uses any of the valid css units e.g px, rem, percentage etc.

unitlessValue = unitValue / fontSize

Example:

unitlessValue is unknown
unitValue = 24px
fontSize = 16px

unitlessValue = 1.5

Now you can calculate the unit value and the unitless value provided you know the font size of your element.

Why unitless line height is recommended?

With the parent element's unitless value set, the child elements can easily inherit the unitless value and compute their own line height based on their font size as opposed to using unit value.

Image from LogRocket