Setting Spaces between Letters with CSS letter-spacing Property

Just like the CSS word-spacing property which can be used to set spacing between words, the letter-spacing property can be used to set spacing between individual characters or letters in words.

letter-spacing can be used as :

  • normal : The default value.

    letter-spacing: normal;
  • <length> : The additional width of white space in CSS length units (px, cm, em, rem, etc).

    letter-spacing: 2px;
    letter-spacing: 1.5em;

    Please note that the specified width is in addition to the default spacing defined by the browser. Negative values can also be defined.

  • inherit : Inherit letter spacing from the parent

    letter-spacing: inherit;

Example

Letters will be spaced 4px in this sentence.
<div class="space-letters">Letters will be spaced 4px in this sentence.</div>
.space-letters {
    word-spacing: 4px;
}

CSS Animation on letter-spacing

letter-spacing is animatable. Attaractive hero headers can be designed through animation on this property.

See a demo below :

Letter Spacing Animation
<div id="header-text">Letter Spacing Animation</div>
#header-text {
    opacity: 0;
    animation-name: letter-spacing-animate;
    animation-duration: 3s;
    animation-timing-function: ease;
    animation-delay: 1s;
    animation-direction: forwards;
    animation-iteration-count: infinite;
}

@keyframes letter-spacing-animate {
    0% {
        letter-spacing: -20px;
        opacity: 0;
    }

    30% {
        letter-spacing: 3px;
        opacity: 1;
    }

    100% {
        letter-spacing: 3px;
        opacity: 1;
    }
}

This animation example comes from this pen.

Managing Spacing Between Words with CSS word-spacing Property