CSS Typography Line Height
What is this? An exploration of different methods to assign a line-height value in CSS using relative units.
Why should I care? Because CSS has more than one option, and also a new line-height unit - lh - is beginning to be available.
Notes:
- a unitless
line-heightis the most inheritable - methods that use units like
emorexare calculated for the element they are assigned to, and do not update for child elements with different font sizes since they inherit the pre-computed value based on1remunless otherwise modified - all methods work for "fluid" typography when appropriately assigned using direct selectors
TL;DR:
- use unitless (ex.
line-height: 1.3) for the most consistant results regardless of font family and to maintain inheritance - consider an
exmethod if you would like tighter, more font-family relative line heights for larger typed headlines - consider
em+remfor a rule that works more consistantly across font families and font sizes
Selected font families and characteristics:
system-uifont stack - variable across OS systems, used to load a native sans-serif without the overhead of a "custom" font- Poppins - a popular sans serif with wide characters and a tall x-height
- Playfair Display - serif with medium x-height and medium width characters
- Josefin Sans - sans-serif with a short x-height and more condensed (narrow) characters
Review font selections on Google Fonts
✨ Interested in the fluid typography technique in use? Learn more about container query units and fluid typography.
Unitless
Inheritable by default, and consistant results across font families.
line-height: 1.2;
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
Using ex only
The ex unit is the height of the x character, so will be unique to a font family. This leads to a tighter computed line-height for a shorter x-height, which may result in the need for more customized rules to prevent line overlap.
line-height: 2ex;
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
Using em only
The em unit is the font-size of the element, so if 1em equals 24px, then the line-height would also equal 24px. This will have very similair results across font families.
line-height: 1em;
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
Using ex and em
Effectively in this rule, we are adding a bit of extra space based on the x-height to the computed value of the font size. Use of x-height will cause some variance across font-families.
line-height: calc(1em + 0.5ex);
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
Using ex and px
This method adds a bit of subjective buffer around the x-height measurement. May resolve the issue of line-overlap over using ex alone if the font family has a low x-height. Remains fairly tight across larger and smaller font sizes.
Credit: Jesús Ricarte
line-height: calc(2px + 2ex + 2px);
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
Using em and rem
Results in a tighter line-height for larger font sizes, and looser one for smaller font sizes. Fairly similair results across font families.
Credit: Josh Comeau
line-height: calc(1em + 0.5rem);
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
The five boxing wizards jump quickly.
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.