Kerning or Horizontal Spacing

Kerning is the amount of space placed between characters in typography.

Beginner’s Guide to Kerning

To adjust the amount of space between characters in css, use the letter-spacing: property.

As with line-height: , this property can be passed absolute values, the word normal to use the default, and relative values. When using relative values, be aware that ems will be in relation to the font itself, and percentages will be in relation to the parent element.

It is sometimes useful to space characters out. However, most of the time, this quality can be used to achieve visual text effects for branding, delineating sections, or to make a particular piece of content stand out.

Example

In the following example there are four h2 headings with various spacing. Notice how they change the visual effect of the text. (Also note: Negative values are valid, and can be used to create a “tighter” presentation of text.)

CSS

.example-container h2 {
    font-family: "Helvetica", sans-serif;
    line-height: 1.5em;
    font-weight: 100;
    margin-bottom: 2em;
    text-align: center;
}

h2.no-space {
    letter-spacing: normal;
}

h2.some-space {
    letter-spacing: 0.3em;
}

h2.lots-space {
    letter-spacing: 1.5em;
}

h2.negative-space {
    letter-spacing: -0.1em;
}

HTML

<div class="example-container">
    <h2 class="no-space">No Space Applied</h2>
    <h2 class="some-space">Some Space Applied</h2>
    <h2 class="lots-space">A Lot of Space Applied</h2>
    <h2 class="negative-space">Negative Space Applied</h2>
</div>