The line-height property sets the height of a line box. In everyday horizontal text, that mainly controls how far lines sit apart (leading).
The initial value is normal (often about 1.2, font-dependent). Prefer a unitless number such as 1.5 so children scale with their own font-size. It is inherited. You can also set it inside the font shorthand.
Not deprecated. For main paragraphs, aim for about 1.5 or higher for accessibility. Prefer unitless values over em / % when the value will be inherited.
line-height: normal | <number> | <length> | <percentage> | initial | inherit;Study starters: normal, 1.5, 1.5em, 150%.
| Value | Description | Try it |
|---|---|---|
normal | Browser / font default (often ~1.2). Initial value | Try it |
<number> | Unitless multiplier of the element’s font size. Preferred | Try it |
<length> | Fixed height such as 24px or 1.5em | Try it |
<percentage> | Percent of the element’s own font size (e.g. 150%) | Try it |
initial | Resets to normal | Try it |
inherit | Inherits from the parent element | Try it |
line-heightSet readable leading once, preferably with a unitless number.
body or p).line-height to a unitless value such as 1.5.font-size changes or zooms.| Piece | Required? | Role |
|---|---|---|
| Text that wraps | Yes (to see it) | Multiple lines make spacing obvious |
| Unitless number | Recommended | Scales with each element’s font size |
| Length / % | Optional | Can surprise you when inherited by larger children |
| ~1.5 for body | Accessibility tip | Helps paragraph reading comfort |
Only line-height changes on the sample paragraph.
Each snippet focuses on line-height only. Use Try It Yourself for a live editor.
Use the browser and font default with normal.
<style>
p {
line-height: normal;
}
</style>
<p>Far out in the uncharted backwaters of the Galaxy lies a small yellow sun.</p>line-height: normal is the initial value.1.2, but it varies.1.5 usually reads more comfortably.Multiply the element’s font size for predictable leading.
<style>
p {
line-height: 1.5;
}
</style>
<p>Far out in the uncharted backwaters of the Galaxy lies a small yellow sun.</p>1.5 means 1.5 × this element’s font size.1.5 is a common accessible starting point.A length computes once, then children may inherit a height that is too small.
<style>
div {
font-size: 16px;
line-height: 1.5em;
}
h1 {
font-size: 32px;
}
</style>
<div>
<h1>Big heading</h1>
<p>The heading may inherit a line-height computed from 16px, not 32px.</p>
</div>1.5em of 16px becomes a fixed computed length (24px).h1 can get cramped leading.line-height: 1.5 (unitless) on the parent instead.Most line-height bugs come from units and inheritance.
em and % resolve to a length, then children inherit that length. Unitless values keep multiplying each element’s own font size.
Very tight leading makes long paragraphs hard to follow. About 1.5 or more is a solid accessibility baseline for main copy.
normal is not one fixed numberBrowsers often use ~1.2, but the exact result can depend on the font-family.
font: 16px/1.5 sans-serif sets size, line-height, and family together via the font shorthand.
Gaps between characters belong to letter-spacing. Line-height is about line boxes.
line-height is a browser CSS property for typography. Node.js, Deno, and Bun do not apply it.
normal, unitless numbers, lengths, and percentages are widely supported in all modern browsers.
Bottom line: Safe everywhere. Prefer unitless numbers for inherited body text. It is not a runtime API.
normal. Inherited.1.5.1.5 or above.One line: line-height: 1.5 is the simple, scalable way to give body text comfortable leading.
Learn the shorthand for list markers, position, and image.
8 people found this page helpful