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/