Line Height and Letter Spacing in CSS

In CSS, line-height and letter-spacing are important properties for controlling the spacing in text. These properties help improve text readability and appearance, making your content more visually appealing and easier to read.

Line Height

The line-height property determines the amount of space between lines of text. It is especially important for paragraph text, as it helps create more readable blocks of text. By default, the line height is typically set to around 1.2 to 1.5 times the font size.

Example 1: Setting line height

    <style>
      .example1 {
        line-height: 1.8;
      }
    </style>
    <div class="example1">
      This paragraph has a line height of 1.8, which increases the space between lines.
    </div>
        

In this example, the text will have 1.8 times the height of the font size, which increases the space between the lines. This makes the text easier to read, especially in large paragraphs.

Example 2: Fixed line height

    <style>
      .example2 {
        line-height: 30px;
      }
    </style>
    <div class="example2">
      This text has a fixed line height of 30px.
    </div>
        

In this example, the line height is fixed to 30px, meaning there will always be 30 pixels of space between the lines of text, regardless of the font size.

Letter Spacing

The letter-spacing property controls the space between individual letters in a word. By default, the letters are spaced normally, but you can increase or decrease the spacing to achieve different visual effects.

Example 3: Increasing letter spacing

    <style>
      .example3 {
        letter-spacing: 2px;
      }
    </style>
    <div class="example3">
      This text has a letter spacing of 2px, which increases the space between the letters.
    </div>
        

Here, the letter spacing is set to 2px, which increases the space between each character. This is useful for creating a more open and airy text layout.

Example 4: Decreasing letter spacing

    <style>
      .example4 {
        letter-spacing: -1px;
      }
    </style>
    <div class="example4">
      This text has a letter spacing of -1px, which brings the letters closer together.
    </div>
        

In this example, the letter spacing is set to -1px, causing the letters to overlap slightly. This can be useful for certain design effects or fitting text into smaller areas.

Combining Line Height and Letter Spacing

You can combine both line-height and letter-spacing properties to create a more polished and customized text style.

Example 5: Combining both properties

    <style>
      .example5 {
        line-height: 1.6;
        letter-spacing: 1px;
      }
    </style>
    <div class="example5">
      This text has both increased line height and letter spacing for better readability.
    </div>
        

In this example, the line height is set to 1.6 to increase the space between lines, and the letter spacing is set to 1px to add more space between the letters. This combination improves both the readability and visual appeal of the text.

Conclusion

The line-height and letter-spacing properties are powerful tools for adjusting the spacing in text. By modifying these properties, you can enhance the readability of your content and create more attractive text layouts. Use line-height to control the spacing between lines and letter-spacing to adjust the spacing between characters. Combining these properties allows for a more customized and polished design for your text.