Code Snippet

Home » Code Snippets » CSS » Better Helvetica

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

Subscribe to The Thread

  1. ev4n

    awesome thanks :D

    Reply ↓
  2. Nic Brownlee

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

    Reply ↓
  3. Metin

    perfekto!

    Reply ↓
  4. Rob Cubbon

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

    Reply ↓
  5. Andy Griffiths

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

    Reply ↓
  6. nathan

    well, good , it’s very usefull

    Reply ↓
  7. Ryan bollenbach

    Very cool, this will be useful.

    Reply ↓
  8. MK3Y

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

    Reply ↓
  9. David

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

    Reply ↓
  10. fraser peek

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

    Reply ↓
  11. Per

    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?

    Reply ↓
    • dozza

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

  12. Kiyan

    nice to know it.

    Reply ↓
  13. Andrew

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

    Reply ↓
  14. Flaviu

    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.

    Reply ↓
  15. Ash Blue

    Used this on a couple projects, absolutely love it!

    Reply ↓
  16. Jon

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

    Reply ↓
  17. Kris

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

    Reply ↓
  18. Mark

    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?

    Reply ↓
  19. Tim Holt

    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/

    Reply ↓
  20. Nick

    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.

    Reply ↓
  21. andy

    @fontface?

    Reply ↓
  22. Ryan

    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.

    Reply ↓
    • A2D

      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

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

    Reply ↓
  24. Bobby Jones

    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

    Reply ↓
  25. Paul

    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.

    Reply ↓
  26. Giede

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

    Reply ↓
  27. ben

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

    Reply ↓
  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)

    Reply ↓
  29. Effo Techs

    This is i want most used….. thanks

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~