how to change 'inner' lineheight of css text


Tags: html,css,css3,fonts,font-face

Problem :

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

enter image description here

MAC

enter image description here

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.



Solution :

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.


    CSS Howto..

    Jquery-How to grey out the background while showing the loading icon over it

    How to make a basic event calendar with javascript, jquery, html and css?

    How to align content to the bottom of a div?

    How to make css background-blend-mode work with gradients?

    How to make sure items are added to the end of a moving list?

    How to adjust website according to screen resolution

    Show outlines around divs in a web-based HTML editor, a la Dreamweaver and other editors

    How semantic X/HTML can save time when we will write CSS?

    How to target CSS module classes after they are hashed?

    How to style image in variable? [closed]

    javascript or css: How to Hide any Number followed by dot Prefix “1.text”, “2.text”…“30.text” from a Text inside a Label

    How to recreate eBay New Logo Page in HTML + CSS

    How to align/move Vaadin buttons

    How to make Superfish menu vertical in first level but horizontal in second level?

    CSS background color show another color

    How can I make a designer's static web page run in rails 4

    Bootstrap 3: How to make margins responsive?

    How can I change the selection text background using CSS?

    How to fold/unfold a DIV like on this website

    How to make onmouseover on menu link change background image?

    How to make my first-child in css work properly?

    How to stop all CSS overrides on a container DIV?

    How to set a background color defined as a CSS class (using JQuery eventually)?

    How to display a div on hover of button using css

    How to keep CSS from render-blocking my website?

    How create a grid in which a variable number of squares automatically resize to fit a space?

    How to figure a text box set of characters into a text box figure 2 effect?

    How to get the first letter of each word to be a different size and the rest to be the same size

    How to target images with dynamically generated ids with CSS

    How to get a floating-DIV to fill available space within its parent DIV?