MonkeyDoIt! Simple Instructions
Home > Computers > Web Design



Use CSS Letter Spacing



How to use CSS Letter Spacing for text on a web page.



In print this effect is called tracking which means the spacing between letters. Positive values increase spacing among letters and negative values decrease the space. The values can be expressed in px or em, like p {letter-spacing: 1em;} or h2 {letter-spacing: 1px;} - - px are absolute values that are fixed. em creates relative proportional size based on a user's font size adjustments.

This table below is a good reference for how text will render using different values.

em spacing How text appears CSS Used
-.5 em

Example

 p {letter-spacing: -.5em;}
-.3 em

Example

 p {letter-spacing: -.3em;}
-.2 em

Example

 p {letter-spacing: -.2em;}
-.1 em

Example

 p {letter-spacing: -.1em;}
Normal

Example

 None
.1 em

Example

 p {letter-spacing: .1em;}
.2 em

Example

 p {letter-spacing: .2em;}
.3 em

Example

 p {letter-spacing: .3em;}
.5 em

Example

 p {letter-spacing: .5em;}
1 em

Example

 p {letter-spacing: 1em;}
2 em

Example

 p {letter-spacing: 2em;}
3 em

Example

 p {letter-spacing: 3em;}