A big part of good web design is mastering the basic styles.
A group of perfectly put together basic styles will add up to be a great designed website.
One basic style that can make or break your design is line height.
Today, we are going to learn what the best line height for your website’s content and titles is.
Why is line height important?
Line height is important to your website’s titles and content because it makes everything more (or less) legible to the reader.
Too low of a line height can make text appear squished and illegible.
Too high of a line height can make text appear too spread out and hard to keep track of with your eyes.
To make your content appear perfectly legible to your reader you need to have the perfect line height for your website design.
What is the best line height?
The best line height for your website’s content depends on a couple of things:
Is this content or a title?
Since your titles probably have a larger font size than your content you may want to have separate line heights for each.
A title would look a little better with an adjusted line height rather than keeping the one you use for content.
Depending on the font size of your titles you may need to adjust the line heights for each of them. For example, you may have an h1 tag with a very large font size and an h2 tag with a slightly larger font size.
What is your font family?
The font family you use can have an effect on line height.
All fonts are created differently. Some types of font need higher line heights to be legible, whereas other types may need lower line heights.
To find the best line height for your font family you may have to tinker with it.
How do you find the best line height?
This keeps your line height dynamic and fluid.
Most browsers default to a line height of 1.2.
That means that your line height is 1.2 times your font size. For example, a font size of 16px will have a 20px line height.
This, of course, is the browser’s default line height, but we don’t want to use the browser’s defaults
, do we?
Nope, so here is the best way to find line height.
Finding a line height for content
Since each font is different we want to start with a low line height. You can create a separate class for your line height, or you can add it to the body HTML tag. Like this:
I, personally, start with 1.35em when trying to find my line height. After tinkering with it for a while, I haven’t found any fonts that I use that look good with less than 1.35em.
When you look at your website in the browser, we should see the line height at 1.35em.
Now, it’s time to tinker.
Open up the DevTools Console in your browser. You can usually do this by right clicking anywhere on the page and finding something like “Inspect” depending on the browser. You can also push F12.
Find your element in the dev console and look for its CSS class on the right side. As you change the line height up or down watch the text on your page. Tinker by changing it by 0.05em each time until you see a line height that you like.
Most websites use a line height ranging from 1.35em to 1.65em depending on the site and font.
The most common line height that I have used is 1.5em.
I like this because it allows for half of the text size in spacing both on top and bottom. In this case, each space between the text is the same size as the text itself, which makes it great for paragraphs and other blocks of text.
But, what about large titles?
Finding line height for a title
Using line height with title is a little different than using line height with blocks of text.
Titles are usually larger than the standard text.
If you keep the line height the same, the space between the title’s text will be much larger.
You can keep this if you want because it still looks good in most cases.
To keep the spacing consistency in your website, you may have to lower the line height for your titles.
For example, let's say we have a font size of 20px, a line height of 1.5em, and a title size of 2em.
Our title's text will be 40px and our entire line height will be 60px: 10px on the top, 40px for the title's text, and 10px on the bottom, for a total of 20px of white space between each line of text.
To keep consistency, we can set our line height to 1.25em. Using our example above, this would give us a total of 10px of whitespace between each line of text, which is the same as the line height of the font size.
Something like this:
As you play around with the line height on your website, you can tell there is an aesthetic difference between line height on the text and line height on larger fonts, like titles.
Of course, this all depends on which font family you are using.
Ultimately, the decision is yours to make based on how the text’s line height looks with your website's design.