Line height calculator
A recommended line height from font size and line length.
FreeRuns in your browserNo signupUpdated 2026-10-29
A unitless value is what you want in CSS: it scales with the font size of each element.
Line height
1.50
24.0px at 16px
Snapped to grid
1.500
24px on a 4px grid
Line length
Comfortable
About 520px wide
Preview
Good leading gives the eye a clear path back to the start of the next line. Too little and lines merge; too much and the paragraph falls apart into stripes. The right value depends on the size of the type and the width of the column.
p {
font-size: 16px;
line-height: 1.50; /* 24.0px */
max-width: 65ch;
}About this tool
How it works and how to read the result.
Need this done for you?
Website design & development
Company websites designed and built to win trust and enquiries.
See the serviceWhat it does
This line height calculator suggests a line-height from the two things that matter most: how big the text is and how long each line runs. Longer lines need more space between them so the eye can find the start of the next one, while large headings need less. The result is a unitless value you can paste straight into CSS, with an option to round it to a 4px or 8px baseline grid.
How to use it
- Enter the font size in pixels.
- Count the characters in a typical line of your layout, spaces included, and enter it. Body text is comfortable at 45 to 75.
- Choose whether the text is body copy, a heading, or buttons and labels.
- Set your baseline grid, or 0 to skip snapping.
- Read the suggested value, check the preview paragraph, and copy the CSS.
How to read the result
For 16px body text in a 65-character column the suggestion is 1.5, or 24px. On a 4px grid 24px is already a whole number of steps, so the snapped value is also 1.5. The line length badge reads Comfortable, and the column is roughly 520px wide.
Stretch the same text to 90 characters a line and the suggestion rises to about 1.59, or 25.4px, because extra space helps the eye track back across a wider line. On the 4px grid that snaps back to 24px. The badge turns amber: 90 characters is beyond the comfortable range, and the better fix is often a narrower column rather than more leading.
Headings work the other way. A 40px heading set 30 characters wide comes out at about 1.1, or 44px. At that size the gaps between lines are already large, and 1.5 would make a two-line heading look like two separate headings.
Use the unitless number in CSS. A value such as line-height: 24px is inherited as a fixed size, so a child with larger text ends up cramped.
Set the font sizes first with the type scale generator. Our website design and development team tunes these values on every build.
Questions
Frequently asked.
Should line-height have a unit?
Usually not. A unitless line-height is multiplied by each element's own font size, so it scales correctly through nested elements. A value in px or em is calculated once on the parent and inherited as a fixed length, which cramps any child with bigger text.
What line height does WCAG recommend?
WCAG 1.4.12 says content must still work when users set line-height to at least 1.5 times the font size. It does not require that as your default, but 1.5 for body text is a common starting point and avoids layouts that break when someone overrides it.
Your next move
Like what you see? Tell us about it.
A process that takes too long, a website that undersells you, or an idea ready to take shape. Tell us where you are and we will suggest a useful next step.
India · Working with clients worldwide