Grow your CSS skills. Land your dream job.

Last updated on:

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...

Comments

  1. ev4n
    Permalink to comment#

    awesome thanks :D

  2. Nic Brownlee
    Permalink to comment#

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

  3. Permalink to comment#

    perfekto!

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

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

  6. nathan
    Permalink to comment#

    well, good , it’s very usefull

  7. Very cool, this will be useful.

  8. Permalink to comment#

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

  9. Permalink to comment#

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

  10. 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. 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?

    • dozza
      Permalink to comment#

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

  12. nice to know it.

  13. Andrew
    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. 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.

    • JP
      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. Used this on a couple projects, absolutely love it!

  16. Permalink to comment#

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

  17. Permalink to comment#

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

  18. Mark
    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. 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:

    http://demo.astronautdesigns.com/helvetica/

  20. Nick
    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. andy
    Permalink to comment#

    @fontface?

  22. 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.

    • A2D
      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. Permalink to comment#

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

  24. 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:

    http://bobbyjoneswebdesign.blogspot.com/2011/12/internet-explorer-9-type-1-font-bug.html

  25. 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. Giede
    Permalink to comment#

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

  27. ben
    Permalink to comment#

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

  28. 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. This is i want most used….. thanks

  30. Daniel

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

  31. 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. Brahma
    Permalink to comment#

    Thank you!! i fixed safari issue :P

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

  34. 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?

    • Permalink to comment#

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

    • Miggu

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

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

  36. 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. Chuck
    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. 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. 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. Awesome! I fixed he IE9 issue

  41. Ben
    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. 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. That is really nice. But what if the user didn’t have the font?

    BUT STILL LOVED IT.

    Cheers

  44. 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. Eric Jussaume
    Permalink to comment#

    I used this simple CSS code snippet for my portfolio website http://ejstudios.net 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. fjpoblam
    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. 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. 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. try this to your css for ,
    Safari and Chrome.

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

  50. John
    Permalink to comment#

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

  51. jishnu
    Permalink to comment#

    Great list working perfect for me

  52. dav
    Permalink to comment#

    From FontStack:

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

  53. rajit

    @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.

    http://www.kpjwebindia.com/rkjaiswal/

  54. Michael
    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. Permalink to comment#

    Thank you!

Leave a Comment

Posting Code

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".