What is the best CSS line height for content and titles?
What is the best CSS line height for content and titles?
6 minutes to read | 11.08.2020
TL;DR Line height is the height of a specific line of text. A line height of 1em will match your font-size, and a line height of 1.5em will be 1 and a half times the size of your font. Line height is proportional. A line height of 1.5em will add 0.25 times the font size of space both above and below the text. You may find that blocks of text require a larger line height than headings and titles. This is because the line height will usually be multiplied by a larger font-size, so the space above and below the title will be a lot larger than regular text. In order to keep consistency, you can lower the line height on titles and headings.
Sign up for free to share your own content!
*
*
*
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. Line height is the height of the box that the text sits in. It’s usually used as a boundary to keep a distance between lines of text, since other text cannot enter this space. - 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? The best method for finding a line height is to multiply your font size by what you would like your spacing to be. - 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:
stylesheet.css
body { line-height: 1.35em; } ...or... .line-height { line-height: 1.35em; }
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. In the DevTools Console, you can edit the CSS and see it update in front of you without actually changing your website’s design. As soon as you refresh the page, all the changes made will be lost. - 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. How can you find the best CSS line height? Since each font is different we want to start with a low line height and increase from there. - 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:
stylesheet.css
h1 { font-size: 2em; line-height: 1.25em; } ...or... .line-height-title { line-height: 1.25em; }
Summarize 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. Chunks of text will usually need a larger line height, where larger fonts should use a lower line height. - 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.
Share this with your friends
Recent Posts
What is the best word count for a blog post to rank high in Google?
What is the best word count for a blog post to rank high in Google?
Internet Marketing | 2 minutes to read | 01.08.2021
Part of SEO and ranking high in the search engine results is word count. Should your blog posts be short? Medium? Long? What's the optimal word count for blog posts?
Creating basic hover animations for links, buttons, and gradients in CSS
Creating basic hover animations for links, buttons, and gradients in CSS
Web Design | 8 minutes to read | 12.22.2020
Animations can bring your website to life, as well as give your design a touch of flair, but we don't want them to be crazy. Here's how to make basic hover animations with CSS.
View all posts