8

So I'm developing a site that'll need to function across a multitude of browsers, be they desktop, mobile, or what have you. The designers, as mac designers will often do, have used Helvetica Neue as the font for the entire site. I'm trying to get it working via @font inclusion, and it's showing up just fine.. but the line-heights are giving me an ulcer.

See the below image, this is Arial, Helvetica Neue Std, and Helvetica Neue Pro. Windows Chrome handles all three like a champ, but the rest here are wildly inconsistent. They're all set to line-height 18px right now, I also tried line-height: 1, but to no avail.

Aw Nuts

The HTML/CSS I'm using for the purposes of this test:

<style type="text/css">

    @font-face { font-family: "Helvetica Neue Std"; src: url( 'HelveticaNeueLTStd-Md.otf' ) format( "opentype" ); }
    @font-face { font-family: "Helvetica Neue Pro"; src: url( 'HelveticaNeueLTPro-Md.otf' ) format( "opentype" ); }

    .box {
        float: left;
        padding: 10px;
        border: 1px solid red;
        font-size: 18px;
        line-height: 18px;
    }

    .box .text_1 { font-family: Arial; }
    .box .text_2 { font-family: "Helvetica Neue Std" }
    .box .text_3 { font-family: "Helvetica Neue Pro" }

</style>

<div class="box">
    <span class="text_1">Aw Nuts</span>
</div>

<div class="box">
    <span class="text_2">Aw Nuts</span>
</div>

<div class="box">
    <span class="text_3">Aw Nuts</span>
</div>

Am I just out of luck here? I'm considering just using Arial at this point, because trying to make toolbars and buttons where the text is vertically centered is proving to be a nightmare. I certainly don't want to sniff for OS and browser and write custom line-heights for every single element.

Tathanen
  • 150
  • 1
  • 7
  • Have you tried sizing the font and line-height in ems? – Erik Oct 03 '12 at 18:04
  • @Erik, just tried that, using 1.1em instead of 18px. There were some 1px shifts here and there, but overall the effect remained the same. – Tathanen Oct 03 '12 at 18:17
  • I think this problem could be wider then line-height. It could be the way in which the browser is actually rendering the font in which case it could be a bit hack job to accomplish something which should be quite simple. Have a try including a font through http://www.google.com/webfonts to see if you hit the same problem. – parmar84 Oct 03 '12 at 23:04

3 Answers3

2

I can offer this in-depth background piece on why line height is a pain.

In summary, different browsers' ways of handling the vertical spacing metrics might be the cause of these inconsistencies. Some calculate from the top of the font's highest ascender and add all line space beneath, while others split the spacing before and after the line of text.

Anthony
  • 141
  • 1
  • 4
  • 1
    I think I've read this before, but thanks for the link. It looks like I'm just out of luck, when it comes down to it. Arial it is! – Tathanen Oct 04 '12 at 18:28
2

This looks like a vertival metrics issue. The font will never align right because it has poor vertical metrics. The only way to make the font render consistently across browsers is to fix its vertical metrics.

Most font providers allow you to update and fix vertical metrics for a font before downloading it. They may call that option differently though. E.g.: Fontsquirrel calls it Auto-Adjust Vertical Metrics, myFonts.com calls it Line Height Adjustments, etc..

Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

Rotareti
  • 49,483
  • 23
  • 112
  • 108
0

Please try this.

*{
   margin: 0px;
   padding: 0px;
   font-size: 100%;
   vertical-align: baseline;
 }

font-size: 100% will automatically reset your fonts defaults and you need to manually specify font-size on p a div etc.

RJB
  • 95
  • 3
  • 15
  • Thanks for the idea, but while it tightened up things here and there, the disparity between browsers remains. – Tathanen Oct 04 '12 at 17:54