Typophile

Ideal font stacks for web

Dan Gayle

I've seen a lot of rubbish out there about font stacks for web use, so I wanted to see if we could come up with some better ones. It's a matter up for much debate, but I'd like to see what we can come up with.

Here is my contribution. Feel free to rip it to shreds, and add/delete. Apologies in advance to Linux users.

"Humanist Sans":
font-family: "Gill Sans", "Gill Sans MT", "Gill Sans Std", GoudySans, "ITC Goudy Sans Std", "Myriad Pro", "Myriad Web", "Myriad Std", "Bitstream Vera Sans", Verdana, sans-serif;

"Oldstyle":
font-family: "Adobe Jenson Pro", "Hoefler Text", "Centaur", "Centaur MT", "Garamond Premier Pro", "Stempel Garamond", "Adobe Garamond Pro", "Adobe Garamond", Garamond, Georgia, serif;

"Geometric Sans": <<- My worst one. Needs help.
font-family: "Futura", "Century Gothic, "Tw Cen MT", "Gill Sans", "Gill Sans MT", "Gill Sans Std", "URW Gothic L", sans-serif;

georgebutler

The only fonts that guarantee cross browser compatibility are Georgia for serif, Verdana for sans. Times New Roman, and Helvetica could be good secondaries.

Great article discussing increasingly compatible system fonts.

caren litherland

A bit dated now but still useful: http://media.24ways.org/2007/17/fontmatrix.html

georgebutler

Which brings up the topic of @fontface. Anyone know the status of font embedding? Will IE support OTF in the future? Or will Microsoft's EOT be the standard for web fonts?

Dan Gayle

@georgebutler The w.3point7designs article is indeed interesting. It actually helped me justifying my use of Gill Sans in a recent project. The big issue is that some people cannot let go of the fact that many people are going to see different designs, regardless of the designers intent. That's just the way of the web.

The WORST font stack article was the most recent Sitepoint.com article http://www.sitepoint.com/article/eight-definitive-font-stacks/

I felt a lot of bile in my throat as I read that, and it is what has spurred me on to create better, more typographically informed font stacks.

@litherland
I don't recall ever seeing that chart. Very nice!

Captured from web.archive.org on 11 Feb 2012. view this capture