how to change 'inner' lineheight of css text

Question

I'm trying to work with an icon font called entypo. The font is great, but the padding that the developer chose is horrendous, and makes this font infuriating to work with. The icons are really good though and I'm just trying to make it work.

What it boils down to to make the font look 'normal', the font size needs to be huge (like 40px+).

If you're trying to fit the icon into a space of 15px height, the font-size will be 40px and then there is all that extra space you need to deal with.

I have tried setting explicit height, explicit lineheight, vertical-align, in every conceivable combination, and the result is differenct between PC and mac.

The only thing I can think of is that 'leftover space' is handled differently by different operating systems.

Is there some CSS property that I'm not aware of that will fix this?

PC

MAC

This is the very hackish CSS I used to try and zero it out as best I could. Keep in mind I've already tried playing with height and lineheight, it always is the same problem, PC always puts it way below where mac puts it.

.icon {
    font-family: 'entypo';
    display: inline-block;
    color: #000;
    font-size: 40px;
    line-height: 0;
    height: 0;
    vertical-align: middle;   
}

For the sake of those images above to demo to you guys, these are the properties I added: height: 20px; width: 20px; background: red; only to demonstrate how it renders so differently.

Answer 1

I've been having the same issue. I'm not sure my solution is all that great, but I'll post it to see if we can get some discussion started.

.icon {
  font-family: 'Entypo';
  position: absolute;
  font-size: 40px;
  height: 20px;
  width: 20px;
  margin-left: -20px;  /* This will force it to live before the containing element, so the container may need 20px of padding-left */
  margin-top: -1px;    /* Just because it was still sitting one pixel to low for my eye */
  text-align: center;

}

I'm hopeful someone has an idea of how to accomplish this without having to add the padding to the containing element. However, it was the only way I could make this work with the absolute positioning which is what seems to allow us to "trim" the extra padding on the icon character.