How to Use CSS3’s Letter-Spacing Property

CSS3’s letter-spacing property is a great way to increase or decrease the space between the letters of your text using CSS. Let’s jump right in with an example. To increase the letter spacing in the h2 tag below, use the following code:

Screen Shot 2016-08-28 at 2.48.04 PM

Join us in our newest publication:
  1. h2{
  2. letter-spacing: 5px;
  3. }

Your results should look something like this:

Screen Shot 2016-08-28 at 2.49.27 PM

You can also use letter-spacing property to decrease the space between the characters, like this:

  1. h2{
  2. letter-spacing: -5px;
  3. }

Screen Shot 2016-08-28 at 2.52.41 PM

The letter-spacing property is actually a really useful way to add some style to your CSS projects. Adding space between letters is a pretty common minimalist design trend. On the other hand, it can also be used to kern your text without having to use Photoshop or any other photo editing software — this is an effect often used for headers and logos. Or you can get really creative and layer text with two different letter-spacing values over each other for a nice abstract design.

Share and Enjoy !

0 0