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

<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 :

<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.