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

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

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

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

#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

Look forward to seeing Travis Gertz's new experiments

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

Natalie Jost

A beautiful site where typographic choices add to its serene atmosphere

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

Palaitino dominates on this site

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

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

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

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

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 comes with a surprisingly well organized layout for such a busy site

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

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

Glorious simplicity at its best

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

Stories & Novels

Franz Neumann's exquisitely crafted site for online reading

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

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

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

Microsoft has definitely redeemed itself for creating the most horrendous OS and browser in the history of mankind by commissioning Mathew Carter, a British-born type designer, who began by learning to make type before learning to design it, a collection of screen-friendly typefaces, both serif and sans-serif. As sans-serifs typefaces were much more popular in the digital world in 1990s, Carter began with the design of Verdana and later followed it up with the serif, Georgia. However despite its elegance, legibility and gorgeous old-style numerals, it was left in the shadows by Verdana for many years, until the early 2000s when it was re-discovered by graphic designers who were rummaging through vintage styles for their next big look.

Georgia is the most versatile web-safe serif typeface: by combining various styles, sizes, tightening or increasing letter-spacing, even when used in non-native small-caps, you can produce spectacular web sites with a stunning typography by relying only on a single font, Georgia.

To prove, I’ve collected 32 web sites (that’s 4 bytes of data for you) that do just that: use Georgia as the only font for their HTML copy. Did you notice I specified ‘HTML copy’? That’s because in my collection I’ve included not only web sites that indeed use Georgia and nothing but Georgia, but also sites that recruit the help of display fonts that are not web-safe, by turning them into images, however the only font that’s mentioned in their CSS is Georgia.

Let’s dissect how the following sites have achieved a beautiful presence on the Web with only Georgia on their mind, i.e. CSS.

Georgia here, Georgia there, Georgia everywhere

We’ll start with the sites where, with the exception of a logo or a small graphical detail on the site, every written word is displayed in Georgia. We’ll examine how exactly each of those sites managed to achieve such a pleasing typography without comprising on the look of the entire site. Hopefully the examples below would show everyone, cynics included, that, even with limited typographic resources and tools that are available to us on the Web today, it is not only possible to design ravishing sites, it is given that designers should have no more excuses for blaming the lack of web site aesthetics on the lack of web-safe fonts.

Information Architects

Logo aside, Georgia rules on Information Architects

Oliver Reichenstein’s design is a prime example of what can be achieved with a single typeface if you have the right know-how. The author of a vexed article, Web Design is 95% Typography, backs up his argument with the design of his site and gets the most out of his chosen typeface, Georgia.

Here’s his type magic unveiled: first of all, he chooses a dark grey (#333333) rather than black as the primary text colour on the site’s white background. He uses two more accent colours: light grey (#999999) for the auxiliary text and crimson red (#CC0000) for links. In addition, the auxiliary data is highlighted with H5 heading set in {font-variant:small-caps; text-transform:lowercase; font-size:0.875em;}

The rest is simply a result of pedantically calculated font sizes and leading:

body {font-size:100%;}
.issueIssue p {font-size:0.813em; line-height:1.385em;}
.commentlist .cC p {font-size:0.875em; line-height:1.5em;}
p {font-size:1em; line-height:1.5em;}
h4 {font-size:1em; line-height:1.125em;}
h2 {font-size:1.5em; line-height:2em;}
h1 {font-size:1.5em; line-height:1em;}

Lonely Tweet

Lonely Tweet is comforting lonely Twitterers with Georgia

This is a very simple single page site, with a caring idea: to comfort lonely Twitterers. Andrós has designed it with Georgia only: the default font size is set to 16px, Tweets appear in H1 heading, set with {color:#333333; font-size:3em; letter-spacing:-0.07em; line-height:140%;}, usernames are displayed half of the tweet’s font size with h1 span {font-size:0.5em; font-style:italic;}, links appear in a light grey (#787878) colour. The use of a single typeface, a vast white space and a lonely tree in the snow re-enforce the solitude.

DFCKR

Georgia dominates on design Fckr

Article headings are set in H2 and decorated with {border-bottom:1px dotted #D4D4D4; font-size:1.7em; padding:0 0 10px;}. Try visiting any of the links from the Public News section on the homepage, and you’ll notice how visited links will appear crossed with {text-decoration:line-through;}. Everything is so simple, yet so effective.

Ceramiche Corsini

Corsini Ceramiche looks pretty impressive with Georgia only in a very basic styling

Colourful Georgia

Georgia looks great in colour and surrounded with colours, so don’t be afraid to mix the things up a bit.

Dean Oakley

Georgia keeps things look simple and cool on Dean Oakley

Surfgarden

handwritten script goes really well with a classic Georgia on Surfgarden

Here are some more colourful examples:

Lucy Blackmore

on Lucy Blackmore's site Georgia is very legible in small sizes and stunning in large

v1Creative

on v1Creative headings are images, but the rest of the site's content is displayed in Georgia with a minimal styling

Bobulate

It's perfectly ok to pick a different font for your logo and stick to Georgia everywhere else

iPhoneDevelopmentBits

Even in a small size on a textured background Georgia is still pretty legible on iPhone Development

Giblette

The inverted white text on the black background, set in Georgia, is a bit too small on Giblette, but it still works

Carnivale du Vin

It's only ok to shout and get excited if you use Georgia in small-caps

If you’ve got an authoritative client who likes to capitalize on things and prefers to see lots of uppercase letters, you can tone them down with font-variant:small-caps.

Miles Dowsett

You can't blame Miles Dowsett for choosing a much sexier ampersand in Baskerville Italic than its counterpart in Georgia

The Things We Make

The Things We Make is definitely not for the faintest of hearts. It mixes Georgia really well with colour and lots of it.

Year 2008 has witnessed a surge in articles with the sole purpose to inspire readers, hence thousands of ubiquitous Top 10, 50, 100 (and any number in between) lists that flooded the blogiverse. It is yet to be argued what has in fact been achieved by such posts: legions of inspired people or a crowd that is too busy to read and too eager to scan articles by merely looking at a few dozen pictures/links, or both?

So I thought it’s time to conduct a mini survey and find out what were the actual sources of inspiration for you in 2008. Some of the answers were surprising, others quite expected, but nonetheless auspicious to hear.

One can find inspiration in unforeseen places, in looking at things under a new light, in trying out something we’ve never thought to be interested in or simply unaware of its addictive nature. Sometimes we get inspired by someone’s achievement, writing, work. Other times it’s a mere click of a button, a visit to a new site, a trip to a new place, or even a new book, that determines how we start perceiving the world and our work from then on.

Person of the Year

For me this person remains to be my daughter, who can’t wait to turn four in a couple of months, and whose inquisitive questions What and Why would drive any sane person crazy, anyone but me: — Mama, do I make you happy? — Yes! —Why?

For David Airey it was Paul Arden, the late advertising guru, and his creative writing: His books are short, but contain a wealth of knowledge I’m sure you’d appreciate. In particular, his book, “It’s Not How Good You Are. It’s How Good You Want To Be” is highly recommended.

For Jacob Share there were several people who’ve made an impact last year: Tim Ferriss’s assumption destruction, Jacob Cass’s success, Alex Shalman’s insight and Jeff Pulver’s social eagerness.

Tracey Grady, on the other hand, has drawn much inspiration from her husband Paul, who at the beginning of 2008 recovered after a period of very serious illness, and got back to setting up his own solo business venture (not design-related). Every time I find things a bit heavy-going, I think of him sitting at the other end of the house, getting on with things, and I find it easier to keep plugging away, too.

Design Phenomenon of the Year

I’m sure many designers would agree with me that the year 2008 could be attributed to bringing beautiful typography to masses on the Web. It is such a relieve to witness the dedication of many designers to pay as much attention (if not more) to the way a written word is displayed on the Web as to how shiny the buttons or how cool the visuals are. There are many sites, publications and people to thank for educating us on the intricacies of typography, but there’s one person, who deserves a special mention and whose site continues to be a success story of the year. It’s John Boardley and his site iLoveTypography.
His weekly type articles inspire Piotr Fedorczyk, Simon Pascal Klein and thousands of others.

Jon Tan sums it up really well:

After racking my brain for a few seconds with very little that was springing to mind as outstanding, I realized that Johno’s iLT was top of the list in 2008. He’s collected and written some fantastic pieces in the last year and is working wonders in curating a place where the print and web world come together. If this was the late 70s iLT would be the Studio54 of its time, or the Hacienda of the late 80s. A truly outstanding achievement.

Web site(s) of the Year

There are millions of sites on the Web, but not all of them inspire, educate, challenge and make us green with envy. We all favour a handful number of such sites that stand out in the crowded Web. Just like Simon Pascal Klein I can’t stop admiring beautiful sites designed by Jon Tan and Piotr Fedorczyk.

Steven Brian Hall has improved his Photoshop skill set thanks to resources from Smashing Magazine and tutorials from psdtuts.

Charity Ondriezek, on the other hand, has found tutorials from NetTuts to be superior to most I’ve found elsewhere, and the whole network of sites are beautiful and meticulously designed by Collis. A few more extremely useful discoveries include 960.gs, WP Zoom and most recently, Six Revisions.

Kyle Meyer has been longing for a resource similar to Pattern Tap for quite some time. Frequently I just want to be barraged with a ton of ideas on a particular aspect of a design to fire up my own creative thinking. Seeing dozens of ways that people have executed the style of a blockquote for instance really helps me think in new ways. It’s a bit of a, ‘what if I combine a few of these styles, or reverse this style?’ sort of thing that encourages experimentation. Now if there was only something similar for application design elements for user interface work…

Pascal has found articles by Cameron Moll, Jeff Croft, Mark Boulton to be as invaluable as they are inspiring.

When Andrew Rickmann discovered David Peralty’s blog, Alt Sci-Fi, it inspired him to start writing a novel. I have always wanted to, but never got around to it. It is slow going, but ‘Fun’.

Tracey Grady has been saving every new source of online inspiration in her Delicious account and was kind enough to share them with us:

• Web design — Vitor Lourenco
  I love the simplicity and attention to clean layout in his designs — they make sense without screaming ‘minimalism’.
• Web site — Meomi
  This site has received lots of attention on web galleries and blog lists this year. I think the site beautifully represents what Meomi is all about, and the illustration has great appeal.
• Blog — Ali Felski
  I will be redesigning my blog in 2009 and have been making notes for a couple of months already in preparation. I discovered Ali Felski’s blog in the final week of 2008; her design (more than any other I have found lately) resonates for me in terms of the approach I will be taking for my site’s new look.
• Illustrations:
  Stephen Michael King, Samuel Bismes, Sophie Griotto, Charlene Chua, Evgeny Kiselev, Yulia Brodskaya, Jing Zhang, Zutto.
  The single most inspiring illustration I have found this year is this red power.

Community of the Year

Remember how in 2006 Time magazine chose YOU as the person of the year? You, as one of the millions of anonymous contributors of user-generated content. I would dedicate the year 2008 to the Community of users. It was truly the year when social media sites have reached the heights taller than Mount Everest, when the word tweet now has a meaning other than “the chirp of a small bird”.

Charlene Polanosky agrees with me on that: I would have to say my new source of inspiration was definitely Twitter! The conversations are all there, it gave me the opportunity to connect with a broader range of people and really demonstrates the power of social media.

Aaron Russell didn’t discover Twitter in 2008, but it is the year when he stopped dismissing it as the ultimate waste of time and actually started using it, and since then I’ve eaten my words many times over.

I still fail miserably when I try to explain to the non-twiterate (yes I did just make that word up, sorry) what Twitter is and why it isn’t a complete waste of time, but ultimately it is not really Twitter itself that inspires me — the technology doesn’t do anything particularly clever — but the community of people with whom I’ve embedded myself with the simple click of the “Follow” button have been massively inspirational.

In that sense you could argue Twitter is no more or less inspirational than any of the other countless social media / bookmark sharing / web 2.0 services. However, Twitter feels less like a game and more like a conversation. There is less tendency to pimp top ten lists of predictable hyperbole (although there still is a bit of that) and more tendency to share genuinely interesting and inspirational news and articles with the community.

Jacob Cass has discovered another social networking site, designfloat, as one of his resources for inspiration, and honestly confessed that another one is his own website. I have learned so much from these two places. The comments and community really help you become a better designer.

New approaches

Sometimes all we need to get back into a creative mood is to look at things from a different perspective, experiment with new things. It is when we stop getting annoyed by some of the ads in magazines and start admiring their perfect blend of typefaces and superb colour schemes, and noting the cleverness of their art direction.

Lauren Krause’s new source of inspiration is just that: it’s not so much a specific person, publication or site, but rather a new way of thinking about design. When I wrote about the elements of design, that made me start recognizing them more in work I would see and create. When I really like a design, I’ll study it—break it down into the elements and principles of design–in order to learn how to incorporate those things into my own work. You know how it is: it’s all in the details.

Other times it’s the different approach we take at doing things we’ve done a million times before, like shooting pictures, developing sites, designing, drawing or even exercising, that’s fueling us with a refreshed energy and sources of inspiration.

Brian Auer is an avid photographer who is not afraid of experimenting with a different gear or new approaches to take pictures. So it’s not surprising to see that his new darkroom is quickly becoming his source of inspiration for photography. There’s something magical in loading a piece of film into the enlarger and creating a photo from light, paper, and a few chemicals. The tactile and visual qualities of paper far outweighs the additional cost of printing. Seeing one of your own photos on a silver-gelatin print is pretty amazing. So with that, I’ll be shooting a fair amount of black and white film this year. I’ve also discovered the awesomeness of printing from medium format film, so I’ve vowed to get more use out of my old Twin Lens Reflex (which is crazy-sharp even though it’s over 50 years old)!
Brian has also questioned the readers on his blog and got some interesting responses with their sources of inspiration.

Andrew Rickmann always loved blogging, photoblogging and working with Wordpress, but then he reached a point where he got tired of all those things and even considered quitting them all. But then came Habari and changed everything.

Habari, the way it was coded, the way it worked, made Andrew ditch his personal site which had been stagnating, started up a Habari site, created a theme to work on both WordPress and Habari, and which I could use for photos, and created new sites around a single brand: Fun with Opinions, Fun with Photographs, Fun with WordPress, Fun with Habari, and Fun with Wizards.

Inspiring Publications

Don’t get me started on this topic: I’ve never spent so much money on books and magazines as I did last year. I’ll be blogging more about them in upcoming articles on iBit.

Looks like I’m not alone: Simon Pascal Klein has filled up his library with The Element of Typographic Style by Robert Bringhurst, Thinking with Type by Ellen Lupton, The Zen of CSS Design by Dave Shea and Molly Holzschlag, Transcending CSS by Andy Clarke and TIME magazine.

Places and Events of the Year

If you’ve tried all the sources of inspiration listed above, and still hitting the wall due to the lack of creativity and inspiration, then you ought to get out, visit new places, much like Simon Pascal Klein did with his six or so visits to the Gutenberg Museum in his native Mainz, or just pay attention to design and type around me when out and about.

Or perhaps, like Jacob Share, you might get inspired by the ballet we call Nature, the economic crisis (really), and eerily quiet intercity train rides.

So what were your sources of inspiration in 2008? What got your adrenaline pumped and heart beating faster than a newborn’s? I would love to hear your stories. Let’s inspire each other and get inspired.

We’ve had an unusual amount of snow in Vancouver this winter, so much so that snowfall caused a power outage and the last night’s Christmas Eve dinner we spent in dark with candles. My daughter was running around with her flashlight, it was fun, but we were all relieved when the electricity came back in two hours—it was getting cold rather quickly in our house.

It’s hard to believe that another year flew by as quickly as it came and now it’s time for new resolutions for some, new commitments for others and new calendars for everyone. I’m always on a look out for interesting beautiful calendars to decorate my walls, desk or shelves.

A calendar, with its months, weeks and numbers is a perfect medium for showcasing a beautiful typography and elegant grids. I’ve come across some stunning typographic calendars on the Web and so tempted to buy at least one of them.

Calendar “Literally”

Four companies—RegentArt, Front:Design, LiniaGrafic and GMUND—got together to attract people’s attention to the old art of letterpress when every wooden or metal letter’s impression becomes a work of art.

Pentagram 2009 Typographic calendar

This calendar comes in two versions: super-sized 23″ x 33 version for wall and the 12″ x 18″ version for desk use. Each month is featuring a favourite typeface that’s been nominated by one of the 12 graphic design partners (Michael Bierut and Michael Gericke, just to name a few).

Typodarium 2009 – Typographic tear-off Calendar

This one is my favourite. We used to have such tear-off calendars when I was growing up. And I remember sometimes fighting with my two brothers who gets to tear off the page with the new day and read the text on the back. This calendar is showcasing 365 different typefaces from fifty foundries and designers from all over the world. If only they had the shopping cart in English.

Some Type Of Wonderful

Wonderful type pieces by each of the 12 artists are decorating every month of this beautifully designed, limited edition A3 wall calendar. I just wish they had some more calendar thumbnails on the site to whet our appetite.

Cats Let Nothing Darken Their Roar 2009

Bold typography and quirky phrases make this calendar, designed by Noa Bembibre, a fun addition to any typophile’s collection.

How Very Fortunate 2009 Calendar

“Six designers, three Asian restaurants, twelve crumpled fortunes, twenty-four crossed fingers and one letterpress” resulted in one beautiful limited edition calendar.

Hand-crafted calendars on Etsy

If you haven’t heard of Etsy, an online marketplace for buying & selling all things handmade, you’re missing out on one of a kind pieces made by crafters from all over the world. Check out some of the exquisitely designed letterpress calendars on Etsy.

2009 Letterpress Accordion Fold Mini Calendar

At $15 USD this lovingly crafted calendar is a steal. “Each month features a different old-fashioned natural cut printed in a soft sage green ink, while the month blocks are printed in gray.”

Ink+Wit 2009 Letterpress Calendar, printing by Pistachio Press

Only 300 limited edition calendars, each one is hand printed on a Vandercook printing press. You can either purchase a gift set that includes letterpress cards from Etsy, or just a calendar from ink+wit web site.

OrangeBeautiful 2009 Calendar

Stunning typography and lots of it. Printed entirely by hand on GOCCO printers in Chicago.

Paperedtogether 2009 letterpress calendar

Scrumptiously beautiful calendar from Paperedtogether. I love the texture, can almost feel the paper and the pressed in figures just by looking at the photos.

2009 letterpress and silkscreen calendar by Ilee

This desk calendar comes with delicate designs. Highlights of the 2009 calendar include ancient floral Persian motifs in celebration of Persian New Year in March and non-toxic glow in the dark ink for the month of June.

2009 letterpress artists calendar POSEIDON

Poseidon was chosen for a GD USA 2008 American Graphic Design award. Judging by the numbers on the site, there is only one calendar left in stock.

Perpetual Calendars

Even though I like buying new calendars every year, but nothing can beat perpetual calendars that can be passed on from one generation to another. Here are some ingenious ones I found online.

Small Perpetual Calendar Gideon Dagan

This is a new desktop version of Gideon Dagan’s original Perpetual Calendar that was designed for MoMA in 1998. The magnetic balls are moved manually to mark the date and month. This would be a fun way to teach kids about days and months.

Nava Max 365 Perpetual Calendar

This timeless classic was designed by Massimo Vignelli in 1980. I do prefer to see the months and weekdays as well.

Formosa Wall Calendar

If you have $250 to spare, you may be interested in this classic perpetual calendar that can be found in museum collections worldwide. It was designed by Italian designer Enzo Mari in 1967 for Danese Milano, Italy.

Acrylic Perpetual Calendar

Another perpetual calendar from MOMA store. It comes with two acrylic blocks that slide past each other to indicate the day and month.

Flickr Calendar inspiration

If you need some more calendar inspiration, check out Flickr. I’ve found someone posting pages from a vintage book’s calendar collection. I wish they mentioned the title of that book, there are some amazing calendar designs and interesting typography.

And I really liked this cleverly creative barometer inspired calendar from a student’s work for her type class.

Or perhaps you might be interested in making a perpetual calendar yourself, much like QueenVanna or Michael Karshis.

Which calendar did you like the most? Did you buy a new calendar for 2009?

I’m putting a post together where I’ll be sharing with you my new sources of inspiration that I’ve discovered in 2008 and I would love to include your sources of inspiration from 2008 and credit you with a link. So if you’re interested, please send me a note or message me on Twitter.

Have a wonderful new year and happy holidays!

It would be hypocritical of me to say that there is something wrong in getting together and collaboratively discussing the issues and the reasons why in the XXI century we still have children dying of starvation, people dying from diseases that can be cured with the modern medicine, how come that even in civilized countries there are still people living on the streets and something as essential as health care and education is still considered a luxury for many.

By all means we must talk about it every chance we get, even if it’s once a year. But there are a few others amongst us who take it much more seriously and closer to heart and dedicate their entire life to the fight against poverty and injustice. Perhaps what the world needs is more people like Mother Theresa amongst us. This article I’m inscribing to one of such people, a remarkable person, artist, designer who devoted his life to a special project by becoming a father and brother figure to 40 kids in Zambia, thousands of miles away from his native Germany.

The first time I came across Care For Kids Farm project was a couple months ago while browsing one of the CSS galleries, and was pleasantly surprised to see such a beautiful site dedicated to such an honourable cause. Since the site was in German, I checked a couple pages via Google translation that it linked to, but then forgot all about it until a month later I stumbled upon a site dedicated to GAG—Get and Give project, soon after I discovered another beautiful GAG site, which looked very different but with a same distinctive feel to it and as it turned out was simply a September version of the site I saw in August.

That’s when my curiosity took over me and I started digging in deep to find out who is producing these amazing web sites that were featured in every imaginable CSS gallery, what GAG is all about and how is it related to Care For Kids Farm project? All I could find out about the designer was his name: Ronny Jander, no personal web sites, no bio, no social networking profiles. By then I was so enthralled by his work that I filled out a contact form on GAG web site and asked to answer some of the many questions I had. I was so happy to receive an almost immediate response from Ronny himself, but I didn’t want to just send him some questions by email, I needed to talk to him in person. So I asked for a chat and fortunately he agreed. The next day we talked for a couple hours or so. Since then we constantly keep in touch with each other, and the more I learn about him and his projects the more grateful I feel for his existence in this world and in the lives of his kids at the Care For Kids Farm orphanage.

Ronny is only 31, but he’s already managed to leave a life long legacy behind. There are forty children (ages 2 to 17) who were rescued and whose lives were forever changed because of him and his boss Joachim Schiffer, the founder of the Care For Kids Farm.

Joachim Schiffer founded a nonprofit organization Care for Kids in Zambia in 2001 by opening a small orphanage in a poor district, three children in a little house. Afterward he went to Germany and Switzerland looking for sponsors, and when he returned to Zambia he got a surprisingly big donation, which he used to buy an old house with a land and completely renovated it into a big farm. Now they’re able to grow some fruits and vegetables there, though they still struggle and could use any possible donation to feed, dress and educate their kids.

Four years ago Joachim invited Ronny to visit him in Zambia. That visit has changed Ronny’s life. He realized then that’s where he belonged, so he wrapped up his life and affairs in Germany and moved to Zambia.

So now there are four of them: Joachim Schiffer with his wife, Ronny and a maid. There are also three teachers during the day who come to teach children. There was another maid who has passed away from malaria only a few weeks ago, leaving a two year old son in the orphanage. The October version of the GAG site Ronny dedicated to her, Eunice Mwando (you can see her name inscribed in the site’s footer).

“Some of the children here still have a mother but are either very young or old and sick, unable to take a proper care for the child”, says Ronny. “But whenever they [family, parents] come to visit, they all ask the child if he/she would like to come with them and they [kids] always answer: NO, no way! That’s heartbreaking in a tearful nice way. That’s what makes me proud in life. Really! No sponsor talk. To have someone who loves you so much that you can never imagine being able to give back. We are not really an orphanage, we are like a family. We can’t go away from each other. Sounds like honey but it’s true, it’s a home”.

Whenever Ronny talks about his children, you can sense how proud he is of them, how sincere his love is for those kids. He doesn’t have his own children but considers himself as “a father and big brother to my children”. What he finds most amazing is “how they look when they come and how they look after a half a year” living at the farm—changed and happy.

In August Ronny thought of starting a GAG project. He got interested in Web Design only a year and a half ago (he was an artist in past), and thought that it “could be fun, a possibility for the kids and maybe bring in something”. He asked his boss who didn’t mind trying it out. So now every month Ronny is designing new versions of GAG web site in hopes of building up his portfolio and attracting some clients. He already built two client sites and is constantly looking for more projects to take on. His initiative is so simple yet so powerful: get a web site and give to kids at the orphanage. All the money he makes from designing web sites go straight to their fund at the Farm.

What I liked the most about Ronny’s designs is that soul-grabbing feeling they invoke. All his Care For Kids Farm and GAG designs feature one or more emotionally powerful images, with a big dramatic background and built as single page sites. When I asked how would he identify his style, he answered: “Playful. I can’t call it clean, minimalistic. What fits that fits. But when I design something then there must always be a THING, something special to me. In the September gag it’s the upside down header image. And I try saving spaces: I don’t like icons very much and prefer to let the site talk with words and very few pictures”.

What’s most amazing about it is that Ronny manages to make that Thing, so special to him, feel special to us as well. I will never forget the black & white image with two dozen kids, standing in groups (since that photo was taken, the number of children in the orphanage has doubled), or those child legs hanging down on the August version of GAG, or those slides with a girl, eagerly eating something green, but obviously something very delicious, and of course that big background image with children enjoying their creative side with colourful paints on the Care For Kids Farm web site.

Fortunately, Care For Kids Farm project has some very loyal donators from Switzerland, Germany and Zambia. Without their generous support this project could’ve not lasted all these years and provided shelter for so many kids and families in need. But I’m hoping that this article would bring more awareness and supporters to this incredible organization. So if you’re looking for a charitable organization to make a donation to, please consider Care For Kids Farm. And if you’re looking for a talented designer to build you a web site or help with your web projects, please contact Ronny and get something from GAG by giving something back to all those kids who desperately need any support they can get.

In order to ensure my sanity, after reading a couple of blog articles and checking out the futuristic vehicle drawings and comments, I filled out the contact form and hoped that soon someone will get back to me with the answers to my questions about the history behind the Codex Transportica, its designer(s), illustrator(s) and writer(s).

What is true?

Here’s the true story about the mysterious ‘book’ and its creators straight from the horse’s mouth.

Nick Pearson loves to doodle, and was playing with an idea of drawing some strange looking vehicles and posting them online. He did some brainstorming with the fellow members of the DonationCoder forum and the project Codex Transportica came to life.

“To keep things as flexible as possible the ‘book’ was going to require translation—thereby allowing us to write things that we could then contradict later on if we didn’t like it—we could simply say it was a bad translation first time around.”

Later on Tim Smith came on board and the two of them formed a perfect team of a designer and a writer. Nick draws a vehicle, passes the illustration over to Tim who then devises a pretty plausible description of the futuristic machine.

When is it OK to use Times New Roman?

Nick Pearson is also responsible for the design of the site. The type choice (ubiquitous Times New Roman), justified text, the gradient of the paper-like background, hand-drawn figures and icons, striking Victorian wallpaper and the gorgeous header make the site resemble a book.

Times New Roman was criticized by some as an unsuitable typeface for online reading (opting for Georgia or other faces instead). But with the right type treatment it’s possible to bring out the best of the good old Times New Roman. Two of the most effective techniques to give a non-typical look to any typeface is to experiment with leading, achieved by line-height in CSS, and white space in the form of letter-spacing in CSS.

That’s exactly how Nick Pearson made the content of his site legible and unstrained for reading online: he kept the body text at the default size of 16px but added a generous line-height of 26px. In addition he restrained the content area to 434px wide, which keeps the line lengths to the optimal 60-70 characters long.

In fact, Nick sticks to Times New Roman throughout the entire HTML copy of the site: menu links, navigational post links, article titles, comments. And everywhere Times New Roman looks different thanks to varying font sizes, letter-spacing, font-weight and colours.

How to add some authenticity to the site?

The first thing that catches the eye on Codex Transportica site is the opulent header image that resembles an antique red leather cover of the ‘book’ with the washed out embossed gold lettering and the ‘worn out’ dark patches.

Nick has re-created the ravishing ornate letters C and T from a book called “Alphabets”, published by L’Aventurine. I’ll try to get myself a copy of this book filled with stunningly drawn alphabets, which are all copyright free.

For Codex Transportica Nick has chosen the monograms designed by a 19th century German designer Karl Klimsch. I managed to locate one of his books with 2,100 Victorian Monograms on Google Books so that you could take a closer look at the amazing work by Karl Klimsch.

I also ordered a copy of this book from the local book store and will share some designs with you on Inspiration Bit as soon as the book arrives.

The lowercase letters in Codex Transportica are displayed in Birch Std that goes really well with the ornate capital letters.

All the other text in the header is displayed in a familiar Courier New, which adds authenticity to the whole mysterious ‘book’ experience on this site. I’m also very fond of the beautiful grey background wallpaper that somehow reminds me of Rudyard Kipling. I guess because of some Indian/British influence that I see in the background pictures. I asked Nick to tell me a bit more about the wallpaper:

The background to the website is a tile I managed to put together from a bad photograph of real Victorian wallpaper (I think it is Victorian).

The drawings and the writing, which is composed not without a good sense of humour, deserve a special attention. I highly recommend you to carve a bit of time for yourself to sit down and read a few chapters of Codex Transportica. You’ll get transported to a very strange future that at times feels like the society went backwards in its development, and other times you’d be left in awe at what could be possible to accomplish had the science learn the way to transform one’s phenomenal imagination into reality.

What can be improved on Codex Transportica?

Even Nick considers his site to be a “beta” and will be tweaking it as the time permits, so I’ll try offering some constructive criticism here and encourage you to do the same in the comments below.

Although I commend Nick’s decision to stick to Times New Roman throughout the HTML text of the site, I’m not crazy about the menu titles at the top, they look like typical Times New Roman on sites dated back in the 20th century. I actually tried displaying them without the added weight:bold, and to me that made the menu links look better.

Some of the book chapters list other related topics at the bottom of the article, currently they are displayed in exactly the same font style and size as the main copy of the site. I would like to see a different type treatment for those links that would allow them to standout and cause less confusion to the site’s readers.

Hopefully Nick will pay more attention to styling the comment and contact forms on the site. Right now they show up with a standard HTML treatment, default font sizes, colours and styles, and look unattended. I’d like to see them equipped with a style suitable for this blog.

I studied some underlying code of the site and it definitely needs to be cleaned out here and there: there are occasional nested divs with some redundant styling applied to them.

I do like though a few interesting programming goodies on the site, like the icon/link for displaying Random Posts on the blog, the links to the latest and oldest articles, as well as the previous and next ones, and the mobile version of the site.

What are your thoughts, suggestions for the Codex Transportica? If you’ve missed my previous articles in Exquisite Web Typography series, be sure to check the past issues: Part One, Part Two, Part Three and Part Four.

Marian draws inspiration from various sources, as different as Islamic Art and Victoriana, as vast as 14th-18th century calligraphy, styles as divergent as Baroque, Rococo and Gothic. She’s influenced a lot by the Arts & Crafts movement, old lace. Even though Marian claims that she’s not a big fan of M.C. Escher, I do find his impact on her work, especially in pieces like “The Struggle” and “An Orgy of Reading“.

There are very few Graphic Designers who managed to create a unique style in their line of work, that becomes instantly recognizable without compromising the needs, values and the image of their clients. Marian is one of such designers. Her signature intricate illustrations are painstakingly detailed and delicately beautiful.

Bantjes’s work received a huge recognition and numerous awards. Her first commercial typeface Restraint, which is more of an “ornament font which happens to contain letterforms”, was awarded with a Certificate of Excellence in Type Design from the Type Directors’ Club.

She also received a Gold Racie award for the Want It campaign that she was hired to create for Saks Fifth Avenue by Michael Bierut at Pentagram.

Stefan Sagmeister calls Bantjes “one of the most innovative typographers working today“. He likes her so much that Stefan asked Marian twice to contribute to his series “Things I have learned in my life so far”. He was so impressed with her sugar piece she did for the Fox River Paper booklet that asked to use sugar to create his phrase “If I want to explore a new direction professionally, it is helpful to try it out for myself first“.

… and here is the close up of this stunning piece of work:

Marian always pushes the boundaries of the conventional design. Check out her outstanding design of TypeCon 2007 program, that includes 80 pages with the program details and 88 speakers bios. I really like the 3D structure on the cover and the poster that’s built with letters, intricately connected with each other:

Another Marian’s work that I find very beautiful is the identity and Call for Entries that she designed for Graphex 2006 — Canada’s Biennial Design Awards, organized by the Society of Graphic Designers of Canada. She explained her choice of design with her decision “to focus on nature, and the things that we all have in common in this vast country: plants and insects“. She made the logotype from maple leaves and used all Canadian fonts.

She followed this beautiful application form with a stunningly designed Graphex catalog with a laser-cut cover that allows you to see through the underlying page of magnificent florals.

So if you happen to ask me what is it that I like the most in being Canadian, my answer would be very simple—I’m proud of this country that produced so many talented individuals: from the most gifted Canadian artist Emily Carr to the world-renowned architect Frank Gehry to the iconic jazz pianist Oscar Peterson to the eccentric Glenn Gould to the remarkable writer Margaret Atwood and to my most favourite singer-songwriters k.d.lang and Leonard Cohen. This list can go on and on and on.

If you need more reasons to visit Canada and perhaps never leave it again then check out Isabella Mori’s 26 Reasons why she’ll never leave Canada.
Happy Canada Day! :)

The better approach would be to find out what’s the maximum allowable width for an image to fit nicely in your content area, and set/resize your images to that width. For example, on Inspiration Bit the safe width is 400px, so I try to set my images 400 px wide. There are cases though, when you don’t want or can’t end up with such a long image, then it’s best to set it to half or third of the maximum width and then align those images to the left or right of the content, letting the words to flow nicely and wrap around the image. Randa Clay has put together a very helpful tutorial on how to style images and how to align them with CSS. Finally, if you’re showcasing series of thumbnails, then set up multiples of them in rows of the same height, and equal widths.

Of course you can also let your imagination fly and come up with unusual ways to present your images. A BriefMessage, for examples, features a big image not only as a main element of each post, but the entire site as well. Displaying post’s metadata on top of the image seamlessly integrates the pictures with the overall design of the site. Jason Santa Maria aligned a huge image, 495 x 863 px to the left of the content on his recently re-designed site.

As part of my meticulous design series, I now present you with eight different ways to style images in your site.

1. CSS Drop Shadows

Ads Of The World is a site that’s all about visuals, so it’s not surprising that it pays attention to how the images are presented to viewers. All images here are wrapped in a frame with a drop shadow at the bottom. There is an extensive tutorial on A List Apart that teaches how to add flexible CSS drop shadows to your images. Ads Of The World has done it a bit differently: 3×3 px shadow.gif is tiled horisontally, and applied to the A tag, while the image itself is styled with borders, background colour and padding. Notice how the colours change when you mouseover the image.

.node-image .image a {
background:transparent url(images/shadow.gif) repeat-x;
}

.node-image .image img {
background:#E4EEF7;
border-color:#D9D9D9;
border-style:solid;
border-width:0pt 1px;
padding:12px;
}
.node-image .content a:hover img {
background:#FFE8CC;
}

2. Background image

SimpleBits approach is very simple yet effective and expandable: it’s using a tiled background image and padded picture. SimpleBits’ choice of the background image is hardly noticeable, looking more like a solid colour, however it doesn’t mean that you can’t experiment with more daring images to be used as a background.

div.photo img {
background:#E0E0D5 url(../img/bitstream/noise-earth.gif) repeat;
padding:1em;
width:49em;
}

3. background+border-top/bottom+padding

Nitram+nunca has come up with an interesting touch with its presentation of images: it’s displaying only the top and bottom borders in addition to the background colour and padding around the image. Different colours for the two borders make the pictures look embossed to the site.

.main .entry img {
background:#D9CFBD;
border-bottom:1px solid #FEFEFD;
border-top:1px solid #C9C5B3;
padding:5px 6px 6px;
}

4. Decorative Image Captions

DesignIntellection initiates a new way in using image captions with a semi-transparent layer at the top of the image. First of all, the DIV container with the class “post-image” is set with a position: relative, which allows an absolute positioning with the “title-date” span inside that DIV.

.post-image {
position: relative;
}

.post-image span.title-date {
background:transparent url(images/tnsp-black-65.png) repeat scroll 0pt 50%;
color:#FFFFFF;
font: 11px/16px Helvetica,Arial,sans-serif;
margin:5px 0pt 0pt;
padding:5px 10px 5px 74px;
position:absolute;
left:0pt;
top:0pt;
}

#main .post-image p img {
border:5px solid #E7E2DF;
}

5. Dashed borders

Image styling on Antiphrasis is not at all complicated, but combined with a few delicate details it looks very effective. The images itself are simply padded with a dashed border, but because the majority of pictures there are transparent PNGs, they look very impressive, especially when you mouseover them and the background “flashes” at you with a different colour and the light dashed border turns orange and solid.

.article-img {
border:1px dashed #9EA8A8;
padding:10px;
}

.article-img-link:hover img {
background-color:#506262;
border:1px solid #F07800;
}

Cameron Moll also uses a dashed border on his site, with no frills — just a padded image on a white background.

.picC {
background:#FFFFFF;
border:1px dashed #999999;
padding:4px;
}

6. Book-like image captions

Kyle is using various techniques to style different kinds of images on Warpspire: featured post image is prominently displayed in the site’s header; some images in the posts have no accompanying captions, while others appear with book-like captions.

.figure {
background:#F5F5F5;
border:1px solid #DDDDDD;
line-height:0pt;
margin:19px 0pt 1em;
padding:2px;
text-align:center;
}

.figure small {
background:#DDDDDD;
color:#666666;
display:block;
font-size:10px;
line-height:12px;
margin:2px 0pt 0pt;
padding:5px 7px;
text-align:left;
}

You can get inspired by more images with captions over at Elements Of Design.

7. Images with Fixed Backgrounds

If you can prepare and always resize your images with the same width, you could apply a fixed fancy background image underneath. CarnivaleDuVin, for example, is showcasing the images in an ornate frame.

.entry img.hdr {
background:transparent url(../images/hdr-img.jpg) no-repeat;
margin:-8px 0pt 0pt -12px;
padding:24px 25px;
}

The Ernest Hemingway Collection on the other hand is featuring pictures framed like photos with shadows.

Recently Nick La posted a comprehensive tutorial on how to style images with CSS and set them within some very impressive frames.

8. Digital Image Editing

You can also go with a completely different route and style your images not with CSS but in any digital editing image software that you can get your hands on.

Jacob Caas cleverly crops all main post images in a shape of a pencil, similar to the one in his logo. John Boardley beautifully decorates the images on iLoveTypography with white on black captions.

Looking at all those original ideas helped me to choose how I would be styling images on Inspiration Bit after the re-design. Have you seen some other interesting ways in formatting images on the Web?

A traditional web site design process always starts with laying out a sitemap and wireframes. Why should the blog’s design be any different? In most cases the site’s information architecture will actually dictate the direction for the site’s design.

There were definitely changes in the way people organize information on their blogs. The readers are no longer limited to the standard about-contact pages, blogrolls, categories, archives, the most popular-recent posts/comments and ads. More and more blogs nowadays display side posts with their bookmarks and latest activities from social networking sites. Some blogs even bring readers on board to contribute the best articles from all over the blogiverse. Two of the most notable examples where community was invited to be a part of the site’s content are Quipsologies (from the Community) and Noupe (DesignNews).

Nobody can deny the fact that there is lots of information that we want to share with the rest of the world or use as a promotion, so it is very important to pay an extra attention to how we structure our blogs without adding a clutter to the site.

In organizing the information architecture of a blog it is also important to know how readers behave when visiting an unknown site, and think outside of being the authors of our blogs.

One of the most frequently displayed links on blogs are categories and archives. I too have them on my sidebar, though won’t be keeping them in my blog’s new design anymore, thanks to Chris Pearson’s enlightening article on What Every Blogger Needs to Know About Categories, where he warns us that:

By giving users a list of categories to browse on your site, you are creating a psychological conundrum that usually leaves them with a severe case of analysis paralysis.
…
As far as blogs are concerned, categories are the single biggest contributor to both page bloat and link dilution, two of the most abominable SEO sins.

Pearson’s article makes a lot of sense, and he supports it with his own blog’s information architecture: the sidebar contains only four lists with the Latest Articles, Must Reads, Improve Your Blog and Worth A Look, while the Topics(categories) and Monthly Archive are kept on a single page—Archives.

Once again, while thinking about the Information Architecture for Inspiration Bit, I did some research and want to share with you what I found on how other blogs organize their site’s information flow.

1. Creative Curio

Lauren has just launched her blog’s fresh new design. It looks amazing, so make sure to visit her site and share your thoughts and opinion on her blog’s new look. She’s still working on adding more features to her site and polishing a few details, but I already like how she added her social networking links in the footer, and displaying the Related posts, along with the calls to sharing and subscribing to her blog at the end of each article. Lauren has also spent a considerable amount of time putting together a very helpful Graphic Design Glossary which she links to from her main navigation menu.

2. DesignView

Andy Rutledge is a brilliant designer, no doubt about that, and his design articles contain so much value that there’s no need to advertise the RSS feed on his blog with big icons or fancy styling. Andy places only two simple links to his Articles feed—at the beginning of his huge triple footer and at the bottom in the Colophon section, along with the author’s short bio, contact and link to his company site. There are lots of small, but memorable details like the decreasing font size in the excerpts for the three most recent posts on the home page; various bits of articles from the Web in a section, cleverly titled as Ephemera; minimalistic but highly user-friendly and space-efficient switching tabs in a large footer that features Andy’s articles on various topics. Nothing distracts the reader’s eye when reading an article on the site, as there are no sidebars, at the end of the post visitors can browse through the same tabbed Archive we saw on the homepage.

3. HellYeahDude.com

Patrick Algrim’s site design is all about grids, organization, minimalism. Some of the interesting details that stand out are the small navigation in the search box area, the fact that Patrick’s photo along with a short bio appears only when previewing a single post (something to consider for blogs with multiple authors), the comments area is aligned with the rest of the large footer section, making it look more as a part of the site’s overall information architecture rather than a continuation of the post. On the home page the Discussion section is replaced with the Most Recent posts from the Archive. Even the ads placement on the blog was carefully calculated: small images with sponsor ads look more like portfolio thumbnails, and at first I haven’t even noticed that there are TLA ads in the left bottom section of the site.

4. AIGA

If even for some smaller sites an efficient Information Architecture can present a challenge, how do large sites with a complex data structure like news sites, portals, deal with it? American Institute of Graphic Arts (AIGA) has managed it masterfully. There are a few organizational tricks that even smaller web sites can find valuable and applicable to their structure. AIGA’s homepage is filled with tons of information: a featured most recent article is followed with four previous articles along with short excerpts, five most recently commented and popular posts appear after, design jobs, design archive and a calendar of events complete the left section of the page; while the login area, search bar, news and sponsored ads are all displayed in a sidebar. Once we click to read an article all the extra curriculum data disappears, including the footer, and is replaced only with the information relevant to the particular article—Related Images, Content, Event, and a small tabbed section with the recently commented and popular posts.

5. Jontangerine

Jon Tan’s personal site is all about paying attention to details—from exquisite typography to an elegant and user-friendly information architecture. The two sidebars on the homepage are uncluttered and contain only a short bio on the left and a collection of “Curious Asides” with a last link that takes to another page that displays “Stubs via Del.ico.us”, “Moments via Twitter”, “Photos via Flickr” that we can all subscribe to. Both homepage and single post’s page feature a large three-columns section above the footer with interchanging sections: the featured articles, comments, conferences and “Snippets from the Silo” with some very helpful design tutorials/articles are on the homepage, while the latest posts, comments and blogroll on the single post page. Article’s page is once again uncluttered: Jon displays some post-related meta data at the top of the sidebar and once in awhile an auxiliary related data, appears on either sides of the article, making the experience similar to reading a textbook.

6. Astheria

If you thought of Andy Rutledge’s and Jon Tan’s sites being very minimalistic, check out these next two blogs. Astheria is designed by Kyle Meyer, who explained the reasons behind his blog’s super minimalistic design being the result of frustration when “every time I come across a website and am forced to bump the text size up or wait for all of the imagery to load up so that I can enjoy the content“. On Astheria the content definitely gets the royal treatment: the homepage features the most recent post, with a huge font size set in 4.4em, two columns with five latest articles and posts (not sure though how does Kyle determine what is what), a single line footer with the subscribe link, a very simple menu (with a link to archives that features all articles in a chronological order) and even a simpler logo. The single post’s page once again starts with a huge headline and ends with a collection of Related Reading links and social bookmark — no sidebars, no footers in sight.

7. Andrew Ricmann’s Perspectives

If Kyle has placed a tiny logo on Astheria, Andrew decided that the HTML title of the blog is sufficient for readers to see the blog’s name. He also ruled against having a dedicated homepage on his blog, and greets visitors with a full article, completed with a comment form and readers’ comments that start somewhere in the middle of the post in a right sidebar. The navigational menu comes with a drop down list for archives and categories. A similar drop down appears in the post’s breadcrumbs.

8. Warpspire

Kyle Neath’s impressive tricks start with a usage of an image underneath the Featured Article, which can be swapped with the Blog’s Archive, or Experiences or links from Interwebs when you click on the menu items in the “30 Second Tour” section below the banner-like image. I also like how you can switch between listing Tips/Resources, Reviews and Marks—very space efficient. When viewing a single post, the reader can check out the Hot Topics on the sidebar or visit Kyle’s other projects.

9. I Love Typography

What can be said about John Boardley’s beautiful site that hasn’t been said yet. Recently John updated the look of iLT’s main navigation to make it more prominent amongst the site’s rich information architecture. ILoveTypography is one of a few sites that display a complete list of all articles ever written on a sidebar. With twice per week posting schedule John has managed to publish over 100 posts in less than a year of iLT’s existence. However, not everyone can get away with such a long list of past posts on a sidebar, unless you tend to publish very long articles that are so characteristic for iLT. John even created a long list with his favourite typefaces on the second sidebar of the site that’s updated with new type names/links every month.

10. A List Apart

Of course, everyone knows this mecca for all designers and developers, but it’s worth taking a second look at ALA’s information architecture. If this site has managed to handle elegantly its vast amount of articles and pages, then no personal blog has any excuse for a poor site structure and navigation. There are four ways how a reader can navigate A List Apart: viewing a complete list of articles by clicking on the first menu item—Articles; clicking on Topics provides us with a short list of the site’s main topics (that also appear on the sidebar) along with a description and links to subtopics; clicking on linked topics in the breadcrumbs of a particular article we read; searching ALA via search box.

11. Bearskinrug

Kevin Cornell’s site is not only pleasing to look at, but also a joy to browse and explore. The content area of the homepage is split into three columns: the first column is reserved for the actual article, the second column features three latest articles, the last column starts with a ravishing search box, followed with the list of Recent Links where Kevin shares interesting snippets from the Web. On a single post page, the content in the last two columns is replaced by Comments in the middle, and on the far right the Recent Articles are presented as little thumbnails with post’s title and date placed into ALT and TITLE attributes of the corresponding image. Also make sure to check the tabbed section on the right of Bearskinrug’s Store section—such an artful solution to display tabs as illustrations.

12. Rob Goodlatte

Rob Goodlatte’s stunning web site utilizes various navigational elements—top menu, right sidebar and big footer area. The most recent posts gets the spotlight on the homepage and is followed by four previous posts split into two columns. The content of the sidebar changes depending on whether you’re on the homepage or reading a post. The footer always displays the latest tweets, features three posts from four categories and links to Rob’s social activities. I really like how he displays three most popular posts on the single post’s sidebar—the text links are indented with “-9999px” and instead replaced with the images of well-crafted magazine-like titles.

13. Designing The News

Dave Bowker’s elegant site sports a three-column layout with a very minimalistic middle column, where he displays only a limited post related meta data, which give lots of breathing room to articles on the site. The last column showcases links to other sites divided into five different sections. I especially like the way Dave’s portfolio page is organized.

14. Veerle

Veerle’s blog is one of the most well-known web sites on the Web. She’s got lots to offer to her readers: art projects, tutorials, articles, workshops, job ads. There’s certainly lots of information on the site, but Veerle has victoriously dealt with the complex structure by integrating various navigation options for her readers and visually separating the main content of the site from the auxiliary data. As soon as you switch to the single post view the complex structure is replaced with a simple user-friendly layout, where the article gets the prominent spotlight on the site.

15. Design Adaptions

Recently Charity’s site has received a fabulous makeover. I really like her implementation of the data organization on her blog. Depending on whether you’re on the homepage or reading an article on the single post page, the surrounding navigation aids you in finding a relevant and valuable information and keep you glued to the site, exploring it. The homepage features a horisontal row with the photos from Flickr, followed by the set of external links that encourage visits to other sites. Even though the tabbed section stays on a single post page, Charity complements it with the “possible related” posts. The footer links are changed as well, and turned into a showcase of the most popular posts from three different categories.

16. RA Project

When browsing RA Project you can sense that Ronald Huereca has put a considerable amount of thought into improving a user experience on this site, after all the site’s purpose is to place readers first. The homepage features an excerpt from the most recent article, that’s complemented with the list of five recent articles on the right. AJAX carousel is a geeky and quick way to present readers with a whole bunch of recent articles that they can easily browse. Three articles from different categories are featured below with the list of related posts. The footer presents readers with a short about section, del.icio.us links and Readers First award recipient. Since it is a multi-authored blog, Ronald cleverly displays the author’s short bio before each post, followed by a number of links from the same category as the post, and more articles from the same author.

What other sites would you include to this list? How do you browse other blogs as a reader? What are the first things you look at after reading the post that you liked? What do you find most frustrating when browsing an unknown to you site for the first time? What would you like to see on a web site that you visit regularly?

With this post I’m starting from the area of a blog that’s often left ignored — headline, date, author data and number of comments. Take a look at the 16 exquisitely crafted headlines below. It’s obvious that the designers have put lots of thought and payed a very close attention in getting them to perfectly fit the design and add a distinct character to the site’s look and feel.

I called them “dramatic” because some of them indeed appear rather theatrical though not being too showy, others seem to be emerging from antique pages of books or magazines, while others simply manifest themselves with a bold statement without the use of Impact.

1. BEARSKINRUG

Talented illustrator and designer Kevin Cornell most probably loves theatre, just check out his Shakespearean comic and, of course, the site’s design that looks more like a washed out old poster where every little detail was carefully thought out.
I also really like the way he displays the site comments in the adjacent to the post column.
Both the post’s heading and the date are using Georgia, although the title is displayed in a much larger (font-size: 160%) size and italicized. With just a little touch like adding an “elaborate” divider as a background image to the paragraph with the date, he makes it stand out among regular looking headlines on other blogs. Add to that a special treatment for links to previous and next posts: first, Kevin is not displaying those post titles, second, because of that he can safely replace the text with image links that glow on mouse hover (note that he’s still keeping the text link alternatives by moving them outside the windows area: text-indent:-9999px;).

2. VIGET-INSPIRE

First of all, I hope that designers from Viget Labs will one day write a tutorial on how they achieved such perfect watercolour drawings for their site. They continued with the watercolour theme and even “washed out” the pictures of the authors.
The author’s name, along with the categories, cleverly listed as “on the topic of…”, are displayed in 0.85 em all caps Georgia with letter-spacing: 3px, and look very different from the post’s title that uses the same Georgia face, though sized as 1.8 em. The date and the number of comments are displayed in Verdana.
The gentle lines underneath the title, authors and dates section actually all come from a single image, that’s called from the DIV after the title’s H2 tag, but raised with a negative margin so that the title too shows up above the understated dividers of the background.

3. DESIGN*SPONGE

If for some reason you haven’t visited this site yet, please, do yourself a favour and spend at least 15 minutes there. I guarantee you’ll get hooked with those DIY projects, sneak peaks at other people’s room decors, before & after transformations, and so much more.
A rather interesting approach on using HTML tables for building the structural carcass of the site, and only then going with DIV tags for further details. Once again we see one attractive background image underneath the category/date/title/ sections. An interesting detail is that there are eight different background images (as far as I could deduct) that alternate (according to an unknown to me formula). Everything is displayed in Georgia, but in different sizes and styling — uppercase for the categories, but lowercase and italic for the larger titles.

4. KHMERANG

Thankfully, Mr. Khmerang has written a tutorial on how he achieved that worn type for the headlines. Rather than using sIFR where Flash is replacing the text, the text stays untouched but is “covered” with a worn image.

5. TYPESITES

Typesites is a new blog (launched in January, 2008 by Kyle Meyer) that offers a “weekly showcase of websites with interesting typographic design”. I’ve discovered this site only a couple of weeks ago, after my own “investigations” on sites with exquisite web typography. Kyle used Helvetica Bold for the headlines and Helvetica Neue in a much smaller size for all the byline details like the date, author’s name and the number of comments. He achieved a very dramatic effect by displaying them on an almost black background (#181818), with the text set either in white or bright yellow (#FFD200) — so simple, yet so effective.

6. I LOVE TYPOGRAPHY

Of course, it is expected to see type magic in action on a site that belongs to none other but Mr. Typography himself. Aside from the outstanding content, John’s superb eye on typography and focus on details cannot leave us disappointed. The post’s title is set in large Georgia, while a clever addition of a byline, à la 2nd title, set in Lucida Grande with an elegant branch divider in the background image, makes the articles look designed more for a book than a site.

The date treatment is very simple, yet attractive with the bigger number in red (#CC0000) and so perfectly aligned with the comments are. The trick used to display the comments is quite ingenious — the raised numbers with the opening curly brace are set inside the SUPerscript, the closing curly brace is displayed in a big size, while the word ‘comments’ inherits the parent style:

<span class="bigdate"><sup> {74</sup></span>
comments <span class="bigdate">}</span>

7. GROW COLLECTIVE

Grow Collective was designed by Jon Tan, whose personal site was featured in my series on going behind the scenes of exquisite Web typography. So it’s not surprising to see beautiful type treatment on Jon’s company site.

Everything is set with lots of breathing room that makes the beginning of every article very open and inviting. The title is set in Georgia, in a rich coffee colour (#331100), the summary below is displayed in italicized grey (#999999) Georgia. The rest of the auxiliary data (author’s name, comments, categories, tags) is set in small Verdana.

8. A LIST APART

I’ve already dissected this stunningly designed site in my behind the scenes of web typography series, so I won’t be repeating myself on how to achieve the headline effects of A List Apart, but I just couldn’t omit listing this site here as well.

9. BLISSFULLY AWARE

Designed by Joshua Lane, this site looks more like a menu of a high-end restaurant, so the use of decorative elements fits the style very well. All text in the post header is displayed using Georgia, and is distinguished with the use of different sizes and styles. An interesting detail here is that to achieve the pale, fading text effect Joshua is using CSS property opacity rather than picking a pale font colour. For the previous/next entry links he specified text colour to be white, but with opacity:0.25, however the entry’s byline (with the author, date and comments) is not using the opacity feature anymore, it’s set with colour: #E6D9BF.

10. ROB WEYCHERT

As Rob Weychert himself confessed, the design of this site was inspired by his love of “the densely ornate editorial layouts from the late nineteenth and early twentieth centuries”. Despite relying on only one font, Georgia, Rob’s use of different colours (#000033 for the title and #993333 for the date), styles (all caps vs. normal), sizes and an unusual alignment (the date is set with a specified width and floated to the left, allowing the content to wrap around it), made the header section of the posts highly attractive. When you mouse over the prev/next links, the title of the linked posts will popup, so you can see what they link to.

11. CAMERON MOLL

If you rather go with something simple, you would appreciate a classic look of Cameron Moll’s style. Add a decorative divider above the title, stick to Georgia, use letter spacing to control the look (letter-spacing:-1px; was used for the headline) and add special characters before/after the date. One thing I’m missing in Cameron’s headline treatment is the absence of a link — I have to scroll all the way down to find the permalink or click to read the comments.

12. MATT NORTHAM

Matt is playing with two fonts — Times and Verdana — to style the post’s header. The decorative swooshes before and after the date are separate images. The date text itself is set with letter-spacing:0.33em, all caps Verdana in bold. The headline is displayed in a bold big lowercased Times. All the additional meta data once again is set in Verdana.

13. COUDAL PARTNERS

Even though Coudal Partners is not a blog, the way Coudal has styled the headlines can be easily adopted for blogs. The difference in sizes between the two titles is striking. Interestingly enough, H4 was used for the large headlines, while H1 is used for the smaller additional title, displayed in Gill Sans. I also liked the use of two colours in the top title.

14. LADY OMEGA

Can you find a more dramatic site than this one? To achieve a similar effect on your blog you should set the title in Georgia, in dark pink (#EA3690) on a black background, add some cute icons before/after all the auxiliary data below the post, float the date to left and style it as you like.

15. WEB DESIGNER WALL

Even though it’s a very popular site and most of you frequently visit it, I had to feature it here as well. A simple watercolour brush stroke in the background makes the header look artsy, and the comments cloud only adds the magic feel to the site.

16. SHAUN INMAN

It is impossible to talk about the type treatment for headlines and skip sIFR (Scalable Inman Flash Replacement) technique. And what a better site to show as an example than Shaun Inman’s (the originator of sIFR) own blog. Shaun uses Univers 59 Ultra Condensed typeface in the Flash replacement, with a striking alteration in colours for the words in headlines. I’m not too crazy about the disappearing headlines on mouse over, but I do like the minimal modern look of the site.

Hope you found those examples inspiring. What other sites would you add to this list of dramatic headlines?