Search code examples
htmlcssfontsglyph

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

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:

font problem

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.

Solution

  • You can do it with css3 property Scale: (demo on dabblet.com)
    enter image description here

    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.