Search code examples
csstypographyletter-spacing

content after letter-spacing css

My purpose is to have two letters in a pseudo-element's content, with a spacing of 1 pixel between each letter.

I have tried the obvious, which is assigning a letter-spacing of 1 pixel:

#tweetList > li > .blockstyle > blockquote p.tweettext:before{
    content: '\2018\2019';
    font-family: 'ocr';
    font-style: normal;
    font-weight: 400;
    position: absolute;
    font-size: 120px;
    top: 0px;
    left: -120px;
    color: rgba(26,114,189, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
}

The problem is that the two apostrophes are not getting the desired spacing. Here's a snapshot of the result:

result apostrophe spacing

And here's what I'm trying to achieve:

desired apostrophe spacing

How can it be done?

Solution

  • Problem

    The issue lies within the glyph's width. As each apostrophe letter is taking more space in width than the actual glyph, they seem departed.

    Solution

    To solve this, adjust the letter spacing by assigning a negative value, like so:

    #tweetList > li > .blockstyle > blockquote p.tweettext:before{
    content: '\2018\2019';
    font-family: 'ocr';
    font-style: normal;
    font-weight: 400;
    position: absolute;
    font-size: 120px;
    top: 0px;
    left: -120px;
    color: rgba(26,114,189, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
    letter-spacing: -.2em; /* <-- */
}

    Demo