CSS’s letter-spacing property is one that can be used to, you probably guessed it, add (or remove!) spacing between letters. The property is perfect for either making your letters look super close together, or super spread out. If you have any graphic design knowledge, it’s a little bit like kerning your letters — only there’s no PhotoShop or photo editing software necessary.
Using the letter-spacing property is actually really easy and straightforward. The property takes numerical values in units of measurement like px, em, and %, and you can use positive or negative values, depending on if you want to add space between the letters or take space away. Take a look at the examples below to see how you might use it in real life.
To add spaces between letters, you’d want to use a positive value with your letter-spacing property, like this:
p{
letter-spacing: 5px;
}
Putting 5px of spacing between your letters or characters would make your text look like the text in the image below.
As you can see, even though 5px might not sound like much, it actually adds a decent, noticeable amount of space between your letters. Be sure to test your letter-spacing code before making it live to be sure that you’re not adding too much space.
To remove space between your letters, you’d want to use a negative value with your letter spacing property. The code for achieving that effect would need to look something like this:
p{
letter-spacing: -3px;
}
Removing 3px of space between your letters or characters would make your HTML look something like the text in the image below.
The text in this image is SUPER close together. It’s important to know that if you remove too much space between your letters, they’ll essentially just sit on top of each other and be rendered illegible, which might be a cool look if that’s what you’re going for, but if you want to make sure that your users can read what your text says, don’t go crazy with removing letter space.
This property is supported on all major browsers and, while it’s not super popular, is a great way to add some style or professional polish to any project or webpage design without having to use trusty PhotoShop. Have fun with it!