Grow your CSS skills. Land your dream job.

Sans-Serif

Published by Chris Coyier

Have you ever written this?

body {
  font-family: Helvetica, Arial, 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:

body {
  font-family: Sans-Serif;
}

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.

Comments

  1. shoutyman
    Permalink to comment#

    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.

  2. Permalink to comment#

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

    • shoutyman
      Permalink to comment#

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

  3. Permalink to comment#

    @Andy Not if the site only looks properly with that font.

  4. GreLI
    Permalink to comment#

    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.

  5. Sean
    Permalink to comment#

    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.

  6. Permalink to comment#

    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.

  7. All those years spent creating font hierarchy… this is gonna be a tough habit to break!

  8. Permalink to comment#

    On PC’s, even if they have Helvetica it can look worse that Arial for whatever reason

    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.

    • Permalink to comment#

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

    • Not looking so great on PC Vista with myriad pro installed, http://i.imgur.com/e92sz.jpg

    • Myriad Pro installed, PC, Win7, Fox4:

      http://image.freecy.tk/images/188_SNAG_0036.png

    • Andreas Schamanek
      Permalink to comment#
    • 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.

    • fot rendering u can also try CSS command text-rendering …

      https://developer.mozilla.org/en/CSS/text-rendering

    • Choice quotes from Typekit support:

      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.

  9. Permalink to comment#

    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)

  10. Spreng
    Permalink to comment#

    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!

  11. Claude
    Permalink to comment#

    I have used font-family: ‘Helvetica Neue’, ‘HelveticaNeue’, Arial, Helvetica, Garuda, sans-serif; but some clients with Windows see all in bold und italic.

  12. Digitalus
    Permalink to comment#

    Cool tip. :)

    Also, “Have you ever wrote…?” Really??

  13. DJ
    Permalink to comment#

    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

  14. Mike
    Permalink to comment#

    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.

  15. Felix
    Permalink to comment#

    […]it can look worse *than* Arial[…]

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

  17. d5tryr
    Permalink to comment#

    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 ;)

  18. i got many tricks from your post and above comments. thanks

  19. nice article, good stuff

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

    • Fernan
      Permalink to comment#

      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

  21. Sometimes it’s good to re-think some default tricks that you ‘just’ do. Thanks for that.

  22. Permalink to comment#

    @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/

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

    • Jack Nycz
      Permalink to comment#

      Dude, I can’t even find the navigation on your website – why are you giving people tips?

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

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

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

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

    • Ant
      Permalink to comment#

      We russians have Arial as default in browsers, thoguh I changed it to Calibri.

  27. Permalink to comment#

    Hmm, i got a decent bug with Helvetica anyway (on my PC ) Every Site with Heletica Neue as first choice in CSS looks so damn ugly. it picks a super bold italic HN Font Type…. Anyone got the same “bug” or a solution for that?

  28. Ant
    Permalink to comment#

    Wikipedia is the only site where I seen it used. Most of the time it’s better to let users decide what font they want to use, instead of forcing Arial.

  29. Haha I saw that on the video too. I was like “genius!”

  30. Thank you for sharing, it’s really new idea, for me I prefer keep everything consistent, it’s good for branding.

  31. i’ve been using that for a while now, it’s nice. :)

  32. Missy
    Permalink to comment#

    I’d rather use the shortform too. I really don’t like the way Helvetica renders on Windows XP. I my own site renders beautifully on a Mac with Helvetica and slightly less beautifully on a PC with Arial, then I’m happy.

    I would recommend using a CSS reset though.

  33. LectroMan
    Permalink to comment#

    Hmmm. I wonder about the sum total of electricity that will be burned up this morning just in this particular discourse alone. All the little computers out there gaily humming away, all the little fingers pecking away, all the little consoomers cybershouting, “Me-me-ME! Look at ME! Here’s what *I* ‘think’! Here’s what *I* ‘believe’!” As the planet slowly suffocates under a hideously mucilaginous coating of its own cybersplooge.

  34. Nico
    Permalink to comment#

    Guess I’m a bit late in the discussion, but I couldn’t leave it unreplied. There is a much better solution if you don’t want to trade off control of your font-stack for solving font rendering problems with IE: use IE conditional comments.

    Serve your stylesheet containing the Helvetica first font-stack then serve a custom stylesheet with <!--[if IE]><link type="stylesheet" href="ie.css"><![endif]--> to IE overriding the font-stack with Arial first.

    This way everyone will get Helvetica except IE users and your type will be more likely to look as you intended to.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".