14

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.

Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
Leron
  • 9,546
  • 35
  • 156
  • 257

3 Answers3

21

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.

Vladimir Starkov
  • 19,264
  • 8
  • 60
  • 114
  • 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. – Leron Jun 13 '12 at 08:31
  • I added note about using `vertical-align` for images, May be this can help you – Vladimir Starkov Jun 13 '12 at 08:36
  • 1
    Thanks, gonna play a bit with `vertical-align`. And thanks for the info I knew it that increasing of letter height was possible :) – Leron Jun 13 '12 at 08:39
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/

Dipak
  • 11,930
  • 1
  • 30
  • 31
  • 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. – Leron Jun 13 '12 at 08:11
  • 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? – Leron Jun 13 '12 at 09:08
  • 1
    Thanks, by far this is the best looking variant I have. – Leron Jun 13 '12 at 09:27
0

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.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • See tha main topic for image and explanation what I want to do. – Leron Jun 13 '12 at 08:23
  • @Leron do you want vertically center your label relatively to icons or truly make text taller? – Vladimir Starkov Jun 13 '12 at 08:25
  • Both would work but the problem is that the column is filled form a string containing all the the text like `` tags, text and so on. So I decided that changing the letter size would be the easiest way – Leron Jun 13 '12 at 08:30