- Line Height
- Class reference
- Relative line-heights
- Fixed line-heights v1.2.0+
- Responsive
- Line-height CSS How CSS line-height works and best practices
- Usage
- Default value and unitless value
- em and rem
- percentage
- pixel (px)
- Some best practices
- Resources
- line-height
- Try it
- Syntax
- Values
- Accessibility concerns
- Formal definition
- Formal syntax
- Examples
- Basic example
- Prefer unitless numbers for line-height values
- HTML
- CSS
- Result
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
Line Height
Utilities for controlling the leading (line height) of an element.
Class reference
Relative line-heights
Use the leading-none , leading-tight , leading-snug , leading-normal , leading-relaxed , and leading-loose utilities to give an element a relative line-height based on its current font-size.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
p class="leading-none . ">Lorem ipsum dolor sit amet . p> p class="leading-tight . ">Lorem ipsum dolor sit amet . p> p class="leading-snug . ">Lorem ipsum dolor sit amet . p> p class="leading-normal . ">Lorem ipsum dolor sit amet . p> p class="leading-relaxed . ">Lorem ipsum dolor sit amet . p> p class="leading-loose . ">Lorem ipsum dolor sit amet . p>Fixed line-heights v1.2.0+
Use the leading- utilities to give an element a fixed line-height, irrespective of the current font-size. These are useful when you need very precise control over an element’s final size.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, quia temporibus eveniet a libero incidunt suscipit laborum, rerum accusantium modi quidem, ipsam illum quis sed voluptatum quae eum fugit earum.
p class="leading-3 . ">Lorem ipsum dolor sit amet . p> p class="leading-4 . ">Lorem ipsum dolor sit amet . p> p class="leading-5 . ">Lorem ipsum dolor sit amet . p> p class="leading-6 . ">Lorem ipsum dolor sit amet . p> p class="leading-7 . ">Lorem ipsum dolor sit amet . p> p class="leading-8 . ">Lorem ipsum dolor sit amet . p> p class="leading-9 . ">Lorem ipsum dolor sit amet . p> p class="leading-10 . ">Lorem ipsum dolor sit amet . p>Responsive
To control the line height of an element at a specific breakpoint, add a : prefix to any existing line height utility. For example, use md:leading-loose to apply the leading-loose utility at only medium screen sizes and above.
For more information about Tailwind’s responsive design features, check out the Responsive Design documentation.
Line-height CSS How CSS line-height works and best practices
The line-height CSS property defines the space between two inline elements. The typical use is, to space-out text. You can see people comparing it to ‘leading’ which is a term used in typography that refers to the space between the baseline of two lines of text. line-height works differently. It adds space above and under the text.
Left: Leading, Right: line-height
Usage
body line-height: normal; /* default */ line-height: 2; line-height: 1em; line-height: 1rem; line-height: 200%; line-height: 20px; > Default value and unitless value
‘normal’ is the default value if you don’t set it to something different. Usually, this means that it is set to 1.2 , this depends on the browser vendor. So what does just a number value without any unit mean? It is actually a multiplier. It takes the font-size value and multiplies it by 1.2 . Let’s calculate the height of one line with the following example.
body font-size: 16px; line-height: 1.5; > We just have to do the following calculation: 16 * 1.5 = 24px. So we now know that our text will have a minimum height of 24px. So it will add 4 pixels under the text and above it. Cool that easy 😎!
em and rem
Next one is em and rem . rem is relative to the font-size of the root element and em is relative to the current elements font-size. Here is an example
html font-size: 12px; > .remExample font-size: 16px; line-height: 1.5rem; /* line-height will be 12 * 1.5 = 18px */ > .emExample font-size: 16px; line-height: 1.5em; /* line-height will be 16 * 1.5 = 24px */ > percentage
The % value is a little bit tricky to read. 100% means multiply by 1. Again an example to make it clear.
body font-size: 12px; > .percentage font-size: 16px; line-height: 150%; /* line-height will be 16 * 1.5 = 24px */ > pixel (px)
The easiest also most confusing one for me is the px value. Setting it to any pixel value will set it to exactly this value. So if your font-size for example is 16px and you set line-height to 12px your font will be bigger then the container it is wrapped in. In general, you should try to avoid using px values in line-height!
body font-size: 16px; > .pixel line-height: 12px; > Some best practices
In general, I would start with setting the font-size and line-height in the body element to the following values.
body font-size: 16px; line-height: 1.5; > From this, you can build all your other stylings. I would try to avoid using anything else then unitless numbers. Also, try to use a value for the font-size that easily divided, like 16 or 12. This will help you to keep balance in your design. You can use this in margin s and padding s too. It’s easier to calculate 16 * 1.5 in your head then for example 13 * 1.5. You then will always know what the actual value is.
body font-size: 16px; line-height: 1.5; > h1, h2, h3, h4, ul, ol margin-bottom: 15rem; > button display: inline-block; padding: 0.75rem 1.5rem; > Of course, you can experiment with this and there will be exceptions to these rules but this is how I always start.
Resources
Thanks for reading!
line-height
The line-height CSS property sets the height of a line box. It’s commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non-replaced inline elements, it specifies the height that is used to calculate line box height.
Try it
Syntax
/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* values */ line-height: 3em; /* values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: revert; line-height: revert-layer; line-height: unset;
The line-height property is specified as any one of the following:
Values
Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element’s font-family .
Accessibility concerns
Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.
Formal definition
| Initial value | normal |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line . |
| Inherited | yes |
| Percentages | refer to the font size of the element itself |
| Computed value | for percentage and length values, the absolute length, otherwise as specified |
| Animation type | either number or length |
Formal syntax
Examples
Basic example
/* All rules below have the same resultant line height */ /* number/unitless */ div line-height: 1.2; font-size: 10pt; > /* length */ div line-height: 1.2em; font-size: 10pt; > /* percentage */ div line-height: 120%; font-size: 10pt; > /* font shorthand */ div font: 10pt/1.2 Georgia, "Bitstream Charter", serif; >
It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.
Prefer unitless numbers for line-height values
HTML
div class="box green"> h1>Avoid unexpected results by using unitless line-height.h1> Length and percentage line-heights have poor inheritance behavior. div> div class="box red"> h1>Avoid unexpected results by using unitless line-height.h1> Length and percentage line-heights have poor inheritance behavior div> line-height is calculated from its own font-size (30px × 1.1) = 33px --> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
CSS
.green line-height: 1.1; border: solid limegreen; > .red line-height: 1.1em; border: solid red; > h1 font-size: 30px; > .box width: 18em; display: inline-block; vertical-align: top; font-size: 15px; > Result
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Jul 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.