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…
Better Helvetica
Chris Coyier
on
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!
Agree!
In fact, I do, but I never realised I did, so this just made my web page 200% better. Thanks Chris!
I Agree
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 Guys you could try adding this to your css, really brings out the font in webkit browsers like Safari and Chrome.
html { -webkit-font-smoothing: antialiased; }
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.
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.
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
I found this great tool. It shows u how the fonts looks in different platforms.
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!! :)
Thank you!! i fixed safari issue :P
Is Helvetica Neue Bold font not working on IE7 & 8..?
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?
I just have the exact same issue, event on the iOS Simulator.
Thank you very much, this was driving me insane for a few weeks. Now this is solved! :)
What font stack are you using? Can you give us that code? Love your fonts.
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.
@Heather @Bobby Jones To get rid of the fuzziness in IE use numbered weights instead of
normalandbold, seems to work for some reason.@Simon Correct. This is all you really need ->
font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;Thenfont-weight: 300;will render Light andfont-weight: 200;will render UltraLight and of coursefont-weight: 400;will render regular.I wanted to use “ff-meta-web-pro” on my website. But I could not find the procedure. Please help me.
They have it on Typekit :: https://typekit.com/fonts/ff-meta-web-pro
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?
Awesome! I fixed he IE9 issue
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)
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
That is really nice. But what if the user didn’t have the font?
BUT STILL LOVED IT.
Cheers
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.
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.
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.
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.
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?
try this to your css for ,
Safari and Chrome.
html { -webkit-font-smoothing: antialiased; }
Apart from Mac users, virtually nobody has Neue Helvetica installed on their computers.
Great list working perfect for me
From FontStack:
font-family: “Segoe UI”, Frutiger, “Frutiger Linotype”, “Dejavu Sans”, “Helvetica Neue”, Arial, sans-serif;
@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/
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.
If only I could get my clients to agree with you.
Thank you!
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
thank you very much, great reference!
you need to have Helvetica-Neue uploaded on your server. And code it like this.
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.
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 projects.fiftystudio.com/saratoga
@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”. :)
As you know, Bootstrap uses font-family: ‘Helvetica Neue’, Helvetica, Arial, sans-serif; as the default config.
The issue is that today I saw the Bootstrap navbar of a project of mine on a client’s computer (Chrome on Windows) and it had been replaced by “Helvetica Neue Bold” in an inverted and outlined version. The result was horrible.
Checking the installed fonts does show “Helvetica Neue”, but the regular version was not embeded. There was the “Helvetica Neue Bold” version (the printed font) and a couple more.
I decided to eliminate “Helvetica Neue” from the list and leave Helvetica as the first option. This solved the problem, but I would like to know if there exist a visuall equivalent replacement for Helvetica Neue in Google Fonts. I’ve already searched, but I’m literally becoming blind and fonts are my achilles heel.
Cheers
I decided to ask my designer to completely stop using Helvetica in our designs.