Line Height & Letter Spacing in CSS

« Prev Next »

Line Height and Letter Spacing are both CSS properties that are often used in typography to enhance the readability of text and add visual appeal to it. While both properties deal with spacing, they have some distinct differences that should be known when using them.

line-height-and-letter-spacing-in-css

CSS Line Height

In CSS, the property value for line-height can be defined in terms of a number or a length unit (px, em, rem) or percentage (%).

 

Syntax

selector {
  line-height: value;
}

value – Defines the line height. This can be a unitless number, px, em, rem, or a percentage.

 

Common Values for line-height

Value Description
unitless A multiplier of the font size (e.g., 1.5, 2). This is the most common way to set line height.
px Fixed value (e.g., 20px), not relative to the font size.
em Relative to the element's font size (e.g., 1.5em).
% Percentage of the font size (e.g., 150%), similar to unitless values.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 18px;
      line-height: 1.8;
    }

    h1 {
      font-size: 36px;
      line-height: 1.2;
    }
  </style>
</head>
<body>

<h1>Welcome to My Blog</h1>
<p>This is a paragraph where line-height is set to 1.8 times the font size, making the text more readable and spacious.</p>

</body>
</html>
Run ›

CSS Letter Spacing

The value for letter-spacing in CSS can be a positive or negative length value (px, em, rem).

 

notepad

A positive value for letter-spacing increases the space between the characters in a text.

Syntax

selector {
  letter-spacing: value;
}
  • value – Defines the spacing between the letters. This can be px, em, or rem. A positive value increases the spacing, and a negative value decreases it.

Common Values for letter-spacing

Value Description
px Fixed value in pixels (e.g., 2px, 5px).
em Relative value to the font size (e.g., 0.1em).
rem Relative value to the root element's font size (e.g., 0.1rem).

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      font-size: 16px;
      letter-spacing: 1px;
    }

    h1 {
      font-size: 36px;
      letter-spacing: 3px;
    }
  </style>
</head>
<body>

<h1>Stylish Heading with Extra Space</h1>
<p>Here, we have a paragraph with letter-spacing set to 1px to make it more readable and aesthetically pleasing.</p>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.