Line Height Calculator

Line height — known as leading in traditional typesetting — is the vertical distance from the baseline of one line of text to the baseline of the next. It directly governs how open or cramped a block of text feels, and it is one of the most impactful readability levers available to web designers and developers.

In CSS the property is simply called line-height. It can be specified as a unitless multiplier (e.g. 1.5), in pixels (24px), in em units (1.5em), or as a percentage (150%). Each notation calculates the same final pixel value differently, which is why a line height calculator is so useful — it translates between all four units instantly and shows the resulting pixel height, leading gap, and half-leading for any combination of font size and line-height value you enter.

When type was set in physical metal, compositors inserted thin strips of lead between rows to add spacing — hence "leading." Modern CSS inherited the concept but extended it: the browser divides the calculated space above and below each line of text into equal halves (called half-leading), distributing them symmetrically around the em square. This means even a single value like line-height: 1.5 has a precise geometric meaning tied to the font size in use.

Good line height balances two competing needs: lines must be far enough apart that the eye can track from the end of one line back to the start of the next without confusion, but close enough that the text block reads as a coherent unit rather than a collection of isolated stripes. For body copy at typical web sizes (14–20 px), values between 1.4 and 1.6 hit this sweet spot for most typefaces. Headings, which are set larger and in shorter lines, typically use tighter values around 1.1–1.3.

This calculator lets you explore every aspect of CSS line height: enter a font size, choose a unit, adjust the value, and see the pixel equivalent, unitless ratio, leading, and half-leading recalculate in real time. The live preview and line-length analysis help you confirm your settings will look great before you touch a single line of CSS.

The calculator supports four CSS line-height units. Each maps to pixel values and a unitless ratio using the formulas below. The leading is the extra space between lines beyond the font's cap height — it equals the absolute line height in pixels minus the font size in pixels. The half-leading is that gap split evenly above and below the text content area.

Understanding the unit conversions helps you choose the right notation for your project. Unitless values are the recommended approach in CSS because they scale proportionally when a child element inherits a different font size — the child multiplies its own font size by the ratio rather than inheriting a fixed pixel value. Pixel values lock the row height absolutely, which is useful for precise grid alignment but breaks with fluid typography. Em and percentage units behave identically to unitless in the parent element but, unlike unitless, they inherit the computed pixel value rather than the ratio, which can cause tight stacking in nested elements.

The CSS specification recommends using unitless line-height values for almost every use case, and for good reason. When you write line-height: 1.5, the browser multiplies the current font size by 1.5 to compute the row height. If a child element has a different font size, it performs the same multiplication with its own font size — so line spacing stays proportionally correct throughout your component tree.

Fixed pixel values like line-height: 24px lock every row to 24 px regardless of font size. This looks fine at the size you designed for, but it breaks as soon as users increase their browser's base font size (an accessibility concern) or when a child element inherits a font size that's larger than the row height, causing text to overlap. Similarly, 1.5em and 150% compute identically to the unitless value in the element where they are set, but they pass the already-computed pixel value to children rather than the multiplier — a subtle inheritance trap that trips up many developers.

The practical advice for most projects: use a unitless value between 1.4 and 1.6 for body copy and between 1.1 and 1.3 for headings. Reserve pixel values for situations where you need exact row alignment — for example, a code block that must align with a grid. Use em or percentage only when you explicitly want the inherited-pixel-value behavior (rare). This calculator's presets (Tight 1.2, Normal 1.5, Relaxed 1.75, Loose 2.0) cover the most common editorial and UI type-setting scenarios.

Accessibility guidelines from WCAG 2.1 recommend that line spacing is at least 1.5 times the font size within paragraphs, and that paragraph spacing is at least 2 times the font size — requirements that map directly to the unitless values this tool calculates. Using this line height calculator ensures you meet those thresholds before publishing.

Line height does not work in isolation — it is deeply intertwined with line length, the number of characters that fit horizontally on a single line of text. Typography research consistently points to a sweet spot of 45–75 characters per line for comfortable reading of body copy (some sources extend the range to 45–85 for wider screens). Shorter lines feel choppy and make the eye jump constantly; longer lines cause fatigue because the reader has to travel far horizontally and then find the start of the next line.

This calculator estimates the characters-per-line count using a simple heuristic: the average character width is approximated as 50% of the font size (avgCharWidth = fontSize × 0.5). This gives a reasonable first approximation for proportional Latin typefaces. The optimal container widths are then:

• Minimum readable width: 45 × (fontSize × 0.5) = 22.5 × fontSize
• Maximum readable width: 75 × (fontSize × 0.5) = 37.5 × fontSize

For a 16 px font the optimal column is between 360 px and 600 px wide — matching the conventional wisdom of setting body copy containers to around 600–700 px and capping them with max-width. For a 18 px font the range shifts to 405–675 px. The "Line Length Analysis" panel in the calculator shows where your current container width falls relative to these bounds and flags it when you stray outside the recommended range.

Adjusting line height in response to line length is also good practice. Very narrow columns (under 45 characters) can tolerate slightly looser line spacing — say 1.6 — because the reader's eye must jump back to the left more frequently and extra vertical air helps with orientation. Conversely, wide lines benefit from a touch more space as well, to give the eye a clear path back. The sweet spot stays around 1.5 for the 45–75 character range.

Applying line height effectively goes beyond picking a single number. Here are the most impactful best practices distilled from typographic standards and real-world CSS work:

Set a global base on the body element

Applying line-height: 1.5 directly on the body element lets all paragraph text inherit a solid default. Override it for headings, code, and UI elements that need different spacing. This keeps your CSS concise and avoids per-element repetition.

Tighten headings, loosen body

Headings are short, large, and scan quickly — they work best with line-height between 1.1 and 1.3. Body paragraphs are long and require sustained reading — stay in the 1.4–1.6 range. Captions, labels, and UI micro-copy often sit comfortably at 1.3–1.4.

Match line height to your grid

On projects using an 8 px baseline grid, choose a font size and line height combination whose pixel value is a multiple of 8. For example, 16 px font with line-height 1.5 gives 24 px rows — three units on an 8 px grid. Use the pixel output from this calculator to confirm alignment before writing the CSS.

Test with real text at real sizes

Numbers alone won't tell you if a setting looks good. Always fill the preview panel with representative copy and check both desktop and mobile viewport widths. What reads well at 600 px may feel cramped at 360 px if the container scales without media query overrides.

Respect user preferences

Some users apply custom browser stylesheets or operating-system font-size adjustments. Unitless line heights handle these gracefully; avoid !important on line-height rules so user-agent overrides can still take effect for accessibility needs.

Choosing the right unit notation for line-height affects maintainability, accessibility, and how values cascade through your component tree. The table below summarizes the trade-offs:

For new projects, standardize on unitless values throughout. Use this line height calculator to quickly convert any existing pixel or percentage values to their unitless equivalents — simply enter the font size and the pixel line height, select the "px" unit, and read the Unitless column in the results.