Convert line-height between unitless, px, em, rem, and percentage values, then preview text spacing and interpret whether it reads tight, balanced, or loose. Use it to test different inputs quickly, compare outcomes, and understand the main factors behind the result before moving on to related tools or deeper guidance.
Last updated
Convert line-height between unitless, px, em, rem, and percentage values, then preview how the same spacing ratio reads in text.
This is most useful when you are translating a design spec into CSS, checking inherited type rhythm, or deciding whether a paragraph style feels tight, balanced, or loose.
Unit guidance
Unitless line-height scales with the font size, so it is usually the safest default for reusable CSS.
Add values to convert line-height Add a line-height value, font size, and root font size to see the converted spacing and preview the resulting text rhythm.
Line-height calculator: convert unitless, px, em, rem
A line-height calculator helps you turn an abstract CSS value into a readable spacing decision. This page converts line-height between unitless, px, em, rem, and percentage values, then shows how that spacing reads in text so you can judge whether a style feels tight, balanced, or loose before you ship it.
What line-height controls in CSS
Line-height controls the height of each line box in a block of text. In practice, that means it governs the vertical rhythm between one line of text and the next, which has a direct effect on readability, density, and how comfortable a paragraph feels over multiple lines.
A line-height value is easiest to reason about when you can see both the absolute spacing and the inherited ratio. Designers often receive a token like `24px`, while developers may prefer a unitless value such as `1.5` because it scales more predictably when font sizes change. A line-height calculator bridges those two views.
How the conversion works
The key relationship is the current font size. A unitless value, an `em` value, and a percentage value are all tied to the element's font size. A `rem` value is tied to the root font size. A pixel value is already absolute and can be translated back into the other forms by dividing it by the relevant font-size basis.
That is why this page asks for both the element font size and the root font size. Without those two baselines, the same numeric line-height can mean something very different depending on whether it is written as `1.5`, `24px`, `150%`, or `1.5rem`.
px line-height = unitless value × current font size
Use this when the source value is unitless or in `em`, both of which follow the current element font size.
px line-height = (percentage / 100) × current font size
Use this when a design spec or legacy stylesheet expresses line-height as a percentage.
px line-height = rem value × root font size
Use this when the spacing is tied to the root type scale instead of the local element size.
unitless ratio = px line-height / current font size
Use this to convert a fixed pixel line-height back into a reusable CSS ratio.
Why unitless line-height is often the safest default
Unitless line-height usually behaves best in component systems because it inherits as a ratio rather than as a fixed length. If a nested element changes font size, the unitless line-height scales with it automatically, which helps keep headings, captions, buttons, and body copy from inheriting awkward fixed spacing.
Pixel line-height can still be useful when a design token is deliberately locked to a specific line box, but it is more fragile in reusable UI. Percentage values can work too, yet many teams prefer unitless values because the intent is easier to read and the inheritance behaviour is clearer.
Worked example: 1.5 at a 16px font size
If the font size is 16px and the line-height is `1.5`, the computed line-height is 24px. That means each line box is 8px taller than the font size itself. The same spacing ratio is also `1.5em`, `150%`, and `1.5rem` when the root font size is also 16px.
That example is useful because it lands in a common body-copy range. It is open enough to read comfortably across several lines, but it is not so loose that the paragraph breaks apart visually. If the same design used 1.15 instead, it would feel noticeably tighter. If it used 1.8, it would feel much more airy and spread out.
Frequently asked questions
What is a good line-height for body text?
A common body-text range is roughly 1.4 to 1.6, but the best value depends on the font, measure, language, and visual density of the layout. Narrow UI labels and large headings often use tighter values, while long-form reading copy usually benefits from a little more vertical space.
Is unitless line-height better than px?
Usually, yes, for reusable CSS. A unitless value inherits as a ratio, so if a child element changes font size the line-height scales with it. A pixel line-height is fixed, which can create awkward rhythm when font sizes vary inside a component.
How do I convert 24px line-height into a unitless value?
Divide the pixel line-height by the current font size. If the text is 16px and the line-height is 24px, then `24 / 16 = 1.5`, so the equivalent unitless value is `1.5`.
What is the difference between em and rem line-height?
`em` follows the current element font size, while `rem` follows the root font size. If a component changes its local font size, an `em`-based line-height changes with it, but a `rem`-based line-height stays tied to the root scale.
