is an archive and is no longer updated, you can now find me at →

03 17 2009

Almost two years ago, I wrote a little diddy about expanding your realm of ‘web safe’ typefaces to include slightly less common items. But why not just go for the throat?

While it may not work for everyone, I know most people who visit this site are probably at least moderately interested in design, or more likely: are designers. I think it’s safe to say a good percentage of us are probably running around with Gotham installed on our computers these days; or Helvetica Neue, Avenir, Archer, or any other bits and bobs of popular typefaces.

So in the midst of waiting for CSS3’s @font-face to come save the day, I’ll be making use of what current technology exists to show the best possible design to the folks who can see it. And for those who can’t, you still get the old Helvetica goodness. That’s the beauty of the pre-existent functionality of font-family. So let’s play with what we have now, while we dream about tomorrow.



  1. Nice.

    Mainstream font-face include is on the way, slated for firefox 3.5 (the next release), making IE the only major browser to not support it.

    It’s almost here, can’t wait:

  2. I was thrilled to read about the features of CSS 3, and I am now using different types depending on the OS on my portfolio. I’d be happy if both OS X and Windows had the same fonts to choose from, but CSS 3 seems to be the answer to all our questions.

  3. And for those who can’t, you still get the old Helvetica goodness.

    Or if you’re on a PC, Arial ;)

    Luckily I’m on a Mac with Gotham installed and the changes look lovely.

  4. @jakedahn: While I’m excited for @font-face, there are boat loads of licensing implications to solve before we can truly choose any typeface we’d like — even with the technology available.

  5. Dude. Yes.

    This is so great.

  6. Hmm, I have Gotham on my PC, but it looks kinda dire on here for some reason. Really pale and ‘bitty’; not too nice to read :(

    Drop me an email and I can wing you a screenshot over.

  7. I was waiting to get home to check this out on my PC, but I suspected that Gotham on PCs might be an issue. I’ve noticed similar issues with any font that is not native to windows OS, Including even Helvetica.

    I’ve seen a few hacks involving using Javascript to detect the OS and load different CSS files depending. But I generally will stick with “Arial, Helvetica, sans-serif”, or some equally bland equivalent, with a Windows native font always first in the declaration.

    It’s just too unpredictable otherwise.

  8. Amen to that.

    I will say, when I’m working to really get the most out of type, each font requires different treatment in size, line-height and letter-spacing. It’s a shame these values have to be applied across different fonts when we’re running with whatever the user has installed.

  9. Cool, I’m having a similar thing myself at the moment.

    I’m working on a project for a production company, so I know that a significant portion of visitors will be mac based and/or have the adobe suite installed. This gives me a lot great flexibility in choosing fonts that people will actually see.

  10. @Harry and @Gabe Thanks for the heads up. I’ve added a bit of javascript to serve a CSS file which will change smaller type (such as the body copy, footer, and navigation) back to Arial on PC’s for legibility.

  11. I’m on a PC with Gotham installed, and I have to say it looks lovely even with JavaScript disabled. This is a terrific idea; I take my hat off. I’m all for this stuff.

  12. Palatino and century looks quite interesting. Century looks a bit too old styled for “normal” websites, but it should be definitely more popular.

    CSS3 bring really interesting new functions soon. Heh, I love this changing technology :-)

    Thanks for this content.

  13. I think the title of this post should be “Font Stack, Shmont Schtack”. I can’t find a definitive rule book on blank-blank-schmank-schmank-ing a pair of words, but I prefer a simple addition of “sh” and an optional auxiliary consonant (preferably an M) on words 2 and 4.

    For instance:
    Baba Booey, Shmaba Schmooey
    Adolf Hitler, Schmadolf Schmitler, Schmastheria Shmotcom

  14. Mainstream font-face include is on the way, slated for firefox 3.5 (the next release), making IE the only major browser to not support it.

    That’s hardly fair to say - in fact, Internet Explorer has supported @font-face for years, only in the “wrong” format.

  15. Please add Corbel to font stack for Windows Vista/W7 users. It’s superior than Arial, better readability.