Treehouse: 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. Metin
    Permalink to comment#

    perfekto!

  4. Rob Cubbon
    Permalink to comment#

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

  5. Andy Griffiths
    Permalink to comment#

    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. Ryan bollenbach
    Permalink to comment#

    Very cool, this will be useful.

  8. MK3Y
    Permalink to comment#

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

  9. David
    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. Per
    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. Kiyan
    Permalink to comment#

    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. Flaviu
    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. Ash Blue
    Permalink to comment#

    Used this on a couple projects, absolutely love it!

  16. Jon
    Permalink to comment#

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

  17. Kris
    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. 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:

    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. Ryan
    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. Ryan
    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. Paul
    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. Audee

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

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

    Thank you!! i fixed safari issue :P

  33. Manish

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

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

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

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

  36. zx
    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. Hemant
    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. 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. Harikrishna
    Permalink to comment#

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

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

    BUT STILL LOVED IT.

    Cheers

  44. 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. 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. Mark
    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. 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. emploi au maroc
    Permalink to comment#

    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. Iyan Riana
    Permalink to comment#

    Thank you!

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

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```