Sans-Serif
You’re all like: “Helvetica is the most awesome so I want that first, then Arial for PC’s since hey it’s pretty close, then fall back to whatever McSansSerif for crazyputers with like zero normal fonts installed.” Turns out this is way better:
Macs will get awesome Helvetica by default. On PC’s, even if they have Helvetica it can look worse than Arial for whatever reason, so this way they get Arial by default. And you’re still covered by the generic keyword. Shorter, easier, yay. Thanks to @mathias for pointing out the specific part (29:32) of this video of Paul Irish talking HTML5 Boilerplate.
If you want to expand out that Helvetica stack and use some nicer variations when available, do see this.Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.
Comments
That’s only true if the browser preferences happen to be set that way. What “sans-serif” says is “use whatever the client has set as its default sans-serif font” , which out of the box may be Helvetica and Arial, but may not, and it may be modified by the user. On my Ubuntu machine that’ll end up being rendered in the Ubuntu font. The “sans-serif” value just says “override the browser’s default preference of serif vs. sans-serif”, it doesn’t say anyhing about picking Arial over Calibri or anything else.
@shoutyman: isn’t that a good thing though? If I’ve gone to the trouble of specifically setting Ubuntu or Gill Sans or even Comic Sans as my sans-serif font, it would be nice if the site respected that choice.
Absolutely agree. Go further: if you’re hooked on serifs set it to Georgia or something. And if someone’s setting fonts for readability reasons or plain stubbornness there are of course plenty more options such as never using the site’s own fonts. My impression, though, was that the gist of the post was to aim to use “whichever of Helvetica/Arial renders better on any given client”, though, which is a common aim (eg branding may dictate the use of one or the other with the other as a next-best fallback), and personally I don’t see “font-family: sans-serif;” as the right way of doing that. (I think bfred.it’s tactic below is a good one.)
Yep, even more. If you have other font set as default in browser (e.g. great russian free font “PT Sans”), it will be shown.
If you are going to start with this, then we as web folk should never change the color of links, or the point size of headers, or the background color, right?
Completely agree with this. Yes, a site may be intended to look a certain way, but if a site is only supposed to look ONE way with NO customization and wiggle room, aren’t we stepping backwards? What would the point be of having the option to change your default fonts if it had no purpose? I personally do not toy with this, but Sean brings up a good point. Conformity? no. If somebody sets the font that they would like for a fallback, that is their fallback. I would say this method is vague, but if you care to have the right setup/type of computer and files there is no problem.
Never thought of this. I heard about the ugly rendering of Helvetica on PC’s so I’ve been using the font stack “Helvetica Neue”, Arial, sans-serif;
This will show Helvetica Neue on Macs (all of them have it) and Arial on Windows since most PC’s don’t have it
Though for simple font stacks I’ll just use sans-serif;
I followed that exact same line of thinking until I saw a windows colleague with Helvetica Neue installed. It appeared to be displaying Helvetica Neue-Condensed (or similar), rather than the medium weight/variant. Disappointing. Since then, I default to using sans-serif for copy where the typography is not intended to communicate beyond the content of the words, while continuing to use font stacks for headers. It’s a cheap way to keep expressive type in prominent places while reducing the risk of serious problems across the majority of content. (Of course) audience and needs vary.
Speaking of which, does anyone at css-tricks know why the site looks so horrible in Chrome and Firefox? The font looks just awful.
The default body font, Myriad Pro, is not web safe. The best font tool for the web I’ve seen yet is at http://www.typetester.org. It gives you the web safe list, the Windows/Mac default lists, and it lets you preview what different sizes/line-heights/letter spacings/color will look like.
I am in love with the way this font is rendered for me. (mac with CS5 fonts installed – also Chrome btw) Only use web safe fonts? That’s the whole point of having font stacks… I think using Myriad on a webpage where most users have Adobe products installed is pretty ingenius. Now if we could only get pretty font rendering to all computers.
It is Myriad, but served through Typekit: http://typekit.com/fonts/myriad-pro You can see browser samples on that page of how it’s supposed to look. Not sure why it would look any different but it’s definitely possible either they or I are doing something wrong (for certain combinations of browser/platform/version).
Looks awesome in firefox and chrome for me. What is your OS and browser versions? From what I understand and from what I have done Fonts served via typekit or the google API or even FontSquirrel appear normally to be in their Best State in firefox and Chrome, and may degrade in visual value on other browsers. Im just curious.
Windows XP browsers do not anti-alias text unless you have ClearType turned on for the SYSTEM. Anti-aliasing is turned on automatically on IE 7 and up, and FireFox 4. This has been the biggest blocker for using custom fonts for small text. Soon, this won’t be as big an issue…
This appears to an issue with anti-aliasing being turned turned off no some Windows computers. Cleartype is not *on* system wide on these computers and so Firefox is viewing text with no anti-aliasing. The bad news, this is a user setting and it’s hard to change those. The good news is that it’s pretty rare and becoming more rare as more people upgrade to IE 8. If this is something that interests you, we wrote a series of blog posts that explains the intricacies of font rendering across different platforms and devices: http://j.mp/typerender
… if you’re a Windows XP Firefox user who has never modified your smoothing settings – and you happen to install IE8 – you would subsequently see ClearType-antialiased text in Firefox.
I’m certain I saw something only recently on why you shouldn’t use san-serif by itself… Either way it’s basically saying it leaves it open to some weird interpretations in some circumstances. But if you’re not fussed, then cleaner code is nice cleaner code! (In fact, having a quick check in Opera Mac, it looks like it falls back to Lucida Grande)
I didn’t realize I could set sans-serif and it would only show the default fonts. I’m going to use this on my next website project. Thanks for the tip Chris!
I have used font-family: ‘Helvetica Neue’, ‘HelveticaNeue’, Arial, Helvetica, Garuda, sans-serif; but some clients with Windows see all in bold und italic.
I’m a bit new to this but font’s have been a source of frustration for me. your previous post called for: font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif; ; now, this seems to say “axe the Helvetica and Arial and only use sans-serif.” So, does that transpose into leaving out the Helvetica and Arial in the first code and leaving the remainder? What about “Lucida Grande” – I notice that it was behind Helvetica an Arial – BUT, is it still better than simple “sans-serif” on ALL machine types? And sorry for being so dense, but: I also notice that you call for a size of “300” – I’d like my web to have the best readability it can but don’t have all of them installed on my computer so can’t see for myself. Are all of the equivalent in size? I notice that many fonts do require a tweaking in the size for readability. Thanks for the help
While shorter may be easier, and knowing how the browsers treat things is good and all. I really think being explicit outweighs the short and easy implicit method. You’re also not guaranteed that browsers will default to the same values in the future.
And what if a PC User has Helvetica installed? I own a Mac, but there are designers out there using Windows. So, this is the only right way: font-family: “Neue Helvetica”,”Helvetica Neue”,helvetica, arial, sans-serif;
I’ve been doing this for years, after I stopped looking for pixel perfection across browsers I instead focused on trying to create pages flexible enough to accommodate browser inconsistencies. It’s a logical conclusion to let go of targeting specific fonts at all. I was chuffed when I saw that Paul Irish had come to the same conclusion… also just to clarify a point on one of the previous comments, Shoutyman seemed to be suggesting that sans-serif will target the browsers default, unstyled, font. This is not the case, if your default font is Times New Roman, sans-serif will overwrite this with Arial (or Helvetica, or what have you). Apologies if i misinterpreted the original comment.
it “override the browser’s default preference of serif vs. sans-serif” but chooses the default sans – since Times is serif it gets overridden on topic: i belive setting specific fonts is still best if you want an exact look – specially because of possible future differences in defaults (plus kids setting their mom’s default to comic sans 😉
Good point! But ‘Helvetica Neue’ is nicer than ‘Helvetica’, so I prefere: font-family: ‘Helvetica Neue’, sans-serif; what gives you: ‘Helvetica Neue’, Helvetica on Mac, and ‘Helvetica Neue’, Arial on PC. I don’t care about minority changing default browser font setting ’cause it’s less than 1%.
Helvetica Neue does not renders how it should on a lot of browsers including chrome on XP (sometimes) anyways IMO is one of the worst fonts you could choose for a project
@claude We have this problem when testing on our Windows XP machines. We never found out why this occurs. Here’s another useful link discussing font stacks: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/
Writing your stylesheets to be dependent on defaults on either Mac or Windows is too risky for the simple reason that those defaults could change at a later date.
The defaults could change, but this is a risk-averse approach. Default environment fonts are chosen for their unexpressive, consistently readable output. If specific x-height or pixels-per-em are required, it’s unlikely default fonts are even a part of the discussion – which is a wholly justifiable approach, just a different one that varies by project.
While this is good for reducing the font stack and giving the user control, I do wonder about how you would check that the site is useable across the myriad combination of platforms and browsers checking that the fonts are readable and the site usable? Just because someone can set their default font to comic sans doesn’t mean they should. Obviously there are certain users who may benefit from using specific typefaces, but a typeface is part of branding and the overall visual ascetics of a site. As an example would a story on news.bbc.co.uk carry the same gravitas if it was set in comic sans? Would it be as readable? I think not. While I think that the web is an amazing transformative form of communication which lets all be equal (users and businesses alike), discussions like this makes me agree with Sean’s comment about changing colour and font size and think that we might as well eliminate all styling.
For the sake of saving half a line of code I think you’re better off defining an actual font stack. Typography is an essential component in web design, one which we spend several hours tailoring the rest of the design around. To leave it as an unknown quantity is a bit too scary for me!
maybe a stupid question but nonetheless how does this work russian, chinese etc. settings – taking for granted they might have their fonts set as browser defaults …