Home | About Chris Hope | Contact Chris Hope | Search:

Using CSS letter-spacing to space out titles

Posted April 18th, 2009 in HTML and CSS

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:

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

Comments

blog comments powered by Disqus