How to offset line-height base line?

Question

It is very common issue with font-face, e.g.

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase;

The problem is that I'd expect text vertically centered. However, it is not. Is there a way to offset the line-height base line? Without actually changing the line-height.

Answer 1

The phenomenon depends on the font. It is up to the font designer to decide how the font uses its height. For example in Arial, when set solid, uppercase basic Latin letters are vertically centered, whereas in Verdana, they appear a bit lower (i.e., a little more space above than below).

You can fine-tune this by using relative positioning, but you then need extra markup, e.g.

<div><span>text</span></div>

with CSS for the span setting, say,

position: relative;
top: 2px;

This may cause nasty effects if the font used in the user’s browser is different from your expectations.

I did not consider the possible effect of font-style: 'book', as I have no idea of what it might mean. No CSS resource I know mentions anything like that (the font-style values are unquoted keywords and do not inlcude book).