Declare a safe font stack with CSS font-family?
Posted: March 26th, 2010 | Author: Rachael L. Moore | Filed under: Fonts & Typography | Tags: CSS @font-face, CSS font-family, CSS font-stretch, CSS font-weight, Font Stacks, Fonts, Typography | 9 Comments »Or: I would love to know how to use Helvetica Neue on the web
Or: No, really, how do you actually declare fonts anymore?
- Update: Ben Walker was kind enough to share some very relevant information about the topic.
- Update Again: I have confirmation that my solutions in this post are not final. Scott MacDonald found that my font stacks would break font rendering on his system (weird)! You may also want to check out my long theoretical response if you’ve got a lot of spare time on your hands.
- I’ve written an updated blog entry that contains fewer questions & more answers at Name That Font! Finding the Right Font Name.
Because when I say “safe” I don’t mean “using only web safe fonts”, I mean “how the heck do you get the non-web-safe-font to show up when you know you have it”? I swear, back when I used “web safe” fonts almost-exclusively it wasn’t this complicated to figure out a font’s name. Sometimes I’d want to look up a “better” alternative than the generic font family for a particular system to add to the font stack, but it just wasn’t this irritating. At least, if it was, I never noticed it. I mean, I don’t recall ever typing “ArialBlack”, “Arial-Black”, “Arial Black”, which says enough itself. Or — maybe it never worked and I just didn’t notice. *shrug*
It’s relevant to a design I’m working on right now. The designer has used Helvetica and Helvetica Neue — these are not web safe fonts, though since they are installed on most Macs, I think a not-insignificant portion of people have them. So I’d like to make them available to the people that do. But so far, even though I do have some Helvetica Neue fonts installed, I can’t see them. I’d like for both myself and the rest of us dealing with the development to be able to see Helvetica Neue when I list it — if only to reassure myself that I still know how to write CSS!
(Ultimately I’m not sure how I’ll deal with fonts on this design; I haven’t finalized everything. Some @font-face embedding, sIFR, cufon, and/or image replacement will likely be used in addition to generally asking for Helvetica Neue when it’s present.)
Unfortunately, searching the web for how to do this has only answered a few of my questions and hasn’t given me quite enough information to feel fully confident about these font stacks. Basically, it raised more questions than it really answered.
The challenges are several:
- First, it seems that different systems — either having to do with the operating system or the browser — deal with spaces differently (or something)? Sometimes you need to take them out, sometimes you need to use hyphens.
- Second, the properties font-weight and font-stretch are inconsistently (and often incorrectly) supported.
#1 – Spaces?
One system might recognize “HelveticaNeue” and another “Helvetica Neue.” I found that much on the web, but since none of the posts explained why I’m not entirely sure which systems will need addressing in that manner and when. Or whether it actually has to do with spaces only, or matching post script names, or the browser, or something else. As a consequence I’m not sure if my assumptions on the names of some of these Helvetica Neue examples are right or not; particularly when it comes to, say, a light/condensed font. For example, one post demonstrated that Helvetica Neue Light should be rendered at least once as “HelveticaNeue-Light” — but what about Ultra Light? “HelveticaNeue-UltraLight” or “HelveticaNeue-Ultra-Light”? Anyone with insight how to consistently predict when to replace spaces in font names with nothing or with hyphens, please let me know…
#2 – Weights and Stretch
And, for various reasons, most of which seems to center around inconsistent support for more specific font-weights and the general lack of support for font-stretch, sometimes you need to declare the font-weight and font-stretch as the part of the font name in font-family, other times you can (perhaps) expect font-weight and font-stretch to work. I believe as a general rule you can expect CSS3-supporting browsers to begin to handle font-stretch (as it was taken out of CSS 2.1, and is [so far] back in CSS3). #1 of course has bearing on this, because if you want to get the right font, you’re going to have to get the name right: spaces, no spaces, hyphens, whatever…
And of course, you have to deal with the general problem of fallback fonts with similar x-height, weight, etc. Which I tend to skim over in real life, praying for luck, but I really should pay more attention to.
Grasping at Font Stacks
Helvetica Neue – Normal (No Stretch)
Helvetica Neue Black Font Stack
font-family: "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:800;
font-stretch:normal;Helvetica Neue Heavy Font Stack
font-family: "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:700;
font-stretch:normal;Helvetica Neue Bold Font Stack
font-family: "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:600;
font-stretch:normal;Helvetica Neue Medium Font Stack
font-family: "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:500;
font-stretch:normal;Helvetica Neue Regular Font Stack
font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:400;
font-stretch:normal;Helvetica Neue Light Font Stack
font-family: "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:300;
font-stretch:normal;Helvetica Neue Thin Font Stack
font-family: "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:200;
font-stretch:normal;Helvetica Neue Ultra Light Font Stack
font-family: "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:100;
font-stretch:normal;Helvetica Neue – Extended
Helvetica Neue Black Extended Font Stack
font-family: "HelveticaNeueBlackExtended", "HelveticaNeue-Black-Extended", "Helvetica Neue Black Extended", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:800;
font-stretch:expanded;Helvetica Neue Heavy Extended Font Stack
font-family: "HelveticaNeueHeavyExtended", "HelveticaNeue-Heavy-Extended", "Helvetica Neue Heavy Extended", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Arial Black", sans-serif;
font-weight:700;
font-stretch:expanded;Helvetica Neue Bold Extended Font Stack
font-family: "HelveticaNeueBoldExtended", "HelveticaNeue-Bold-Extended", "Helvetica Neue Bold Extended", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosBold', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:600;
font-stretch:expanded;Helvetica Neue Medium Extended Font Stack
font-family: "HelveticaNeueMediumExtended", "HelveticaNeue-Medium-Extended", "Helvetica Neue Medium Extended", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:500;
font-stretch:expanded;Helvetica Neue Regular Extended Font Stack
font-family: "HelveticaNeueExtended", "HelveticaNeue-Extended", "Helvetica Neue Extended", "HelveticaNeueRomanExtended", "HelveticaNeue-Roman-Extended", "Helvetica Neue Roman Extended", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:400;
font-stretch:expanded;Helvetica Neue Light Extended Font Stack
font-family: "HelveticaNeueLightExtended", "HelveticaNeue-Light-Extended", "Helvetica Neue Light Extended", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-weight:300;
font-stretch:expanded;Helvetica Neue Thin Extended Font Stack
font-family: "HelveticaNeueThinExtended", "HelveticaNeue-Thin-Extended", "Helvetica Neue Thin Extended", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:200;
font-stretch:expanded;Helvetica Neue Ultra Light Extended Font Stack
font-family: "HelveticaNeueUltraLightExtended", "HelveticaNeue-Ultra-Light-Extended", "Helvetica Neue Ultra Light Extended", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosRegular', "Arial", sans-serif;
font-weight:100;
font-stretch:expanded;Helvetica Neue – Condensed
Helvetica Neue Black Condensed Font Stack
font-family: "HelveticaNeueBlackCondensed", "HelveticaNeue-Black-Condensed", "Helvetica Neue Black Condensed", "HelveticaNeueBlack", "HelveticaNeue-Black", "Helvetica Neue Black", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif;
font-weight:800;
font-stretch:condensed;Helvetica Neue Heavy Condensed Font Stack
font-family: "HelveticaNeueHeavyCondensed", "HelveticaNeue-Heavy-Condensed", "Helvetica Neue Heavy Condensed", "HelveticaNeueHeavy", "HelveticaNeue-Heavy", "Helvetica Neue Heavy", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Arial Narrow", "Arial", sans-serif;
font-weight:700;
font-stretch:condensed;Helvetica Neue Bold Condensed Font Stack
font-family: "HelveticaNeueBoldCondensed", "HelveticaNeue-Bold-Condensed", "Helvetica Neue Bold Condensed", "HelveticaNeueBold", "HelveticaNeue-Bold", "Helvetica Neue Bold", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnBold', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:600;
font-stretch:condensed;Helvetica Neue Medium Condensed Font Stack
font-family: "HelveticaNeueMediumCondensed", "HelveticaNeue-Medium-Condensed", "Helvetica Neue Medium Condensed", "HelveticaNeueMedium", "HelveticaNeue-Medium", "Helvetica Neue Medium", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:500;
font-stretch:condensed;Helvetica Neue Regular Condensed Font Stack
font-family: "HelveticaNeueCondensed", "HelveticaNeue-Condensed", "Helvetica Neue Condensed", "HelveticaNeueRomanCondensed", "HelveticaNeue-Roman-Condensed", "Helvetica Neue Roman Condensed", "HelveticaNeue", "Helvetica Neue", "HelveticaNeueRoman", "HelveticaNeue-Roman", "Helvetica Neue Roman", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:400;
font-stretch:condensed;Helvetica Neue Light Condensed Font Stack
font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", sans-serif;
font-weight:300;
font-stretch:condensed;Helvetica Neue Thin Condensed Font Stack
font-family: "HelveticaNeueThinCondensed", "HelveticaNeue-Thin-Condensed", "Helvetica Neue Thin Condensed", "HelveticaNeueThin", "HelveticaNeue-Thin", "Helvetica Neue Thin", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif;
font-weight:200;
font-stretch:condensed;Helvetica Neue Ultra Light Condensed Font Stack
font-family: "HelveticaNeueUltraLightCondensed", "HelveticaNeue-Ultra-Light-Condensed", "Helvetica Neue Ultra Light Condensed", "HelveticaNeueUltraLight", "HelveticaNeue-Ultra-Light", "Helvetica Neue Ultra Light", "HelveticaNeue", "Helvetica Neue", 'TeXGyreHerosCnRegular', "Arial Narrow", "Arial", sans-serif;
font-weight:100;
font-stretch:condensed;Currently I am using an @font-face embedded font which is free, embeddable, and fairly similar to Helvetica, TeX Gyre Heros (found on Font Squirrel), as part of my font stack. A convention I am forming for myself is to use single quotes around my @font-face embedded fonts and double quotes around fonts I am hoping/expecting will be installed by the user, for at-a-glance reference. As you can see the stacks are almost prohibitively long and I’m still not sure they’re really going to work…plus, some of the fallbacks still need tweaking. Time to test.
- Windows XP/Firefox 3.6.2 works pretty well. I don’t have any expanded or condensed version of the font, however, so I don’t see it — meaning I also have no way to tell if my assumption on how to get those two showing up is working.
- Windows XP/Opera 10.51 seems to be afflicted by a bug of some sort. I found references to Opera @font-face bugs in the initial release of Opera 10 in 2009, but I think that’s supposedly fixed, so it seems to be a different problem. A lot of the fonts show up as serif. Except when I first open a page — it shows up as I’d expect. Then if I refresh it becomes Times New Roman. Open a new tab, different file, same fonts…Times New Roman. Close Opera. Open Opera with original file — right fonts. Repeat.
i’ve written “Arial Black” and “Arial Narrow” and have seen the differences against Arial, but definitely not consistently. jumping onto different boxes and monitors, and you’re right, who the hell knows. how many see it? how many don’t? is it worth the time for x number of users? etc.
i’m feeling this. i also love that you use numbers for font-weights. i grow ever so tired of explaining that to “web developers”, especially when they say use this exact same argument for why they use bold. so in effect, use whatever font-families you want yo, just make sure you have the default. but i don’t have to tell you that.
i remember reading double quotes were best and i’ve never seen them inline together or split by a -.
now i’m going to look up font-stretch and waste a few hours with it.
i know i didn’t even give you an answer here. nyah. schorry.
Thanks, though I don’t normally use numbers for font weights because normally it doesn’t seem relevant to the fonts I use.
Maybe Arial is a bad example, though I’ve never noticed any inconsistency when I used standard Arial variations. But take Times, the old standby. To the best of my knowledge it’s never been necessary to declare Times as: “TimesNewRoman”, “Times-New-Roman”, “Times New Roman”, “Times”… I don’t understand why it would be necessary for Helvetica Neue (or any other font, really). I do expect occasional minor variations in name, like “Palatino Linotype” vs. “Palatino,” but this nonsense of saying the same thing 3 times, once without spaces, once with hyphens, and once normally is confusing.
Ultimately if it works, that’s fine. But I wish I knew WHY it was necessary, so I could be (fairly) sure my guesses are correct. Or maybe I could even check the name to find out what is most likely to work on Mac, on Windows, etc. But it seems like a dumb practice to do that every time, with every font, “just in case.”
It was interesting in the case of Helvetica Neue that though “Palatino Linotype” (or any font name with spaces I’ve tried before) has always worked just fine, but this time to get Helvetica Neue showing up I had to type, “HelveticaNeue” without spaces. I can certainly see the filename has no spaces, but it came that way…
Thanks for exploring the problem, Rachael. I’ve been up against exactly the same issue. You might find this article useful:
From that, I’ve ended up with this font stack, which seems to be working ok:
font-family: "HelveticaNeue-BoldCondensed", "Helvetica Neue Bold Condensed", "Helvetica Neue", "Arial Narrow", "Arial", sans-serif;font-weight:600;
font-stretch:condensed;
Thanks for the info, Ben! Unfortunately I am fairly certain through my testing on my own system that your stack won’t work 100% for me.
As I mentioned in my posts I don’t have the condensed and expanded versions, so I’m having to guess without testing on them.
However, I do have bold normal stretch. And in order to get it showing up in Firefox (version at the time I wrote this post) and IE 7 I have to write “HelveticaNeueBold” rather than “HelveticaNeue-Bold.”
I included the hyphenated version in my stacks because other posts I read on the subject showed it. But for myself I had to add one without any spaces.
For that reason I am forced to assume “HelveticaNeue-BoldCondensed” wouldn’t work. It would seem likely to me it would either end up “HelveticaNeueBold-Condensed” or “HelveticaNeueBoldCondensed” if I had that version of the font.
That could be caused by an odd situation of porting over Mac Postscript fonts to Windows XP.
Unfortunately using “HelveticaNeue” like that – with no spaces – in your stack breaks in Windows browsers rendering sites unusable, illustrated here: http://bit.ly/af7viP
Personally, I think font stacks should be web-safe and then progressively enhanced with services like Typekit or Fontdeck.
Progressive Enhancement
I agree with you in principle about “progressive enhancement” for fonts. But not that Fontdeck, etc. are one-size-fits all, 100% of the time solutions.
Why should a user have to load javascript and font files if they have a font already installed? Ok, sure, appropriately written @font-face declarations will allow a locally installed font to be used. So that’s fine…(Although it seems likely that this little “font naming” problem would affect the @font-face local property.)
But then there’s all the bugginess I’ve encountered with @font-face usage. That just brings me back to font services. I get the impression that most of those services have written a lot of bugfixing stuff into their scripts. So again, another favorable reason.
Ultimately all I can say about loading javascript for this sort of enhancement and to fix font bugs is that it’s one of those less than ideal things where the benefits nevertheless outweigh the consequences!
So why am I not doing that? Well, for an in-development design where I just want myself and my team to see the font (which we all have it installed) that’s overkill. Also, unfortunately, not all projects will bear a monthly service fee for a font. My company does not already use these services and I am not authorized to make such purchases. Maybe we should and I can suggest it, but I’m fairly certain we’ll get a company subscription when pigs fly.
I can’t really blame the bigwigs, though. I have plenty of qualms with paying monthly service fees for using a font. I don’t have to pay monthly service fees for using a font on a flyer, in an image on a website, or in a PDF document. In many cases I’d rather fall back to Arial than pay per month for a font.
Plus, I don’t like using third party services I don’t understand. If I could write a Fontdeck myself I’d be more likely to use it. Not like I have the resources to write one. I mean that in the sense of knowing a lot more about the ins and outs of @font-face, the bugs, the fixes, etc.
But, really, where do you draw the line, Scott, about moving to a font service? At what point is it time to “progressively enhance” rather than using a normal font-family declaration? Almost anyone you could ask would call “Arial” a “web safe font,” but it’s not on some open source operating systems. If I recall correctly, a couple years ago neither Arial nor Times New Roman were standard Mac OS fonts. But Helvetica Neue is a standard OS X font, it’s one of the default display font for the OS! Apple users are not a negligible portion of the internet browsing population (your mileage may vary, obviously). That’s enough, for me, to make Helvetica Neue eminently eligible for old-fashioned font-family declarations with fallbacks!
“HelveticaNeue” Breaks Windows
However, you are incorrect about your assertion that “no spaces in the stack breaks Windows browsers” — at least, all the time. I don’t observe the same effect on my system. I use Windows XP and Windows browsers (Internet Explorer 7 was included in my tests). As I mentioned to the previous commenter I had to remove spaces to see the font. It did not break anything; it was the only way to get it working. If the effect in your screenshot sometimes occurs I would love to find out why, but my direct experience contradicts the idea that such a thing happens in all cases. Do you use Windows 7, perhaps?
Apologies…
To readers, I’m sorry I can’t provide a more final answer
I need to do some research to find an answer about how to account for the fact that common font names seem to differ on different systems. Evidently not just between OS’s, either! It’s crazy to me that I have to specify “HelveticaNeue” on my work computer, but doing so will badly break font rendering on Scott’s computer. Unfortunately, I just don’t have the time right now for that research, but I will update this post if/when I get to it.
[...] my search turned up a very thorough blog post by Rachael Moore fittingly titled Declare a Safe Font Stack With CSS Font-Family?, the upshot of which was that different browsers use different standards for naming fonts and font [...]
[...] Declare a safe font stack with CSS font-family? » Rachael L. Moore (tags: fontstack rachaelmoore) [...]
[...]The sequel to “Declare a safe font stack with CSS font-family?” by Rachael L. Moore, “Finding the right font name for a CSS font-family font stack” answers some of the questions left unanswered by Rachael’s previous font name research. [...]