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

css, fonts, glyph, html

Solution

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.

Problem

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.

Original source