Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

space
text
css
html
margin

Learning about "letter-spacing" in CSS

Educative Answers Team

Letter-spacing is the space before and after each letter. Whenever we type text, each letter in the text has a particular distance from the one before and after it.

Using the letter-spacing property in CSS we can define how much space to give between letters.

How to use this property

The following snippet shows the syntax used to envoke the letter-spacing property.

<html>
 <head>
     <style>
     class{
         letter-spacing: normal | size in pixels | size in em | size in cm
          }
     </style>
 </head>
 <body>
   
 </body>
</html>

What values can be given to this property?

The letter-spacing property can take in multiple types of values. Let’s look at a few possible ones:

  • If you simply type normal then it gives the default spacing between letters

  • You can also write a number followed by px to signify the distance in pixels between letters

  • You can also write a number followed by cm to signify the distance in centimeters between letters

  • Lastly, the spacing can also be specified in em where 1 em is equivalent to 16 pixels

Now let’s look at some examples of how to use letter-spacing.

Examples

1. Using normal

This sets the letter-spacing to its default value.

  • HTML

2. Using pixels

The example below shows how to set the spacing between the letters to a difference of 10 pixels. You can change the number in the code snippet below, to see how spacing varies.

  • HTML

While the example below also assigns a pixel value to letter-spacing. This time the value is a negative number. This will decrease the default spacing by that number of pixels.

  • HTML

3. Using em

In the example below, we have set the letter-spacing to 0.25em. As em in itself is equivalent to 16 pixels, this will result in a spacing of 4 pixels.

  • HTML

4. Using cm

The spacing in the example below is set to 1cm between each letter.

  • HTML

RELATED TAGS

space
text
css
html
margin
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring