Code Snippet
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...
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...
awesome thanks :D
Cool, think I might be using a few of these,
Thanx Chris
perfekto!
Just used this. You never know who has Helvetica Neue installed on their computer!
Good idea to use a font stack that degrades from perfect to zero like this one.
well, good , it’s very usefull
Very cool, this will be useful.
Perfect! Love this, very useful. I love Helvetica.
Yeh, great little snippet. was just searching for advice on Helvetica on a website.
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??
Just read up on this actually. You’ll find the answer you need here :
http://angelobeltran.com/blog/articles/helvetica-neue-the-ugly-truth/
it’s a sad sad truth :(
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?
Verdana font stack here, as well as many others and the best installed font survey going.
nice to know it.
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. :)
Can’t you use
@font-faceand include all Helvetica font-family on your site?Of course, I am not sure if Helvetica family can be used freely, without any licence.
Used this on a couple projects, absolutely love it!
This is totally great, I constantly refer back to this page.
Great list. I’ve added this to my css file.
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?
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/
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.
@fontface?
http://www.fontsquirrel.com/
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.
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.
Sorry… meant body{font-family:sans-serif}
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
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.
Great job! Can I use the font-stack with ‘Helvetica Neue’ easily, without expecting legal consequences?
thanks again man. your css knowledge is great, and always useful.
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)
This is i want most used….. thanks
DigWP
A book and blog co-authored by Jeff Starr and myself about the World's most popular publishing platform.
Quotes on Design
Design, like Art, can be an elusive word to define and an awfully fun thing to have opinions about.
HTML-Ipsum
One-click copy to clipboard access to Lorem Ipsum text that comes wrapped in a variety of HTML.
Bookshelf
Hey Chris, what books do you recommend? These, young fertile mind, these.