Home / HTML And CSS / Using CSS letter-spacing to space out titles

Using CSS letter-spacing to space out titles

I was casting about for ideas for this HTML/CSS post and came across the letter-spacing property for setting spacing between letters in CSS, a property I wasn’t previously aware of, and thought it would make a good topic. Adding spacing between letters can be an excellent way of making titles (e.g. <h1> <h2> <h3> etc tags) stand out more.

To add e.g. 2 pixels of space between each letter in an <h2> tag you would do this (and in this example I’ll also color it red):

h2 {
    letter-spacing: 2px;
    color: red;
}

Here’s an <h2> tag with no letter spacing:

This <h2> tag has no letter spacing

And here it is with the above letter-spacing:

This <h2> tag has 2px letter spacing

And here’s some examples setting the letter spacing from 5px down to -5px. These are just regular <p> tags but the font-size has been set to 120% of normal:

This has letter spacing of 5px

This has letter spacing of 4px

This has letter spacing of 3px

This has letter spacing of 2px

This has letter spacing of 1px

This has normal letter spacing

This has letter spacing of -1px

This has letter spacing of -2px

This has letter spacing of -3px

This has letter spacing of -4px

This has letter spacing of -5px

em units can be used as well as px units e.g. letter-spacing: 0.1em