Letter-spacing Property in CSS3

How to increase or decrease the space between characters in a text in CSS3?

By using letter-spacing property we can increase or decrease the space between the characters in a text.

<style>
        .S {
            letter-spacing: normal;
        }

        .N {
            letter-spacing: 2px;
        }

        .I {
            letter-spacing: -2px;
        }

        .T {
            letter-spacing: 0px;
        }
</style>

<body>
    <h5>Paragraph with normal letter spacing.</h5>
    <p class="S">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <hr />
    <h5>Paragraph with '2px' letter spacing.</h5>
    <p class="N">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <hr />
    <h5>Paragraph with '-2px' letter spacing.</h5>
    <p class="I">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <hr />
    <h5>Paragraph with '0px' letter spacing.</h5>
    <p class="T">
        Mr. Sheo Narayan is a software professional since 2000.
    </p>
    <br />
    <strong>'0px' and 'normal' gives the same result.</strong>
</body>

In the above code snippet we have given letter-spacing property to the .class (.S, .N, .I, .T)selectors. The letter-spacing property with value "normal" & "0" gives the normal space between the characters in a text. The letter-spacing property with value "2px" increases 2 pixel space between the characters in a text. The letter-spacing property with value "-2px" decreses the 2 pixel space between the charcters in a text.

OUTPUT

Views: 3218 | Post Order: 79

CSS3 > Texts

Letter-spacing Property in CSS3

How to increase or decrease the space between characters in a text in CSS3?

Related Posts

Utility Tools