/01 Setting line height that is actually readable
Line height controls the vertical space between lines of text, and it is the single biggest lever on whether a paragraph feels comfortable or cramped. Too tight and lines visually merge; too loose and the eye loses its place returning to the left margin.
This calculator takes your font size and suggests line heights in unitless, pixel and percentage form, so you can see the same value in whichever notation your stylesheet uses.
/02 Why unitless values are the safe default
A unitless line-height like 1.5 is a multiplier: children inherit the ratio and recompute against their own font size. Set line-height in px instead and children inherit the fixed pixel value, so a heading nested inside can end up with lines overlapping.
As a rule of thumb, body copy sits around 1.4 to 1.6, large headings tighten towards 1.1, and long measures need more room than short ones. WCAG asks for at least 1.5 within paragraphs for body text.
/03 Using a line height calculator
Line height is font size multiplied by a ratio. At 16px with a ratio of 1.5, lines sit 24px apart; at 18px with 1.6 they sit 28.8px apart. A line height calculator does that multiplication for any size and shows the result three ways: the unitless ratio you should normally put in CSS, the pixel value designers hand over, and the percentage some tools still use.
The named presets give you a sensible starting point for each job. Tight and snug suit large headings, where lines already look far apart. Normal and relaxed suit body text and long-form reading. Loose helps large blocks of text and readers who need more space between lines. There is also the golden ratio, 1.618, a popular choice for comfortable long reads. Every option renders in the preview, so you can judge by eye before copying a value.
/04 CSS line height, Tailwind and accessibility
In CSS, line-height: normal is not a fixed value. Browsers use the font's own metrics, usually around 1.2, which is why swapping fonts can quietly change your spacing. Setting an explicit unitless value such as 1.5 removes that surprise.
Tailwind's leading utilities map onto these same ratios: leading-tight is 1.25, leading-snug 1.375, leading-normal 1.5, leading-relaxed 1.625 and leading-loose 2. For accessibility, WCAG asks that content still works when users increase line height to 1.5 times the font size, and its enhanced guidance recommends at least 1.5 within paragraphs by default.