CSS- Space- Change The Spacing Between Letters

Home

CSS

Space

Change The Spacing Between Letters
Search MS Office A-Z | Search Web Pages/ Design A-Z

Change The Spacing Between Letters

The letter-spacing property in CSS uses the standard CSS absolute units of measurement, such as inches (in) and points (pt) and relative values such as em (em) and percent (%). For more information about measurements in CSS, see the March 2007 issue of Smart Computing. Generally, the relative values are best because they are the most adaptable to a wide variety of Web page hardware and software.

Let’s say we want to create a headline on the top of our Web page, and the usual HTML tags <H1> and <H6> look too darn plain. This is where CSS comes in. We’ll create a rule with letter-spacing that defines a class we can use to apply to headlines when we want. We’ll name the class “spread” and set the spacing to 0.5em. So the style at the top of the Web page between the <HEAD> tags would look like this:

Now whenever we want to use the letter-spacing property with an element in the page, we just need to call the class, like this:

<H2 class=”spread”>This headline has eye-catching spacing.</H2>

You’ll notice when you try this out that the distance between words is adjusted, too, so that they are still readable as words.

You can use negative values with letter-spacing, too. You can use this simply to create an interesting design or to tighten the spacing between letters for better readability. For example, if you use large type for a headline, the letters will look better tightened up than in their default spacing. This is an old typographer’s trick. To do this, we could create a class called tight and set the spacing to -0.08em:

.tight {letter-spacing: -0.08em;}

<H1 class=“tight”>Large headlines look better tightened</H1>