Home / CSS3 / Use CSS line-height to increase readability

Use CSS line-height to increase readability

Sunday August 1, 2021
3 minutes read
168 Views
css line height

In this tutorial, You will learn how to use the CSS parameter Line Height to generate attractive and aesthetically-pleasing

text.

Line height The CSS property specifies the distance between two inline elements.

Line-Height

The line-height attribute is used to create line spacing for your content. Since text size affects readability, it is best to use a dynamic value that matches the size of the text. Therefore, this is not recommended as px indicates a constant value.

Line-height units come in a variety of shapes and sizes:

  • px.
  • em.
  • %.
  • unitless number.

Line-height can be used in a variety of ways, as follows:

    line-height: normal; /* default */
    line-height: 1.2;
    line-height: 1em;
    line-height: 1rem;
    line-height: 200%;
    line-height: 20px;
}

Default and unitless value

The default setting is ‘normal,’ so make sure you alter it before saving. However, this can vary depending on the browser manufacturer. This usually means it is set to 1.2. A number without a unit means what exactly? Actually, it’s a multiplier. The font-size value is calculated by dividing the font-size value by 1.2. Look at an example of a single line’s height being calculated.

body {
    font-size: 16px;
    line-height: 1.5;
}

We have to do the following mathematics:

16 * 1.5 = 24px. As a result, we may rest assured that our writing is at least 24 pixels tall. As a result, it will raise the text by 4 pixels and lower it by 4 pixels. That’s so simple to cool off with!

em and rem

Next is em and rem

rem relates to the font-size of the root element and 

em relates the current font-size of the element. Here is an example.

html {
    font-size: 15px;
}

.rem-example {
    font-size: 16px;
    line-height: 1.5rem; /* line-height will be 15 * 1.5 = 22.5px */
}

.em-example {
    font-size: 18px;
    line-height: 1.5em; /* line-height will be 18 * 1.5 = 27px */
}

percentage

The % value is a little bit complicated to read. 100% means multiply by 1. Now We will clear it with an example.

body {
    font-size: 14px;
}
.percentage-exapmle {
    font-size: 16px;
    line-height: 150%; /* line-height will be here 16 * 1.5 = 24px */
}

pixel (px)

It’s the simplest and also the most confusing px value. If you set it to any pixel value, it will be set to that exact value. Note that the font is larger if the font-size is 16 pixels, for example, and you set the line-height to 12 pixels. Your line is bigger than the container it’s packed in, don’t forget that.

In general, you should avoid using px values in line-height!

body {
    font-size: 16px;
}

.pixel-example {
    line-height: 12px;
}

Conclusion

In general, the decent line-height falls anywhere between 1.5 and 1.7. For example, TheBetaCoders uses a font height of 1.6. This is more art than science, and you often use developer tools in your browser to adjust the font height so that it looks “right”. ✨👌

Further Reading 📚

Check out the following learn more:

            The Beta Coders


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *