CSS letter-spacing

The CSS letter-spacing property is used to define the length of white spaces between letters or characters. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      p{letter-spacing: 8px;}
   </style>
</head>
<body>
   
   <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</p>
   
</body>
</html>
Output

Lorem ipsum dolor sit amet consectetur, adipisicing elit.

In the preceding example, the "letter-spacing" property is set to 8px for all paragraphs (p elements) on the page. This means that 8 pixels will be added between each letter in the paragraph's text.

CSS's "letter-spacing" property lets you adjust the amount of space between letters in text. It can be used to change the look of text, improve readability, or achieve a specific design effect. "letter-spacing" values can be specified in pixels, ems, or other CSS units.

The paragraph text in this example will be spaced out by 8 pixels, making the letters appear further apart. When using certain typefaces or font sizes, this can be useful for creating a vintage or retro look, as well as making text more legible. However, excessive letter-spacing can have a negative impact on readability, so it is important to use this property sparingly.

CSS letter-spacing Syntax

The syntax of the letter-spacing property in CSS is:

letter-spacing: x;

The value of x should be any of the following:

Advantages of the letter-spacing property in CSS

Disadvantages of the letter-spacing property in CSS

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!