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.

Deathtrap

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.

Stylobate

Not working in my case but gonna accept this answer because obv. it solves the problem. The problem is somewhere in my code most probably. – Deathtrap

I added note about using vertical-align for images, May be this can help you – Stylobate

Thanks, gonna play a bit with vertical-align. And thanks for the info I knew it that increasing of letter height was possible :) – Deathtrap

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/

Jacktar

Nope, this doesn't solve the problem, at least in my case. Maybe after all I'll increase the font-size but will wait a little longer to see if anyone knows a solution. – Deathtrap

Yeah, it's almost as it should be. with vertical-align the images are positioned correctly but there's no space b/w the top and bottom image and adding line-height for the cell where all the data is doesn't fix this. Any idea? – Deathtrap

Thanks, by far this is the best looking variant I have. – Deathtrap

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.

Surrender

See tha main topic for image and explanation what I want to do. – Deathtrap

@Deathtrap do you want vertically center your label relatively to icons or truly make text taller? – Stylobate

Both would work but the problem is that the column is filled form a string containing all the the text like <img/> tags, text and so on. So I decided that changing the letter size would be the easiest way – Deathtrap