How can I standardize the cross browser Helvetica Neue tall (not bold text)?

Question

So, I’m developing a site that will need to be used in many browsers, whether it’s a desktop, a mobile phone or whatever you have. Designers, as pop designers often do, used Helvetica Neue as the font for the entire site. I am trying to get it to work through @font inclusion, and it only shows perfectly .. but the line height gives me an ulcer.

See image below for Arial, Helvetica Neue Std and Helvetica Neue Pro. Windows Chrome treats all three as a champion, but the rest are wildly inconsistent here. Now they are all set to a linear height of 18px, I also tried the line-height: 1, but to no avail.

The HTML / CSS that I use 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? I'm considering using Arial at this point, because trying to create toolbars and buttons where the text is vertically centered is a nightmare. Of course, I do not want to sniff for the OS and browser and write my own line heights for each individual element.

Answer 1

It looks like a vertival metrics issue. The font will never align correctly, as it has poor vertical performance. The only way to make the font render consistently in browsers is to fix its vertical performance.

Most font providers allow you to update and correct vertical font metrics before downloading it. They may call this option differently. For example: Fontsquirrel calls it Auto-Adjust Vertical Metrics , myFonts.com calls it Line Height Adjustments , etc.

Font: Weak vertical metrics cause inconsistent rendering of strings in browsers. Decision?

Answer 2

I can offer this detailed background snippet on why line height is a pain .

Thus, the reason for this discrepancy may be different ways of processing the vertical spacing indicators. Some count from the top of the top line of the font and add all the space below, while others divide the interval before and after the line of text.

Answer 3

Please try this.

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

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