LATEST BLOG
Helvetica Neue: The Ugly Truth
Frustration sunk in deep as Mozilla Firefox 3.6, Google Chrome and Internet Explorer 8 all failed to render the Windows font version of Helvetica Neue properly. Upon further investigation and some screenshots later you will too discover the ugly truth behind Helvetica Neue.
Recommended Reading
Many websites like Mashable and UserScripts.org have their font settings set to font-face: 'Helvetica Neue', Arial, sans serif;. Many Windows users have reported that Helvetica Nueu appears to be very fuzzy when browsing on these websites. My test system is running Microsoft Windows Vista and based on the screenshots below three of the major browsers on the market today do fail horribly in their attempt to render the typeface properly.
Mozilla Firefox 3.6
Even the acclaimed Gecko engine fails to deliver. The font looks very fuzzy and unreadable.
Google Chrome
Google’s version of WebKit also fails to render the font properly.
Internet Explorer 8
ClearType renders it a bit better than the previous two browsers but it’s still looks way too small.
Safari 4
Safari performed the best out of the four. Safari’s WebKit saves the day!
There is an ongoing trend and it’s not slowing down on the heavy use of Helvetica Neue as the primary font when setting up a website’s styling.
The current workaround if you’re tech-savvy enough is to use Firebug to tweak the font-face: 'Helvetical Neue', Arial, sans-serif; to font-face: Helvetica, Arial, sans-serif; right on the browser’s interface. Alternatively if you’re using a font manager such as Suitcase Fusion then you can temporarily deactivate the offending typeface. The other workaround is to download an add-on called Greasemonkey and install a script called Kill Helvetica.
A quick rough dive into how Microsoft and Apple differs in their implementation of a font rendering algorithm called sub-pixel rendering may shed some light into this issue.
Sub-pixel rendering is just another fancy name for font smoothing or anti-aliasing. Let’s take a look at the screenshots below to see how Apple’s sub-pixel rendering differs from Microsoft’s ClearType.
Microsoft’s Rendering via Internet Explorer 8
You will observe that the rendered font looks sharper where each pixel is forced to fit into the pixel grid hereby to increase readability but losing its original look.
Apple’s Rendering via Safari 4
Here the rendered font looks more blurry on the edges making it look appear thicker but smoother and easier on the eyes.
Throwing it into the mix is CSS3′s @font-face. Will this fix our woes? Let us know what you think.
Written by Angelo Beltran
Angelo Beltran is a freelance designer who recognizes that design and marketing are one and the same. He's passionate about branding and corporate identity. Follow his tweets over at Twitter.
19 Comments
meatfeast said...
Hidden due to low comment rating. Click here to see.
Poorly-rated. Like or Dislike:
6 
30
Angelo Beltran said...
@meatfeast Ouch…that hurt. I do sincerely apologize if I’ve caused any form of offense. I would however encourage constructive criticisms to promote discussion. And thanks for the comment.
gravyjunkie said...
Safari does render fonts better. I want an Apple.
Charlene Barker said...
If only more than 28 people could read about this..
omassain said...
Hi from France, and thanks for the tips.
I’m trying to figure out how to “use Firebug to tweak the font-face: ‘Helvetical Neue’, Arial, sans-serif; to font-face: Helvetica, Arial, sans-serif; right on the browser’s interface.”
I could use a little help
Thanks again
O.
Angelo Beltran said...
@omassain Merci for the positive feedback! Press F12 on your keyboard to bring up Firebug or right-click anywhere on the webpage to access your context menu and click on ‘Inspect Element’. On the left column click on the
<body>tag and on the right you should see thefont-familyproperty. Click it and edit its values. Use the search box found on the upper right hand corner to look for it if you’re still having problems. Good luck!omassain said...
Nice! But is there any way to save these options, because whenever i leave the page and come back later, helvetica neue has taken over again
Angelo Beltran said...
@omassain Firebug will not save your changes permanently. It is only used for quick debugging purposes. For a more ‘permanent’ fix I highly recommend installing the Greasemonkey add-on coupled with the ‘Kill Helvetica‘ script.
omassain said...
Kill Helvetica I shall
Thanks again
James said...
I got a look at the new Digg Alpha this morning and they’re another big site that have jumped onto the helvetica body text trend. It looks absolutely awful.
As for meatfeast above, ignore mactards like him.her.
Well-loved. Like or Dislike:
7 
1
Angelo Beltran said...
@James My man you just made my night.
Bob said...
I have 2 pcs, one of my pc can render the helvetica and looking great, but on other pc being zombie! ugly font. eiii. Try download ClearType Tuner and install it. Then the HELLvetica will be HEAVENtica.
artfcat said...
the offender is Helvetica-Neue Bold Condensed, (or Condensed Bold) it appears to windows in the font list before any other version of Helvetica Neue, simply delete it if you can (can’t see why anyone would use it for anything tis ugly, maybe it’s nicer a bigger sizes) and pages using it will be nice again.
Tallas said...
People like meatfest are the biggest hypocrites going around and its a shame he lowers the respect for mac users. I use both. I respect both. However, using fonts that don’t render properly in all browsers goes against all standards. Apple is the biggest standards advocate, yet you get these silly people like meatfest who have the apple TOO far up their ass, that they automatically pay out windows users. It’s a personal choice – I can do my own research instead of you continuing to tell me… But this issue has NOTHING to do with OS’s… its about web standards…
@meatfest Maybe you should stop being such an egotistical apple narcissist and actually understand what YOUR talking about.
Trecoolius said...
Why kill a font as beautiful as helvetica*? Just switch off cleartype and install gdi++. Welcome to a more readable screen.
max headroom said...
I am not aware of this problem. Just surfed to mashable.com and it looks fine in my Firefox 3.6.15 in Windows 7.
Does that mean that the problem has been fixed by Mozilla in the meantime? Or maybe I am not affected because there is no Helvetica in my Fonts folder?
Also, I cannot see a font tag or Helvetica nor Arial when I view the source text for the page, guess I would need to install Firebug to see that?
Sorry for asking such ignorant questions.
Angelo Beltran said...
@max I apologize for responding so late. I just checked mashable.com. It looks like they’re no longer using Helvetica Neue as their primary font setting. It’s now set to font-family: “Arial”,”Helvetica”,sans-serif;
Yes you will need Firebug or something similar to check the CSS settings.
max headroom said...
Thank you for the reply, I appreciate it
imgfx said...
Encountered this font as part of a PSD webpage sketch that I am paid to implement as a developer. This is one reason why designers hate web developers, in order to have a clean render, we must change the font in spite of the great design. This pains me greatly as I was originally a graphic designer and I know both sides of this debate. What any Commercial Artist (any left?) will tell you, it is about communicating first, (getting paid) and then about lovely fonts and cool visual design. Now we must also satisfy the ‘bots for web rank. The great do all. Very few can.
Leave a Comment