Did you know that Web Designers have many dreams? We dream about the end of browser wars, death of IE6, we hope to see the end of raster wars and plead our case to powerful authorities to release more fonts into the public domain or at least distribute new Vista typefaces for other platforms.

While we all wait for the world (or at least the World of Wide Web) to become more beautiful and complete, and beseeching for those wishes to come true, some designers take actions by actually saying good bye to IE6 and dropping support for that browser-dinosaur or doing their best and still managing to produce web sites with such a jaw dropping stunning web typography that would make even some leading print publications green with envy.

Last week I featured dozens of web sites that use only one of the ten core web fonts, Georgia, to delight our eyes with beautiful typography.

Today I’ll be showcasing sites and designers that went down a different path, and by building advantageous CSS font stacks, they recruit the help of nontraditional for Web fonts that allow to spruce up their designs and take them to the next level.

Must read articles on CSS Font Stacks and Font Surveys

Several helpful articles were written about CSS font stacks, yet still many designers fail at implementing them correctly when specifying font names in CSS. Though mastering CSS font stacks is not a rocket science, it’s not as easy as pie either.

Back in 2004 Jeff Croft was urging designers to to open their mind and consider using some of the other typefaces that are often pre-installed on computers these days. He compiled a list of 20 useable typefaces along with alternative suggestions that could be used in the font family sequence. Most of the fonts on the list were Mac only, with some that would be hard to find decent alternatives for on other platforms, but it was an eye opening move.

The two hardest obstacles that designers face in building efficient font stacks are the knowledge of the best alternatives to the chosen ideal typeface that exist on other platforms and the percentage (backed up by a reliable statistics) of systems where that font is installed. Code Style has conducted and published a number of helpful font surveys to list the most common fonts on Windows, Mac and Linux. Also VisiBone has published its own Font Survey Results, based on browser shares, by testing 800 systems: 614 PC, 164 Mac, 22 Linux. Though not completely reliable, nevertheless very handy when putting the font sequence together.

In November 2007 Megan McDermot compiled a Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows. Then Richard Rutter has developed a very helpful Font Matrix and published a valuable article on 24 Ways: Increase Your Font Stacks With Font Matrix.

Last year Nathan Ford from Unit Interactive has stirred up heated debates with his article Better CSS Font Stacks, where he went an extra mile and put together a comprehensive compilation of various font stacks for body copy and headlines. He also offered a PDF for download with the examples of both titles and copy, set in different font stacks.

Christian Montoya was appealing to web designers to add Windows Vista fonts to the stylesheets and has put together a PDF document with Windows Vista fonts compared to typical Web fonts.

Recently Michael Tuck has written a very resourceful article on SitePoint where he presented us with 8 Definitive Web Font Stacks. He’s put lots of thought and work into his research, but unfortunately SitePoint has drastically cut down the article, though gave Michael an option to follow it up with Part 2.

You would think that after all these online publications and the encouragements from fellow designers to think outside of the core web fonts box and experiment with font stacks, we’ll see an explosion of sites that demonstrate the use of unexpected typographic choices. Yet the majority of designers still prefer to go the more traditional route with image replacements and sIFR when using uncommon for Web fonts.

Web Sites with font stacks that stand out

For the last couple months I’ve been collecting sites that exhibit the use of typefaces that are not part of the core web fonts. I won’t be talking too much on whether or not the designers have built efficient and proper font stacks for those site, I will simply present them for you and hopefully we can start some discussions in the comments around the efficiency of those font sequences and perhaps some alternatives.

First choice: Baskerville

First time I saw the use of Baskerville on Web was Jon Tan’s magnificent site. I knew right away that I will use this gorgeous typeface in Inspiration Bit’s new design. Hence, you see it scattered all over this site: in headings, post excerpts, recent posts at the top, personal bits and numerals. Since Baskerville comes pre-installed on Macs only, designers often list it with Palatino Linotype as one of the fallback choices.

JonTangerine

JonTangerine

Jon Tan's personal site is a textbook for beautiful web typography

Different design elements get special attention on Jon Tan’s site, so you’ll see that Baskerville, Cochin, Georgia and Times New Roman are all graciously represented there. Here I’ll show you just a few of his CSS font stacks (you can read a complete “investigation” of Jontangerine in one of my previous articles Behind The Scenes Of Exquisite Web Typography):

#aside h2 {
font-family:baskerville,'palatino linotype','times new roman',serif;
}
.personal-note p {
font-family:cochin,baskerville,'palatino linotype',georgia,serif; font-style:italic;
}

Designr.it

Designr: Piotr Fedorczyk

Piotr Fedorczyk is pushing the envelope of perfection with his constant design tweaks on Designr.it

Piotr Fedorczyk has set Baskerville for the body tag and uses it for everything on his stunning web site (once again, you can read a more complete review of Designr in another installation of Behind The Scenes Of Exquisite Web Typography series):

body {
font-family:Baskerville,Georgia,Cambria,Times,Times New Roman,serif;
}

Andrea Gandino

Andrea Gandino

Reading on Andrea Gandino's web site can be compared only to devouring a beautiful book


Andrea Gandino’s site is a work of art and fiction at the same time. Everything, starting from the paper textures background to typeface choices to exquisite design details, make this site look more like a precious book. Besides relying on Baskerville for styling headlines and dates, he uses Adobe Caslon Pro for navigation and headings in the content:

#navigation li a, .text h4, .content .text h3, .content h3 {
font-family: "Adobe Caslon Pro", Baskerville, Georgia, Palatino, "Times New Roman", Times, serif; font-style: italic;
}
.entry .title, .content .title {
font-family:Baskerville,Palatino,Georgia,"Times New Roman",Times,sans-serif;
}

Travis Gertz

Travis Gertz

Look forward to seeing Travis Gertz's new experiments


Travis Gertz has decided it’s time to play with his designs, by applying concepts of art direction. His first experiment is set entirely in Baskerville:

body {font-family:Baskerville,Times New Roman,Times,serif;}

Natalie Jost

Natalie Jost

A beautiful site where typographic choices add to its serene atmosphere


By setting the body tag to Baskerville, Natalie Jost gets even her (and site’s) name and tagline displayed in Baskerville. She also uses Verdana on the homepage, Georgia for the form and Frutiger for occasional headings set in h3.

body {
font: 100% Baskerville, Georgia, Times, Times New Roman, serif;
}
h3 {
font-family: frutiger, arial black, arial, sans-serif;
}

First choice: Palatino/Palatino Linotype

Palatino, along with its Windows alternative Palatino Linotype, is slowly gaining attention from designers. Sometimes they like it so much that use pretty much no other font but Palatino in their stylesheets:

Triimpuls

triimpuls

Palaitino dominates on this site


With the exception of the text in the navigation and comment form, the rest of the content on Triimpuls is displayed in Palatino:

body {
font-family:Palatino,"Palatino Linotype",Georgia,"Times New Roman",serif;
}

The Museum of Innocence

The Museum of Innocence

This minimalistic site is set entirely in Palatino Linotype

p {font-family:"Palatino Linotype",Palatino,Georgia,serif;}

First choice: Lucida Grande

Lucida Grande is becoming a very popular sans-serif alternative to the usual suspects, Verdana, Arial or Helvetica. I too opted on using it for all my auxiliary text in site’s navigation and sections.

Bright Creative

Bright Creative

Gorgeous grunge background, though the body text is not very legible

For his company’s web site Dave Shea is using Lucida Grande for the body copy, while styling all headings in Georgia, that’s preceded and replaced by Candara on Vista machines:

body {
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
}
h2, h3 {
font-family:Candara,georgia,serif;
}

Jason Santa Maria

Jason Santa Maria

JSM goes all the way with his art direction: sIFR, image replacements and different types.

Jason Santa Maria is experimenting with many different typefaces on his remarkable site, as well as various methods for displaying type. However the body text in the master CSS is set in Lucida Sans Unicode/Lucida Grande:

body {
font-family:"Lucida Sans Unicode","Lucida Grande","Lucida Sans",Verdana,Arial,sans-serif;
}

I Love Typography

I Love Typography

iLT got a fresher look with its recent design updates

John Boardley has recently updated the look of iLT and injected more Lucida Grande to go along with Georgia. He might’ve also inadvertently started a petition to bring back the curly brackets for his date styling.

.postMeta, .byline, #middleCol {
font-family:"Lucida Grande",geneva,helvetica,sans-serif;
}

Sundance Festival

Sundance Festival

Sundance Festival comes with a surprisingly well organized layout for such a busy site


Another site with lots of sIFR and image replacements for display fonts, but the main typeface used is once again Lucida Grande:

body {
font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Geneva,Helvetica,Arial,sans-serif;
}

Other font choices

Here are examples of sites with miscellaneous font selections and interesting CSS font stacks:

Vitor Lourenco

Vitor Lourenco

How about a lighter version of Helvetica Neue, and lots of it?

body {
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,arial,sans-serif;
}

Twisted Intellect

Twisted Intellect

Glorious simplicity at its best


Praiseworthy attention to details for what’s remained from a blog. Notice the <span class="oolig"> for the intertwined “oo” in the link to Facebook:

body {
font-family:"Adobe Caslon Pro","Hoefler Text",Georgia,Garamond,Times,serif;
}
.oolig {
letter-spacing:-0.2em;
margin-right:0.2em;
}

Stories & Novels

Twisted Intellect

Franz Neumann's exquisitely crafted site for online reading

body {
font-family:"Adobe Garamond Pro",Georgia,serif;
}

Max Voltar

Max Voltar

Tim Van Damme's newly re-designed personal site is enviously striking

Tim Van Damme’s brave approach to Web Typography is awe-inspiring, Gill Sans for titles adds to the regal look to the site:

h1, h2, h3, h4, h5, h6 {
font-family:"Gill Sans","Gill Sans MT","Helvetica Neue","Helvetica",Arial,sans-serif;
}
body {
font-family:"Lucida Grande","Lucida Sans",Verdana,sans-serif;
}

Type Tweets

Typetweets

A must place to go to for all typophiles

I wonder why Kyle Meyer decided to mix serifs with sans-serifs in his CSS font stack for Typesites? I guess it’s okay in this case, as the entire page relies on one declaration, and because of the smart layout no matter which font is picked up, it would still look good.

body {
font-family:"Lucida Fax",Georgia,Helvetica,Arial,sans-serif;
}

Recent Bits
Related Bits
5 ways to get inspired
Motivated and inspired
how to get inspired
About
Why Do We Learn And What?
Behind The Scenes Of Exquisite Web Typography – Part Two
Get inspired by Inspiration Bit
Meticulous Design: Dramatic Headlines
Comment Bits

26 Insightful Bits in response to “Striking Web Sites with Font Stacks that Inspire”

  1. Johno

    Fantastic post, Vivien. And it has inspired me to take a closer look at the new types bundled with Vista & Win 7. Once I have windows running on virtualbox on my Mac, I shall reappraise my own font stacks.

  2. That is a pretty picture of those wooden type blocks :)

    Baskerville is indeed beautiful and it’s a real shame only Mac users can enjoy seeing it on web by default. However, I have mixed feeling when it comes to setting Palatino Linotype as a fallback for it. Palatino is definitely the closest web-safe font similar to Baskerville but I’ve had some font-size inconsistencies with it in IE7. What I mean is that, unless I specified a different font-size only for when Baskreville was not present, text seemed to take up a lot more space than set in Baskerville on a Mac. I wasn’t exactly pleased about it. Hence I went for Georgia.

    Yet another great article, Vivien. I enjoyed it a lot. And thanks for the Designr love :)

  3. Hi Vivien,

    It is really nice to see someone noticing my site, but I did not design the WordPress theme. The theme is called “Boumatic” and was created by Allan Cole. Most theme designers add a credit and link back to their own site and while Allan does give credit to the templates from Thematic that is used, he doesn’t give himself credit in his own theme. I’ve added one in the footer for him and it is worth taking a look at his other themes. All are wonderful!

    http://allancole.com/
    http://allancole.com/wordpress/themes/boumatic/

    Michael

  4. Awesome, informative article. Thank you for featuring my site alongside such excellent design. (Even though the search box is breaking in your screenshot. My fault–I gotta get cracking on that redesign.)

    I actually chose Courier for my headings because the chances of users having Rockwell Bold was pretty slim, and Courier managed to look almost slab-serif when set in bold uppercase.

    The new site will have some more elegant type though, I think. I’ll be sure to let you know when I’ve relaunched.

    Thank you again for the link. Excellent article.

  5. Im sorry for not posting more often, Vivien – but I sincerely enjoyed this article, even though the subject isn’t new, but somehow overlooked by frontend developers and should be mentioned time and time again.

  6. Another amazing post! If there is anything to be admired in web design it is the great use and display of type. Thank you for an outstanding collection.

    I think Inspiration Bit should be added to the list! Every detail on this site is wonderful.

  7. More well-researched aggregate in the grand iB tradition, Vivien. Thanks!

    Another Palatino typographer worthy of mention (although he’d never call himself that) is Señor Funkatron, Ed Finkler—the developer of Twitter client, Spaz—who uses it to great effect on his blog.

  8. Thanks everyone for your comments and kind words.

    @Johno: How did it go with the Windows 7 installation on your Mac’s VM? I’d like to give it a try as well, do you have any warnings for me that I should watch out for during the setup, any advice?
    I need to revise my font stacks on iBit as well, I need to add some Linux alternatives as well.

    @Piotr: Thanks for the compliments on my alphabet blocks pic. Now I can write them off as my business expense rather than toys for my daughter ;)

    Georgia is considerably larger than Baskerville, so I went with Palatino Linotype as my fallback. IE7 users should switch to FF ;) But thanks for letting me know about the issue, definitely something to keep in mind.

    @Michel Biven: Thanks for letting me know about the Boumatic theme and Allan Cole, it’s always nice to find Worpdress theme designers who pay more attention to typography than fancy graphics.

    @Vincent: Please, do let me know when you launch a re-design of your site. Very curious to see the new direction. FYI, the screenshot I took shows how your blog looks in Firefox. Good luck with the re-design.

    @Esben Thomsen: No worries. I too wish I had more time visiting other blogs and commenting there. Always a pleasure to read your comments here, though ;)

    @Deb Pang Davis: Even though I didn’t include iBit on this list, I did mention the fonts I’m using here. But thanks for your compliment, very sweet of you to say so about iBit’s design.

    @Jon Tan: Thanks so much for the link to Funkatron. I remember visiting this site, but it was long before I got an idea for this post, hence didn’t bookmark it. I really like how he went with a lighter grey colour for the text on a dark grey background, it turned out quite legible, plus the larger font size makes Palatino look really great there.

  9. Love to see my design being showcased here, Vivien (the triimpuls.de). Really appreciated.

  10. Congrats on the Smashing Mag mention Vivien. When my site was referred to (#29 in a list of 30 themes, no less!) it sent an eye-watering amount of traffic, so I can see why you had problems yesterday.

    Another interesting use of Baskerville/Garamond (or Georgia on Linux :( )—Andrew Pendrick.

    It is, of course, a really good thing to see that designers are experimenting with text on the web, rather than resorting to image replacement.

    Oh, and another effective background image :)

  11. Hi, just drop by to deliver a news you may (yet to) know: your 404 page has been featured at Smashing Magazine: http://www.smashingmagazine.co.....more-time/
    Cheers.

  12. @Daus: You’re very welcome. I missed your personal site in my Georgia feature, but glad came across your work for this feature.

    @Leon Paternoster: Thanks, glad you liked the image. I even got asked to use this post’s featured photo in a presentation on font stacks, was very flattered ;)
    Thanks so much for letting me know about Andrew Pendrick’s site, very elegant.

    @krizcpec: Thank you ;) I actually found out about that not long before seeing your comment. I’m quite surprised though that SM featured iBit’s 404 page, as it’s still on my To Do list for styling & formatting.

  13. I find the use of unorthodox font quite strange – how many people will have a copy of Hoefler text on their computer ? And how many will only activated it while working with it, and not much else ?
    I recognized the need of a better font system for the web. I want to see better things. But for now I can’t tell people to buy a 299$ font set just to see my site, it’s insane.
    I’d like to be able to set a website in Archer. Or Gill sans. Or anything else, it would be so cool (even if most of the website will be in comic sans or another crazy thing like that).
    But we need to change how we distribute them, and no, hoping people will find this by looking at your css then activate it so they can finally see how well you’ve set your font, not good.
    Tell you font supplier about it. Wrote to Adobe, Mozilla, Microsoft. But this ? Even as a font nut I have great doubt.

  14. @Sébastien: I agree with you on the need of changing the fonts distribution process, but I’m afraid you misunderstood the point of this and other related articles. It’s not about using a fancy commercial font that only a few people in the world might have, it’s about expanding CSS font stacks with the alternative fonts that come pre-installed on the majority of machines due to various ways: with the Office, Adobe CS installation, browsers and the OS themselves. It’s about giving our users the best reading experience, about knowing which fonts render better on different platforms, it’s also about not forgetting about font alternatives for Linux users.

    Though it won’t make sense to specify Archer in your font stacks, you can go ahead with Gill Sans. Most designers have this font installed, so why shouldn’t we have the joy of looking at a beautifully set type on Web. And if you add Gill Sans MT to your font stack, then everyone with Ms Office installed will see it too.

  15. I think I see the point – a good version with a perfectly fine alternative for most people.

    Still, saying that most people have access to those font because they come with Office or a suite from Adobe is flawed – it’s an idealistic view based on designer frequentation.
    Without even speaking about Linux, do you really think your neighbour, who use his computer for email and the web will bother installing those monster (in fact, even think about buying them – not going to speak about warez here, it’s irrelevant for most people) ?

    A nod to your fellow designer friend is perfectly fine, it can be fun. But if you want to do a good word (perfect ?) that touch everybody, isn’t it better to work with the constraint or web font (sifr/pictures can work nearly everywhere, they’re better bet than your alternate stack) ?

    But yeah it’s nice that we can do that. I love it when I see my pay font work by surprise (if they’re activated, of course). Too bad most of the times I see a redux.

  16. I enjoyed reading this post and learned a thing or two while at it. I have always thought that the common attitude toward web fonts was prudish and now this post is a win for the more adventurous.

  17. Hiya Vivien, I’m coming late to the party on this article. :) Thanks for mentioning my SitePoint article. On the whole, the article misses more than it covers because of the heavy editing, but the forum comments are enlightening, and include the extensive source list that went with the original.

    On the site I’m currently involved in redesigning, I’ve gone with the Palatinos for the headers, with Constantia and Georgia as fallbacks (no Times New Roman to be found), and Segoe UI as the main sans-serif body font, with the Helveticas and our flawed friend Arial as fallbacks. (I find it somewhat ironic that I didn’t use the font stacks I “recommended” in the article.) Baskerville is a lovely font, but it isn’t on a lot of machines, and as Piotr remarked, it doesn’t match up particularly well with the Palatino family. Also, for this particular design, Baskerville is just a bit too florid. It works absolutely beautifully on the sites you mention (including your own).

    One of the ideas I have for writing a follow-up SitePoint article is to delve into Linux fonts a bit more thoroughly. I was a bit disappointed to note that very few of the sites you feature use Linux fonts in their stacks (and pleased to see that you cited the ones that did). Not sure how much I can say about them — Linux users have a paucity of selections as compared to Mac and Windows users — but considering how incredibly short the SP articles are, I imagine I can fill three pages. I’m a long-winded sort. :D

  18. Sebastian, you make some good points. It’s a fact that most people don’t install fonts on their machines, and are as a result limited to whatever fonts came with whatever programs they installed. I’m (unfortunately) a Windows user, so I can’t speak for the other platforms, but most Windows users get a tremendous number of fonts from installing MS Office (which won’t come near my machine, it’s balky enough without that monstrosity on there — but I miss out on some cool fonts as a result) and various Adobe programs.

    Most users have operating systems, browsers, and office suites on their machines, usually pre-loaded, and a lot of them end up installing fundamentally necessary programs such as Adobe Reader, so they’re getting a good number of the fonts cited in the article. No, they’re not going to buy fonts, or try to find freebie download sites, but if you do a bit of research, you can determine which fonts are more likely to appear on a majority of your users’ machines. You won’t hit every user with your first font choice, but you may hit more than you think.

    A lot of people like sIFR for header images and such, but it’s not a viable alternative for large chunks of text. It certainly won’t take the place of a well-considered font stack for headers or for body text.

  19. Just stopped by to see if there was any new content, and had to comment again. I love how you rotate your sidebar image with the most recent post. It really helps tie the subject matter to your site design.

    Great idea.

    Enjoy the weekend, Vivien!

  20. @James: glad you enjoyed the post. Will you be replacing the text images on your site with HTML text then? ;)

    @Michael: It would be great if you get into Linux fonts and write the follow up on SitePoint. I’ve yet to update my font stacks with Linux fonts. What would be the best fallback font for Baskerville on Linux?

    Absolutely agree with your response to Sebastian: sIFR is acceptable for short titles, but not for the body text (nor text images should be used for that), that’s where the font stacks come very handy.

    @David: oh, it’s very nice of you to say so about my background images. I still have to update my theme files so that each post keeps its own background images. As it is now, new background image appears with old posts as well.
    Oh, and a new post on iBit is coming up in a day or two.

  21. What would be the best fallback font for Baskerville on Linux?

    Uh, nothing comes to mind. Pascal? Anyone?

Pingbacks and Trackbacks

  1. Daily Links | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?

    [...] Striking Web Sites with Font Stacks that Inspire – Inspiration Bit Awesome examples of Web Typography! (tags: design typography web showcase webdesign fonts inspiration font type css tipografia links compilation reference) [...]

  2. Striking Web Sites with Font Stacks that Inspire | Konigi

    [...] that Inspire Inspiration Bit has a wonderful collection of sites whose style sheets utilize users’ system-installed fonts. URL inspirationbit.com/striking-we… [...]

  3. Striking Web Sites with Font Stacks that Inspire | Catch & Release Media, LLC - Blog

    [...] Bit has an amazing collection of sites whose style sheets utilize users’ system-installed fonts. Inspiration Bit provides readers with topics on Web design and development, Art and Photography, [...]

  4. ghettocooler.net » Links, for you to Click on

    [...] Striking Web Fonts with Font Stacks that Inspire We all should take another look at fonts that are available. Too often we may reach for sIFR, or stick with Georgia and Trebuchet in a time when a little used alternative would be an inspired touch. [...]

  5. Links about Typography | vitali software

    [...] Wonderful Typographic Posters For Inspiration27 conventional and marvelous typographic posters. Striking Web Sites with Font Stacks that Inspire26 sites with unconventional Web Typography to draw some inspiration and learn [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on