Use the free Line Height Calculator below: your data never leaves your browser — all work happens on your device, and nothing is uploaded to any server.
What line height is
Line height, also called leading, is the vertical distance from one line of text to the next. It is usually written as a ratio of the font size: a ratio of 1.5 on 16 pixel text gives a 24 pixel line height. The Line Height Calculator above converts that ratio into pixels, points, and relative units for any font size, and shows a live preview, so you can judge the spacing with your eyes as well as the numbers.
Line height controls breathing room. Too tight, and lines crowd each other: ascenders and descenders nearly touch, and the reader’s eye struggles to separate one line from the next. Too loose, and lines drift apart until the paragraph stops feeling like a connected block and starts feeling like a list of separate lines. The right value sits between those extremes, and it depends on the font, the line length, and the reading context.
How to use the calculator
Enter your font size in pixels and your line-height ratio. A ratio of 1 means the lines sit exactly one font size apart, which is almost always too tight for reading. Body text usually works between 1.4 and 1.7. Headlines often use tighter ratios, around 1.1 to 1.3, because they are short and their larger size already gives them presence. Press Calculate and read the line height in pixels, points, and relative units, then check the preview paragraph.
The math is straightforward: line height in pixels equals font size times the ratio, and points equal pixels times 0.75. The relative, unitless value is the ratio itself, and it is the form most stylesheets prefer, because it scales automatically when the font size changes. If you set a fixed pixel line height and later change the font size, the spacing will not follow; a unitless ratio always follows.
A worked example
Body text at 16 pixels with a 1.5 ratio gives a 24 pixel line height, or 18 points. That is a comfortable default for articles on screen. The same text at a 1.2 ratio gives 19.2 pixels, which feels cramped for long reading but fine for a compact user interface. A headline at 32 pixels with a 1.1 ratio gives 35.2 pixels: tight, but headlines are short, so the tightness reads as confidence rather than crowding. A caption at 12 pixels with a 1.6 ratio gives 19.2 pixels, generous for its size, which helps small text stay readable.
Matching line height to line length
Long lines need taller line height. When a line holds 70 characters, the reader’s eye travels a long way back to the next line, and extra vertical space makes that return trip easier to land. Short lines need less: a narrow column with 45 characters per line reads fine at a lower ratio, because the eye barely moves horizontally. If you widen a column, raise the line height a little. If you narrow it, you can lower the ratio slightly without hurting comfort.
Font choice matters too. Fonts with tall ascenders, long descenders, or large x-heights need more line height than compact fonts at the same size, because their shapes reach closer to neighboring lines. A font with generous built-in spacing may look fine at 1.4, while a dense font needs 1.6 for the same comfort. Test each font at its real settings rather than copying a ratio from another project.
Line height in layouts
Line height also drives vertical rhythm: the way text blocks, headings, images, and spacing align down a page. When body line height is a consistent number, like 24 pixels, and headings and margins are multiples of it, the page feels orderly and calm. When every element uses an unrelated spacing, the page feels restless even if no single element looks wrong. Choosing one base line height and building the layout’s spacing from it is one of the cheapest ways to make a page look designed.
Common mistakes
The most common mistake is copying a line height from a design tool without checking it at reading size. A ratio that looks fine in a large preview can feel cramped at 14 pixels on a phone. Another mistake is setting line height in fixed pixels for a responsive site: when the font scales up on larger screens, the fixed line height stays put and the text crowds. Use unitless ratios for body text, reserve fixed values for elements whose size never changes, and test on the smallest screen your readers use.
Typography figures are computed from the entered font size, and real rendering varies by font. Use the calculator for exact conversions, check the preview with your real font, and confirm the ratio by reading a full paragraph at the final size.