“Táco” is wider than “Taco”. How can I fix that?

Question

I\'m trying to load a div with diacritics on top of a div without. The spacing isn\'t working out like I though. (See the snippet below.) How can I fix this?

Answer 1

You're going to want to look at font-kerning.

The font-kerning CSS property controls the usage of the kerning information; that is, it controls how letters are spaced. The kerning information is stored in the font, and if the font is well-kerned, this feature allows spacing between characters to be very similar, whatever the characters are.

Check out this pen http://codepen.io/anon/pen/JKPMGM, I set kerning to none and they lined up.

div.text {
        width: 75%;
        position: relative;
        font-kerning:none;
    }
    div.diacritics {
        width: 100%;
        height: 100%;
        position: absolute;
        font-kerning:none;
        top: 0;
        left: 0;
      z-index: -1;
      color: red;
    }

A little more info.

Kerning adjusts the space between individual letter forms, while tracking (letter-spacing) adjusts spacing uniformly over a range of characters. In a well-kerned font, the two-dimensional blank spaces between each pair of characters all have a visually similar area.