How to change glyph height without changing font size?

Question

Problem

for text elements adjacent to icon elements, the height of the glyph does not align with the height of the icon. text elements are styled with CSS using font-size: 20px; and have a consistent width for all their instances.

here:

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

Motivation

find a way to make the letters a little higher to occupy the available vertical space, keeping the font-size as it is. how to do it?

What have i tried?

increase the font-size little, but came to the conclusion that I will have to compromise the smaller icon if I can’t increase the height of the letters, thereby the problem.

Answer 1

You can do this with the css3 Scale property: ( 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); } 

In addition, you can try to set different vertical-align values ​​for the images in your case: sub , super , bottom , top , middle . This can help solve your problem from another point.

Answer 2

Try adding line-height: 20px; , this will increase the space between the lines. It should help you choose the height of the item.

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

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

Answer 3

No, you cannot make letters higher without increasing the font size, or changing the font. Basically, you can reduce the spacing between letters to increase the font size without increasing the width of the text. This is usually a bad idea, as it tends to degrade the font and is often less legible.

Displaying a real problem in context (code or URL) can help find a solution.