how to change glyph height without changing the font-size?

Question

Issue

for text elements that are adjacent to icon elements, the glyph height is not aligned with the icon height. the text elements are styled by CSS with font-size: 20px; and have consistent width for all their instances.

here's an illustration:

for the above case, the text should have the same height as the icon.

Motivation

finding a way to make the letters a bit taller to take up the available vertical space, while keeping the font-size as is. how to do that?

What have I tried?

to increase the font-size a bit, but came to conclusion i'll have to compromise for a smaller icon if I can't increase the letter height, thus the issue.

Answer 1

You can do it with css3 property Scale: (demo on dabblet.com)

HTML markup:

<span class="lower">lower size</span>
<span>normal size</span>
<span class="taller">taller size</span>

CSS:

span {
    font-size: 20px;
    display: inline-block;
}

span.lower{ transform: scaleY(0.9); }
span.taller { transform: scaleY(1.1); }

Also, you can try to set various values of vertical-align for images in your case: sub, super, bottom, top, middle. This may help to solve your problem from another point.

Answer 2

Try adding line-height: 20px; it will only increase the space between lines. It should help you match the element height.

And considering your calendar icon and text, add vertical-align: middle; to the image.

Demo: http://jsfiddle.net/rBpKL/3/

Answer 3

No, you cannot make letters taller without increasing font size—or changing font. In principle, you can decrease letter spacing, so that you could increase font size without increasing the width of the text. This is usually a bad idea, since it tends to make the font look worse and often less legible.

Showing the real problem in context (code or URL) might help to find a solution.