After playing a bit with some of the hosted online font repositories I’ve come out frustrated. I see all over the place the same Web Safe Fonts. But there is a wealth of fonts installed on all modern computers that never see the light of our monitors due to the need to make all pages render exactly the same way across every browser.

I wanted to use Optima for this site. I LOVE Optima’s stroke contrast, it is a beautiful elegant typeface. But it’s not a “Web safe font”, so what is there to do?

I like the Google font api. It’s a great project, except for the tiny setback that the fonts don’t render well in Windows… Oh well. Additionally, there really aren’t any fonts available with the stark stroke contrast that Optima offers.

There are services for $4 (typekit) – $10 (fonts.com) per month that I could use. They’re not too prohibitive. But, you know, it’s not just more money, it’s the price of the extra resource that I’m dumping on my visitors that I’d rather not do.

Initially, Windows, Macintosh, and other systems had only a handful of fonts installed. But that’s not true anymore. More importantly, considering the underlying concepts of Responsive Web Design we don’t really need to use the same fonts. We just need to add to our font-stack alternative typefaces to fall back on that look good with the weltanschauung of the site.

Amrinder Sandhu put together a great article discussing several font stacks that he re-builds in light of the Code-style font survey. It’s a good read on the topic. Another helpful tool is the font-matrix. Unfortunately it’s a little dated. (If anyone finds an updated version I’d be eternally grateful if they posted it in the comments.)

In the end I AM using Optima, if you have a Mac you are seeing the site rendered with it. I used Amrinder’s suggested stack, so if you’re in Windows you’ll probably be reading this with Segoe UI, which was Microsoft’s “poster child” sans-serif, quite literally.

In my search for a good font-stack for “Hoefler Text” I came across a fun tribute to the typeface.

The bottom line is:

Just as different devices offer different screen sizes, and we should embrace these differences and build our sites to accommodate for them, so too we should embrace the different fonts available on different platforms and get creative with our font stacks.