Better Helvetica

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;

Might as well use the nicest Helvetica you can...


  1. User Avatar
    Permalink to comment#

    awesome thanks :D

  2. User Avatar
    Nic Brownlee
    Permalink to comment#

    Cool, think I might be using a few of these,
    Thanx Chris

  3. User Avatar
    Permalink to comment#


  4. User Avatar
    Rob Cubbon
    Permalink to comment#

    Just used this. You never know who has Helvetica Neue installed on their computer!

  5. User Avatar
    Andy Griffiths
    Permalink to comment#

    Good idea to use a font stack that degrades from perfect to zero like this one.

  6. User Avatar
    Permalink to comment#

    well, good , it’s very usefull

  7. User Avatar
    Ryan bollenbach
    Permalink to comment#

    Very cool, this will be useful.

  8. User Avatar
    Permalink to comment#

    Perfect! Love this, very useful. I love Helvetica.

  9. User Avatar
    Permalink to comment#

    Yeh, great little snippet. was just searching for advice on Helvetica on a website.

  10. User Avatar
    fraser peek
    Permalink to comment#

    hey this is sweet…although it doesnt seem to work in safari or chrome…it looks great in firefox…but not the other 2…any ideas why??

  11. User Avatar
    Permalink to comment#

    Hey. I know this is kinda late. But do you have any optimizing tricks for the Verdana font? Or is it only Helvetica you can optimise like this?

    • User Avatar
      Permalink to comment#

      Verdana font stack here, as well as many others and the best installed font survey going.

  12. User Avatar
    Permalink to comment#

    nice to know it.

  13. User Avatar
    Permalink to comment#

    Perhaps a bit late (from the publish date of this story), but I also like to include “Liberation Sans” as a part of my stack.

    It’s included in Red Hat, Fedora, Ubuntu (and more), however from what I can see it doesn’t look exactly the same as Arial/Helvetica.

    I’ve never put Helvetica Neue in my stack; I usually use Helvetica, Arial, “Liberation Sans”, sans-serif. However I’ll probably consider using it. :)

  14. User Avatar
    Permalink to comment#

    Can’t you use @font-face and include all Helvetica font-family on your site?

    Of course, I am not sure if Helvetica family can be used freely, without any licence.

    • User Avatar
      Permalink to comment#

      As far as I know, Helvetica Neue can be converted to a web font (I use Font Squirrel) as long as the files can’t be used on a desktop. I read the licensing on the Mac’s installed Helvetica Neue font and it basically says that the font can be embeded in a website for display use only and as long as the font installed on the server can not be extracted and installed on a desktop computer.

  15. User Avatar
    Ash Blue
    Permalink to comment#

    Used this on a couple projects, absolutely love it!

  16. User Avatar
    Permalink to comment#

    This is totally great, I constantly refer back to this page.

  17. User Avatar
    Permalink to comment#

    Great list. I’ve added this to my css file.

  18. User Avatar
    Permalink to comment#

    Great solution! One question: When i make a part of the text bold , this doesn’t work anymore, probably because the font-weight is set?

  19. User Avatar
    Tim Holt
    Permalink to comment#

    I recently had a client who insisted on Helvetica Light but had difficulty grasping that some devices simply don’t have the font, so the fallback displays. I decided to create a comparison with a Typekit font and a Google webfont alongside Helvetica and Arial. Here is the subsequent demo page:

  20. User Avatar
    Permalink to comment#

    The new Android Ice Cream Sandwich font, called Roboto, looks a lot like Helvetica, but a LOT better, it’s free for use in anything you want.. Google’s amazing, they give so much. It’s an awesome font.

  21. User Avatar
    Permalink to comment#


  22. User Avatar
    Permalink to comment#

    Just noticed twitter uses this font-stack… font: “HelveticaNeue,”Helvetica Neue”,Helvetica,Arial,sans-serif;

    However, when I view it in Chrome/Mac the “HelveticaNeue” (no spaces) causes the font to default to a serif font (the browser default in this case) instead of the next font in the stack. I’m not sure what’s going on here but it has me thinking about other cases which might cause the font-stack to fail and revert to the browser default.

    FYI: One way to avoid an unexpected browser default is to define body{font-family:serif} before any other font-stacks to make sure the browser default is overwritten.

    • User Avatar
      Permalink to comment#

      Came across this googling for same problem: Chrome/Mac inexplicably defaulting to serif font.
      Different font but same reason – when it encounters a non-installed font with no spaces it seems to ignore all subsequent fonts in the stack…
      The workaround (setting a default font on the body or html elements) works fine.

  23. User Avatar
    Permalink to comment#

    Sorry… meant body{font-family:sans-serif}

  24. User Avatar
    Bobby Jones
    Permalink to comment#

    In addition to Helvetica looking fuzzy in IE, there is another larger and less well known problem with the latest versions of IE, specifically IE9+ and the Adobe Type 1 version of Helvetica. I have written an article detailing the problem, but in short IE9 cannot load any website which attempts to use Helvetica in it’s CSS if the end-user has an Adobe Type 1 version of Helvetica installed on their computer. If you would like more details on this issue you may wish to read my article on the subject here:

  25. User Avatar
    Permalink to comment#

    This is the best one font ever. You can take this font through google website (just copy metatag with link to this font) and everything will be ok.

  26. User Avatar
    Permalink to comment#

    Great job! Can I use the font-stack with ‘Helvetica Neue’ easily, without expecting legal consequences?

  27. User Avatar
    Permalink to comment#

    thanks again man. your css knowledge is great, and always useful.

  28. User Avatar

    Speaking about the hassle of Helvetica Neue license, there is a @font-face embedded font which is free, embeddable, and fairly similar to Helvetica, which is called TeX Gyre Heros (found on Font Squirrel)

  29. User Avatar
    Effo Techs

    This is i want most used….. thanks

  30. User Avatar

    I found this great tool. It shows u how the fonts looks in different platforms.

  31. User Avatar
    Jeremy Carlson

    Okay, this is better! The default font stack running with Bootstrap is "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;

    I was running into nasty font issues on Chrome (Mac) with completely garbled text—all letters were converted into what looked like an A in a box.

    Your font stack above fixed my font issues. I’ll be using it wherever I want Helvetica… THANK YOU!! :)

  32. User Avatar
    Permalink to comment#

    Thank you!! i fixed safari issue :P

  33. User Avatar

    Is Helvetica Neue Bold font not working on IE7 & 8..?

  34. User Avatar
    Permalink to comment#

    This is a great solution, EXCEPT, what’s the initial “HelveticaNeue-Light” in there for? I only ask because strangely, on an iPhone 4, this causes a really dodgy condensed font to appear that isn’t Helvetica in any shape or form. My exact font-stack that caused this issue was:

    font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;

    The fixed one:

    font-family: “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;

    Also, is there a computer out there that doesn’t have Arial so would fall back to Lucida Grande?

    • User Avatar
      Permalink to comment#

      I just have the exact same issue, event on the iOS Simulator.

    • User Avatar

      Thank you very much, this was driving me insane for a few weeks. Now this is solved! :)

  35. User Avatar
    Permalink to comment#

    What font stack are you using? Can you give us that code? Love your fonts.

  36. User Avatar
    Permalink to comment#

    It might be also wise to add ‘HelveticaNeueLT Com 55 Roman’ (for standard Roman version). Why? I don’t know. I saw it few times on Windows.

  37. User Avatar
    Permalink to comment#

    @Heather @Bobby Jones To get rid of the fuzziness in IE use numbered weights instead of normal and bold, seems to work for some reason.

    @Simon Correct. This is all you really need -> font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; Then font-weight: 300; will render Light and font-weight: 200; will render UltraLight and of course font-weight: 400; will render regular.

  38. User Avatar
    Permalink to comment#

    I wanted to use “ff-meta-web-pro” on my website. But I could not find the procedure. Please help me.

  39. User Avatar
    Alex McCabe
    Permalink to comment#

    I copied this exactly, and I know I have both Helvetica Neue and Helvetica installed. I also know I have Arial and several other sans-serif fonts, yet it defaults to Times New Roman. Why would this be?

  40. User Avatar
    Permalink to comment#

    Awesome! I fixed he IE9 issue

  41. User Avatar
    Permalink to comment#

    You should also mention that this fixes the issue on Windows if they have Helvetica installed it defaults to: Ultra Light (which is not easy to read)

  42. User Avatar
    Permalink to comment#

    having this font “HelveticaNeue-Light” in the stack makes a problem with safari on iPhone and iPad … actually a weird font appears. That’s why i guess that it’s better to remove this it

  43. User Avatar

    That is really nice. But what if the user didn’t have the font?



  44. User Avatar
    Anthony Arellano
    Permalink to comment#

    I don’t know but it will be very great if there is a webfont that will look identical to Helvetica Neue. Fonts like Arimo, TeX-Gyre-Heros and Roboto looks very promising as webfont back-up but still they don’t look good at many points.

    I guess the font-stack above is the best so far. One thing I just hate about it is the presence of my arch enemy – Lucida Grande.

  45. User Avatar
    Eric Jussaume
    Permalink to comment#

    I used this simple CSS code snippet for my portfolio website and it works great. You can always use better Helvetica. Why use an inferior version of the font when you can use the best.

  46. User Avatar
    Permalink to comment#

    Good stack — though I tend to omit Lucida and Arial and let the sans chips fall where they may. One thing I notice, though, is that italics pop up bold on my iPad — so I end up with an extra statement reverting cite,em,i to plain ol’ Helvetica (weight 300) to get things back into line.

  47. User Avatar
    Permalink to comment#

    Yeue, I was once a proud owner of Helvetica Neue. And then there was Calibri/Calibri Light. Neue has better shapes. Calibri has better shape spacing. One thing for sure with current technology, you can’t share spacing and shape between font families. Typography is a wild beast, & truly so.

  48. User Avatar
    Scott Richardson
    Permalink to comment#

    What’s the status on actually being able to use an official font-face kit for Helvetica? I have converted it myself and used it on a couple of sites but it wasn’t ideal. Is there a foundry online that licenses it as a font-face kit?

  49. User Avatar
    emploi au maroc
    Permalink to comment#

    try this to your css for ,
    Safari and Chrome.

    html { -webkit-font-smoothing: antialiased; }

  50. User Avatar
    Permalink to comment#

    Apart from Mac users, virtually nobody has Neue Helvetica installed on their computers.

  51. User Avatar
    Permalink to comment#

    Great list working perfect for me

  52. User Avatar
    Permalink to comment#

    From FontStack:

    font-family: “Segoe UI”, Frutiger, “Frutiger Linotype”, “Dejavu Sans”, “Helvetica Neue”, Arial, sans-serif;

  53. User Avatar

    @Simon Correct. This is all you really need -> font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif; Then font-weight: 300; will render Light and font-weight: 200; will render UltraLight and of course font-weight: 400; will render regular.

  54. User Avatar
    Permalink to comment#

    Designers need to stop using Helvetica Neue for web fonts (print is fine). There are thousands of fonts out there, designers are just being lazy by using a Mac system font. Yes I get that you like it, but if we cannot convert it to @font-face or cufon because of restrictions, that should tell you something. It’s bad practice for designers and they should stop doing it, it drives developer nuts. I can’t even remember the amount of times I have had to tell designers to find a different font.

  55. User Avatar
    Iyan Riana
    Permalink to comment#

    Thank you!

  56. User Avatar
    Jay Carreon
    Permalink to comment#

    if you’re going to use this for text fields.. better add a “letter-spacing:1px” and change font-weight to “400” it’s so much easier to read, good for user experience

  57. User Avatar

    thank you very much, great reference!

  58. User Avatar
    Francis Alojipan
    Permalink to comment#

    you need to have Helvetica-Neue uploaded on your server. And code it like this.

    @font-face {
        font-family: HelveticaNeue;
        src: url('fonts/Helvetica-Neue.otf'); /* this points to folder where you uploaded your custom font */
    body {
       font-family: "HelveticaNeue", Arial, "Lucida Grande", sans-serif; 
       font-weight: 300;
    • User Avatar
      Scott Richardson
      Permalink to comment#

      That isn’t allowed. Helvetica Neue is a professional, commercial font worth lots of money. You can’t create web-font versions of it and upload it to your server for others to use. Someone please correct me if I’m wrong, though.

  59. User Avatar
    Francis Alojipan
    Permalink to comment#

    Try it Scott, it’s weird but it works. The same code is applied on other fonts, If you like to add some custom font/s.

    Here I used

    @font-face {
    font-family: latolight;
    src: url(“../../fonts/Lato-Light.ttf”);
    @font-face {
    font-family: latolightitalic;
    src: url(“../../fonts/Lato-LightItalic.ttf”);
    @font-face {
    font-family: latoregular;
    src: url(“../../fonts/Lato-Regular.ttf”);
    @font-face {
    font-family: latobold;
    src: url(“../../fonts/Lato-Bold.ttf”);
    @font-face {
    font-family: latohairline;
    src: url(“../../fonts/Lato-Hairline.ttf”);

    still looking for the site that I used the “Helvetica Neue”. :)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.