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 art and photography, from blogging to entrepreneurship, from programming to open source.

It’s a challenge to keep my bookmarks organized in an efficient way. So I’ve decided to start my own blog, and post here everything I find interesting, learn or get an inspiration from. Hopefully this blog will find its readers and others would benefit from all those inspirational bits I get from this magic medium called Internet. And if you find something you’d like to be included here and shared with others, please feel free to post your comments.

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

Big Sweater Design

Big Sweater Design

This site comes with a very unusual but appealing style


I’ve noticed that Century Gothic is a favourite font choice for many craft or art related sites. Notice how on Big Sweater Design site Courier is chosen for all the headings:

body {
font-family:"Century Gothic","Avant Garde Gothic","Avant Garde","URW Gothic L",helvetica,sans-serif;
}
h1, h2, h3, h4, h5, h6, #nav, #elevatorStatement {
font-family:courier,monospace;
}

Veerle’s Blog

Veerle's Blog

Veerle's choice of Century Gothic for titles works well with her display type in image replacements

.entry h2 {
font-family:"Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif;
}

Jens Meiert

Jens Meiert

Jens Meiert works as a webmaster for Google Switzerland

One of a few places where I saw Linux fonts being included in the font-family declaration, as well as new Vista fonts leading the pack:

html {
font-family: cambria, palatino, georgia, 'bitstream vera serif', serif; font-weight: normal;
}
h2, h3, h4, h5, pre, code, kbd, var {
font-family:corbel,optima,arial,sans-serif;
}

Design Snips

Design Snips

Indeed a very inspiration collection of good design snippets


Thame’s collection of design snippets is the place to go for everyone who likes paying attention to details. Then you would also notice his use of Garamond as the main font on the site.

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

Buen Retiro Vergara

Buen Retiro Vergara

Tahoma speaks volumes on this feisty site

body {
font-family:Tahoma,"Lucida Grande",sans-serif;
}

Mark Boulton Design

Mark Boulton Design

Mark Boulton gets adventurous with his CSS font stacks


Mark Boulton is playing Typographic roulette with his CSS. I wonder how many visitors to his site have Plantin and Thesis Sans installed?

body#home h1, body#home h2, body#home h3 {
font: 1.2em/1.6em Plantin, "Plantin std", "Plantin", "Baskerville", Georgia, "Times New Roman", serif;
}
h1, h2, h3, h4, h5, h6 {
font: 1.2em/1.6em "Thesis Sans", "Myriad Pro", "Lucida sans", Verdana, sans-serif;
}

Sushi & Robots

Sushi & Robots

This is a site you expect to see from a co-author of The Art & Science of CSS book

Jina Bolton’s site delights the eye with its charming typography and paragraph treatments:

body {
font-family:"Myriad Pro",Myriad,"Lucida Grande","Lucida Sans","Lucida Sans Unicode","Trebuchet MS","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.entry {
font-family:"Hoefler Text",Baskerville,Garamond,"Palatino Linotype",Georgia,"Times New Roman",serif;
}

Typography For Lawyers

Typography For Lawyers

Don't you wish every profession had a web site dedicated to Typography?

Some interesting typographic choices on this very educational site, and I’m not talking about lawyers only:

h2 {
font-family:Candara,Optima,Helvetica,Verdana,Helvetica,sans serif;
}
p {
font-family:Cambria,Georgia,Times New Roman,Calibri,serif;
}

Michael Biven

Michael Biven

Check both the homepage and blog


On the homepage Michael Biven surprises with the use of Warnock Pro for the site’s tagline, while the blog is set entirely in Hoefler Text:

.alt {
font-family:"Warnock Pro","Goudy Old Style","Palatino","Book Antiqua",Georgia,serif;
}
body {
font-family:"Hoefler Text","Georgia",Georgia,"Times New Roman","Times",Times,serif;
}

Tap tap tap — tasty bits for your iPhone

Tap tap tap

uhmm, Ferigo, so yummy


You have no excuse for not having Fertigo on your computer to see this site in all its glory: the talented Jos Buivenga is offering his alluring Fertigo typeface for free.

body {
font-family:"Fertigo","Georgia","Big Caslon",serif;
}

So here you go: 26 sites with unconventional Web Typography to draw some inspiration and learn from. If you know of any other sites that use fonts other than the core web fonts, please let me know.

Recent Bits
Related Bits
Seasons Greetings From Inspiration Bit
Motivated and inspired
Group Project: Source Of Inspiration
how to get inspired
5 ways to get inspired
8 Bits From The Past
Why Do We Learn And What?
7 Astonishing Minutes to Get Inspired
Comment Bits

No Intelligent Bits in response to “Get inspired by Inspiration Bit”

Sorry, comments are closed on posts older than 90 days.

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, play with my daughter and try to balance family, work, friends and a somewhat active social life on