Question

So I know that my question is pretty technical, but basically I would like to know specifically how the following CSS affects the display of text in <p> tags.

p {
letter-spacing:2px;
font-family:"Georgia";
}

I know that Georgia is a proportional font, that the designer has spent time crafting the spaces between letters to make the font more readable and visually pleasing.

But my question is how does the letter-spacing property affect this proportionality? Does this code add two pixels onto the spacing already defined by the type designer, or does it reset that spacing to two pixels?

Answer 1

This property is additive to what the font would normally use. So, 1px will increase it by a pixel. Sitepoint calls it “extra” space (with negative values allowed).

The W3C docs say the same thing:

“This value indicates inter-character space in addition to the default space between characters. Values may be negative…”