How to compensate for the baseline?

Question

This is a very common problem with font-face, for example.

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

The problem is that I expect the text to be vertically centered. However, it is not. Is there a way to offset the baseline of the line? No actual change line-height.

Answer 1

The phenomenon is font dependent. The design of a font depends on how the font uses its height. For example, in Arial, when solid, uppercase basic Latin letters are installed, they are vertically centered, while in Verdana they look a little lower (that is, a little more space is higher than lower).

, , , .

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

CSS span, ,

position: relative;
top: 2px;

, , , .

font-style: 'book', , . CSS, , ( font-style book).