Line Height Calculator

What is line height, and why does it decide readability?

Line height, known in CSS as line-height and in print as leading, is the vertical distance from one baseline of text to the next. It is the single most powerful lever for readability after font size itself, because it controls how easily the eye travels from the end of one line to the start of the next. Text set too tightly feels cramped and tiring: descenders from one line almost touch the ascenders of the line below, and readers lose their place, especially in long paragraphs. Text set too loosely feels disconnected, as if each line were floating on its own, and the paragraph stops reading as a coherent block. The right line height sits in between, giving each line enough air to be distinct while keeping the paragraph visibly grouped, and finding that middle ground is exactly what this calculator does.

The usual way to express line height is as a unitless ratio multiplied by the font size. A ratio of 1.5 on 16 pixel text gives 24 pixels of line height, which is a comfortable default for body copy on the web. Unitless values are preferred in CSS because they scale: if a child element inherits a larger font size, its line height scales proportionally, whereas a fixed pixel value would stay frozen and could become too tight. That is why the calculator reports both the pixel result and the ratio, and why the CSS it suggests uses the unitless form. When you see a design system specify line height as 150 percent, it means the same thing as a ratio of 1.5, and converting between the two is just a matter of moving the decimal point.

How the calculator works

Enter your font size in pixels and your chosen ratio, and the calculator multiplies them and rounds the result to one decimal place, which is precise enough for any real design while staying readable in code. It also classifies the result: ratios below 1.3 are labelled tight, ratios from 1.3 to below 1.6 are comfortable, and ratios of 1.6 and above are generous. These labels are guidance, not rules, because the right ratio depends on the typeface, the line length, and the context. A condensed font with a small x-height can tolerate a tighter ratio, while a wide, open typeface with tall ascenders often needs more air. The live preview shows your exact settings applied to a sample sentence, so you can judge the spacing with your eyes rather than trusting a number alone.

The ratio slider is there for exploration. Drag it slowly and watch the preview change: at 1.0 the lines collide, at 1.2 they feel brisk and editorial, at 1.5 they feel calm and bookish, and at 2.0 they feel like a draft with room for handwritten notes. Most body text on the web lives between 1.4 and 1.7, most headings live between 1.1 and 1.3, and captions and labels often sit around 1.3 to 1.4. If you are designing for a specific audience, such as older readers or readers with dyslexia, lean generous: accessibility guidance frequently recommends line spacing of at least 1.5 for body text, and generous spacing is one of the cheapest accessibility wins available to any designer.

Choosing a ratio for body text

Body text is read in long stretches, so comfort matters more than compactness. A ratio of 1.5 is the classic starting point for 16 to 18 pixel text, and it remains a good default for articles, documentation, and product descriptions. Shorter line lengths can go a little tighter, because the eye has less distance to travel back to the start of the next line, while longer lines need more height to prevent the eye from skipping a line or re-reading the same one. A useful rule of thumb is that lines of 45 to 75 characters pair well with ratios of 1.5 to 1.6, while very short lines, such as in a narrow sidebar, can drop to 1.4 without harm. If your text will be read on phones, where lines are short but the screen is held close, 1.5 to 1.6 still feels right, because the limiting factor is the density of the block rather than the line length alone.

Typeface choice shifts the ideal ratio noticeably. Fonts with a large x-height, where lowercase letters are tall relative to the cap height, look bigger at the same pixel size and need more line height to avoid a crowded feel. Fonts with long descenders, such as many serif faces, also need extra room so the tails of letters like g and y do not crowd the next line. The only reliable way to settle the question is to test your actual font at your actual size, which is why the preview matters: numbers get you close, but your eyes make the final call. Set a paragraph in your real typeface, read it at arm's length, and adjust in steps of 0.05 until the text stops feeling either cramped or floaty.

Line height for headings and display text

Headings behave differently from body text because they are usually short, large, and read as a unit rather than line by line. A ratio of 1.1 to 1.25 is typical for headings, and the larger the heading, the tighter the ratio can be, because the absolute pixel gap between lines is already large. A 48 pixel heading at a ratio of 1.1 still has nearly 53 pixels of line height, which is plenty of air in absolute terms, while the same ratio on 14 pixel text would feel suffocating. Multi-line headings also benefit from tight leading because it keeps the lines visually grouped as a single headline, and a generous ratio can make a two-line heading look like two separate thoughts. Watch out for headings that wrap awkwardly, and adjust the wording or the size before you reach for more line height.

Display text, such as hero headlines and poster type, often goes even tighter, sometimes to 1.0 or 1.05, especially when the design uses uppercase letters or a condensed face. Tight display leading looks confident and editorial, but it demands care with descenders and with diacritics in languages that stack marks above letters. If a tight headline clips or crowds in another language, loosen it slightly rather than defending a number. The calculator handles these cases the same way as body text: enter the size, enter the ratio, and read the pixel result, then check the preview at a large size before committing.

Line height, line length, and paragraph spacing

Line height does not work alone. It interacts with line length, paragraph spacing, and font size as a system, and changing one usually means revisiting the others. A common system is to set body text at 16 pixels with a ratio of 1.5, giving 24 pixel lines, and then to space paragraphs by exactly one line, 24 pixels, which creates a calm vertical rhythm where every element aligns to a multiple of the baseline. Designers call this a baseline grid, and it is the reason many sites feel orderly even when you cannot say why. If you increase line height for readability, consider increasing paragraph spacing to match, or the paragraphs will blur together despite the airy lines. Conversely, if space is tight, such as in a dense data table, a ratio of 1.3 with clear row separation can be more readable than a tall ratio that pushes content off screen.

Letter spacing also plays a role. Uppercase text and small labels often need extra letter spacing to stay legible, and that extra width can make lines feel longer, which in turn benefits from slightly more line height. Small text, such as footnotes and captions, needs proportionally more line height than large text, because the absolute gap between lines shrinks with the font size: 12 pixel text at 1.5 has only 18 pixels of line height, which can feel tight, so captions often use 1.5 to 1.6. The calculator's classification helps here, but the real test is always reading the result in context, at the size and on the device your audience will use.

Common line-height mistakes

The most frequent mistake is copying a ratio from one typeface to another without testing. A ratio that looks perfect in a geometric sans-serif can look cramped in a serif with long descenders, and vice versa. The second mistake is using a fixed pixel line height everywhere, which breaks when text scales for accessibility or when a heading inherits body spacing. The third mistake is setting line height in a design tool and then forgetting to translate it into CSS, leaving developers to guess. Always hand over both the font size and the unitless ratio, or the exact pixel value at each size, so the built result matches the design. The fourth mistake is ignoring line height on mobile, where narrow columns and larger relative text sizes change the feel of the same ratio. Test every breakpoint, not just the desktop layout.

Another common error is confusing line height with paragraph spacing. Increasing line height to separate paragraphs makes the lines inside each paragraph drift apart too, which hurts readability, while the correct fix is to keep line height comfortable and add margin between paragraphs. Similarly, tight line height is sometimes used to cram more content above the fold, but the readability cost usually outweighs the space saved, because users who cannot read comfortably simply leave. If space is genuinely scarce, reduce the font size slightly or shorten the copy rather than strangling the line height.

Accessibility and line height

Generous line height is an accessibility feature, not a luxury. Readers with dyslexia, low vision, or cognitive load benefit from clear separation between lines, and the Web Content Accessibility Guidelines encourage text that can be resized and respaced without loss of content or function. A ratio of at least 1.5 for body text, combined with paragraph spacing of at least twice the font size and the ability to override styles, is a widely cited target for accessible text. Even if you do not formally test against those criteria, choosing 1.5 as your body default and checking your pages at 200 percent zoom will catch most problems. Remember that users can override your styles with browser settings, so use relative units and avoid fixed heights on text containers that would clip enlarged text.

• Start body text at 1.5 and adjust in 0.05 steps after reading real copy.
• Use unitless ratios in CSS so line height scales with font size.
• Keep headings tight (1.1 to 1.25) and body text comfortable (1.4 to 1.7).
• Test every size on mobile and at 200 percent zoom before shipping.
• Separate paragraphs with margin, not by inflating line height.

Good typography is mostly invisible: readers notice it only when it goes wrong. Calculate your line height, preview it in your real typeface, and trust the comfortable middle ground, and your text will feel effortless to read, which is the highest compliment typography can receive.