Line Height Calculator
Turn a pixel line height into the unitless line-height ratio that CSS recommends, or do the reverse. Enter a font size, then either the line height in pixels or the ratio, and read the other value.
How to calculate line-height
- Enter the font size in pixels.
- Enter either the line height in pixels or the unitless ratio.
- Read the matching value and copy the unitless line-height for your CSS.
Examples
Pixel line height to a ratio
16px font, 24px line
1.5
Ratio to a pixel line height
16px font, ratio 1.5
24px
Frequently asked questions
What is a unitless line-height?
A unitless line-height is a plain number like 1.5 with no unit. CSS multiplies it by each element's own font-size, so the line spacing scales correctly even when child elements have different font sizes.
How do I convert a pixel line height to a ratio?
Divide the line height in pixels by the font size in pixels. A 24px line height on a 16px font is 24 divided by 16, which is a ratio of 1.5.
Why is a unitless line-height preferred over px?
A fixed px or em line-height is computed once and then inherited as that fixed length, which can crowd larger child text. A unitless value is re-multiplied per element, so nested text always gets proportional spacing.
What is a good line-height for body text?
A ratio between about 1.4 and 1.6 is comfortable for paragraphs of body text. Headings can use a tighter value closer to 1.1 to 1.3 since the lines are short.
Does line-height include the font size itself?
Yes. Line-height is the total height of each line box, not the gap between lines. A 16px font with a 1.5 ratio gives 24px line boxes, so the extra space above and below the text totals 8px.
Related tools
Type Scale Calculator
Generate a modular type scale from a base size and a ratio. Get px and rem for every step, from small print to display headings. Free and exact.
PX to REM Calculator
Convert px to rem and rem to px with any root font-size. Set the root, type a value, and copy the result for clean, scalable CSS typography.
Letter Spacing Calculator
Convert Photoshop or Figma tracking to CSS letter-spacing in em and px. Tracking is in thousandths of an em, so 50 becomes 0.05em. Exact and free.
.env to JSON
Convert a .env file to JSON, or JSON back to .env. Parses KEY=value lines, comments, quotes and export. Runs entirely in your browser.
ASCII Table
Full ASCII table for all 128 codes with decimal, hex, octal and binary values, character names and descriptions. Search by code, hex or character.
Aspect Ratio Box Generator
Generate CSS for a responsive aspect-ratio container. Use the modern aspect-ratio property or the padding-top fallback, then copy the ready code.