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

But Zak, FOSS ombudsman and advocate, whose love of Free Software and Open Source is turning him into a penguin, decided to morph the “7 Things you don’t know about me” meme into the “Seven things that you probably don’t know about me that I didn’t know about myself until the last year or so”.

However, sticking to a long established tradition on Inspiration Bit, where I share things in bits (2, 4, 8, 16, 32, 64, etc.), I’m too altering this meme a bit and listing not seven but eight things I did not know about myself until the last year:

1. …I’ve developed an acute allergy to lists, the ones that contain numerals in the headline, so much so that I stopped advertising numbers in my post titles and am trying to come up with alternative ways to go about lists for my articles.

   I don’t have anything against lists, they indeed break down the long content nicely, nor do I condemn other bloggers for posting numerous articles with 66 Hottest Portfolios or 777 Designers You Must Follow on Twitter, but I’ve decided that I won’t be contributing to that numbers pool anymore.

2. …Leaving all fears behind I finally quit the corporate world and became my own boss. I have also learned that running my own show is more challenging than I prepared myself for, but after getting that sweet taste of freedom I don’t want to give it up.
3. …while running my own design studio I will be building web sites for clients from all over the world, even from New York.
4. …I’m capable of simultaneously working on projects that run on three different CMS (eZ Publish, Drupal, WordPress) and teaching students how to build custom CMS solutions with PHP and MySQL.
5. …I will develop new passions and interests that will include jewellery design, interior decorating, and obsessive collection of beautiful things.
6. …Never thought that I will be watching Seinfeld and Desperate Housewives with so much interest. And before you start thinking in a wrong direction, let me surprise you with another revelation: I’m watching both shows with my husband, and the other day I overheard him re-telling an episode from Desperate Housewives to a friend of ours.
7. …Became an impulsive shopper and buy things I’ve postponed buying or had second thoughts about in past (Nikon D90, numerous magazines and books both for myself and my daughter’s ever increasing library, are just some of the examples).
8. …I too would catch the Twitter fever and Procrastinator became my middle name, but my social network grew to proportions I could’ve never imagined before.

So there you go. I won’t be tagging anyone, but feel free to spill some beans about your own self discoveries from 2008.

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!

Leon Paternoster‘s minimalistic sites have long been on my To Review list, and since then they even underwent a complete overhaul. Leon is an ardent crusader for accessible and readable web design, he’s keenly interested in typography and is irked every time he sees a web site with illegible text or where a chunk of text was saved as an image (I feel your pain there, Leon).

So it comes to no surprise to see his own sites with very minimalistic, stripped down to bare necessities, designs. He’s also released two minimalistic WordPress themes: Into the White (which was featured on Smashing Magazine) and Velouria.

Single page beauty

The style of his personal single page web site was greatly influenced by Franz Neumann’s elegant creation of Stories & Novels. But after the initial resemblance in the layout and minimalistic design, the similarities end.

Leon Paternoster's sophisticated minimalistic homepage

The use of Adobe Garamond for the body text on Stories & Novels makes me feel I’m reading a professionally scanned copy of a beautiful book online. Leon, however, chose to go with a safer font for Web: Georgia. In fact, with the exception of the Garamond for the fancy ampersand, the entire page is set in Georgia. And I actually prefer the clearness achieved by a gray text colour and bigger font size on Leon’s site vs. the black and small text on Stories & Novels, that make the latter one appear a bit blurry on my screen.

An interesting thing to note about the different design practices is the way that red/burgundy line was achieved on those two sites: an empty DIV with a red background and 2px height on Stories & Novels vs. the dark red line set to the HTML tag with a top 0.2em border on Leon Paternoster’s.

The only critical comment I have about Leon’s personal page is the slightly excessive use of white space. I do like to see designers practice the use of negative space in their designs, but because there are no images on Leon’s page, no major distractions (I don’t count the red link lines here), lots of white space feels a bit overpowering and unnecessary. I think by slightly reducing the space above and below the site title and the introductory paragraph and a tad tightening of the line-height in the Work area, all parts of the content would tie with each other more effortlessly. What do you think?

One thing that puzzles me a bit on Leon’s homepage is the absence of the red star symbol anywhere on the page, yet it was used as a favicon for the site? I wouldn’t really mind seeing that red star appearing somewhere in the content for some additional visual interest. Perhaps Leon could add a footer text with some copyright, credits stuff, preceded with that star icon? On the other hand, why not using the logo featured on the blog as a favicon?

Blogging Swiss style

The blog link from the homepage takes us to a completely different design of Leon’s blog. The first thing that catches the eye, besides seeing the almighty Helvetica everywhere on the site, is the post excerpt on the left, set in a huge (2.5em) font size that looks more like a quote than an excerpt, with the post’s title underneath looking more like the quote’s source. At first it got me confused, thinking that this must be Leon’s most recent post. But as it turns out, the featured excerpt comes from the latest Must Read post.

Leon's blog has gone sans-serif with lots of Helvetica, unlike its parent home page that's set in Georgia

The ‘Must Read’ theme continues throughout the blog: you can see the list of Must Reads on the homepage’s right sidebar, and the Archives are starting with the list of ‘Read these first’ posts before switching into the standard chronological order.

Saying No to images

Staying true to his minimalistic ideals Leon doesn’t believe in using images to support the design (you will still see the images within the content though), so even his logo is formed with a few simple CSS strokes: red background colour and padded white lowercase initials inside the square.

The colour scheme is super minimalistic as well: grey (various shades of it) for text and hover links, blue for links. And as I mentioned before Helvetica is the main font on the site, with the exception of Georgia in italic for certain phrases with an emphasis on them and the latest Tweet in the right side of the footer, plus Garamond italic is used to style the preposition “by” in the post’s author details.

The blog is based on two columns, with a minimal dynamic content on the right sidebar that changes depending on where on the site you are: on the home page (and Search results page) you see Must Reads and Recent Posts, on single post pages you see only Recent Posts, on About page you can learn a bit more about Leon, while on the Archives page you see only a list of tags.

Even the site navigation is reduced to the minimum: there’s no contact page, only email address, so you’re only left with unadorned list of three main pages—Home, About and Archive, displayed on the right side of the header below a simple search box.

Blog Critique

My critique is going to be as minimal and laconic as the design:

• I find Helvetica set to default 16px (100%) difficult to read in long paragraphs;
• I think the lists need some breathing space between the list items;
• Would love to see more colour on the site: perhaps re-using that same red from the logo/favicon on link hovers?
• Too much Helvetica can be overwhelming, some more typographic colour wouldn’t hurt either: perhaps more Garamond treatment, more font size variations?
• Not crazy about the date/author data styling above the post (hint: Garamond would look nice here not only with ‘by’);
• Once again puzzled about the use of the star symbol as a favicon, and not seeing that star anymore on the rest of the blog.

Overall it’s a pleasingly looking user-friendly blog, where the content is the site’s main feature with no competition from design. Over to you now: what do you think of Leon Paternoster’s homepage and blog designs? Would you recommend anything to improve the site’s architecture or style, or do you like the simplicity of it and wouldn’t ask to change a thing there?

Chances are, if you work in graphic design (and this applies even if you basically live online), you’ve had a few experiences with getting something printed. Whether it’s wedding invitations or print promotion for your web presence, the day will come when you have to ask yourself: how shall I print?

Some folks go cheap. Others go local. And increasingly, nowadays, designers and businesses are deciding to go green.

Enter The Green Printer

If you’re a printer, then ‘eco-friendly’ or ‘green’ printing is the sexiest thing going on in your industry. It’s also one of those terms that can come off sounding a bit like an lumbering oxymoron. How can a process that is so resource-intensive possibly be environmentally friendly?

The whole truth is that it can’t. We may be obliged to stand up and admit to the crowd that our profession will never save the planet. That being said, printers and designers can make myriad small changes to our process in order to prevent pollution, reduce our ecological footprint, and revision our industry to be, if not the answer to all of earth’s problems, then at least part of a sustainable future.

So again the question, this time asked by the printer herself: how shall I print?

Not as easy to answer as it sounds. Every printer that’s taking steps to green their process has a different take on what qualifies as eco-friendly printing. And in an industry that’s exploding on a daily basis, what’s green today may be considered toxic tomorrow.

Let’s take a look at the debate.

The Paper Puzzle

A recycled, reusable paper bag, complete with a green mission statement, from International Paper.

The percentage of recycled content that tends to matter to consumers works in direct relation to how much it costs to print. A paper with 30% – 50% PCW will likely cost the same as regular printing, while 100% recycled paper may come at a premium.

Other green printers choose to forgo recycled paper in favor of paper made from farmed trees. Often, paper from farmed trees is milled and shipped locally, cutting down on the carbon costs of printing.

Ironically enough, when printing on recycled paper first came into vogue, many boutique printing houses were buying recycled paper from overseas – a typical (and often repeated) case of delivering the product, while kind of missing the point. Recycled paper: good. But international shipping? just not great for the old ecological footprint.

The best way to get the skinny on a printer’s paper is to trace it back to the mill that supplies it. A good rule of thumb is that if the mill and the paper are certified by the Forest Stewardship Council, you’re good to go. The benevolent FSC is the golden standard when it comes to responsible paper buying.

Design For Your Green Medium

Combine interesting textures with natural imagery to create designs that speak for the environmentally-concerned community.

Choosing to design for a matte finish is also a good way to express your eco-conscience to clients and consumers. Textured paper, and themes that identify easily as ‘earth conscious,’ instantly conveys that earthy vibe that’s so popular in eco-design right now.

Inquiring Into Inks

In the world of eco-friendly inks, the term “Low-VOC” says it all. Printer inks have traditionally been lead-based, with a high content of Volatile Organic Compounds. VOCs are basically vapors that create air pollution, and seriously affect air quality in the workplace. Lead-based inks are also toxic in general, take a long time to biodegrade, and are difficult to dispose of safely.

An eco-friendly print design doesn’t necessarily mean dull colors!

And all those rumors you’ve heard about soy and veggie inks being dull, easily faded, and difficult to work with? So ten years ago! If you want to keep it a secret, no one will ever know your designs were printed using earth-friendly inks.

But Who Does It Best?

Once you’re an expert on papers and inks, you’ll still need to choose the right printer for your project. Lithographers, screen printers, digital printers, and sheetfed offset printers will all argue that their process has the most to offer. The questions you need to ask to find the solution that works for you are:

• Is the printer replacing chemical-based processes (like platemaking) with water-based, or even waterless processes, wherever possible?
• Is the printer recycling, and using recyclable materials, wherever possible?
• Is the printer using electronic billing to eliminate paper waste?
• Is the printer working with local vendors and suppliers to cut down on their carbon footprint?
• Is the printing engaging in any extra green initiatives in the community, such as supporting clean-up efforts, investing in alternative fuel and energy sources, and contributing to green causes?

Think it might be tough to squeeze all these details out of a printer? It shouldn’t be if the printer is sincere in her effort to make a difference. If a printer is being cagey and evasive, you can bet they’re advertising a stronger green ethic than they’re actually living.

In fact, if a printer is serious about catering to a green community, they should have a ton of information readily available on their website.

All-Around Eco-Ethics

The last check point in the above list might seem a bit extreme, but the fact is that one of the best things printers and designers can do to offset their environmental impact is to be ecologically responsible in other areas of their lives.

To ‘green’ the industry, printers aren’t just thinking about recycled paper. They’re thinking about how they get to work in the morning, where the food in their cafeterias comes from, and what they can do outside of the office to make a difference.

Bring Together Green Design, And Green Living

By ‘ganging’ small print jobs together onto a single sheet of paper, printers cut down on paper waste.

• Reduce paper consumption by sending postcard mailers instead of cards in envelopes.
• Reduce ink waste by creating simple one and two color designs.
• Work with a gang-run printer to cut down on the waste paper created by a project.
• Find a local printer to cut the carbon costs of shipping.
• Stay away from foil stamps, plastic/metal hooks and latches, glues, and other add-ons that make recycling difficult.
• Design with a green message. A positive statement about environmental stewardship can be sent not just with copy and logos, but through the style and tone of your design.

As ‘green design’ comes into its own, it’s increasingly taking on a look and feel that makes it stand out from the ultra-polished, plastic looking majority. And for many businesses and consumers, it presents a very appealing alternative.

Expressing a message of environmental concern and desire for change through graphic design may be on of the most powerful things our industry can do to actually make a difference.

Like Your Mom Always Said, Just Try Your Best!

As I mentioned earlier, it’s a semi-depressing fact that green printing PROBABLY isn’t going to save the world. Even at it’s best, logistical and ethical challenges do abound, but around the office where I work, that can’t-win-don’t-try attitude isn’t allowed. Just because printing may never be perfect, it doesn’t mean we can’t constantly be trying to make improvements, brainstorming for new ideas, and challenging ourselves to print, design, and think greener every day.

As long as our industry, and every industry, continues to make the effort, rather than throwing up our hands in despair, we can but move forward into a future that is green, sustainable, and as beautiful as we all imagined it could be when we first fell in love with design.

What’s your approach on going green in your daily activities and work?

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.

I will be dedicating a separate post describing my design process, share with you a few wordpress tricks that I’ve implemented here. For now I’ll just give you a brief overview of what had happened here in a quick guide tour:

• Taking a different approach

  I’ve wanted to design something different, if not completely new, but at least something that you don’t often see on other sites, so I aligned the entire page to the right, kept it under 800px and added a big fixed background image, which gets revealed more when you increase the size of your browser’s window. Another reason behind using that big background image is the convenience of changing it anytime I have an interesting image to add. For now I’ve used one of my old drawings in hopes of motivating myself to get back to drawing.

• Purple and Green should always be seen

  Purple and green colour combination has been my long time favourite so the decision to go with it for this blog was the easiest one to make. Later I will show the image that served as inspiration for my purple & green theme.

• Grid and lots of it

  I have a confession to make: this is my first design that’s been completely based on a heavy grid structure. At times I was thinking that I’m back to taking my Math classes, that’s how often I was catching myself with a calculator and numbers on the paper. I don’t even have a Photoshop mockup to show you, since I’ve done there very little and quickly switched to coding the entire site with HTML & CSS.

• some PHP magic

  I’ve always wanted to customize more of what’s possible with WordPress by adding some custom PHP code. As a result you can see PHP working its magic with displaying the months of the three most recent posts in the header in Roman numerals instead of the standard Arabic ones. You can also see some custom PHP in displaying the article headlines in two iBit’s signature colours: purple and green.

• Reviving the old bits

  It’s been my long time goal to bring back some of my old posts from collecting dust in archives, so I’ve put together Selected Bits section, where I hand-pick and randomly feature some of the popular, recommended and favourite posts (as usual keeping them all under 8 bits each).

• Getting more social

  I’ve always wanted to spread more link love, so now I’ve got a blogroll here with a couple of dozen links that randomly change with every reload, so in the end only 8 of the links show up at once. I’ve also started an Asides section, though I’ll most probably be changing the way I’m currently incorporating it. And lastly, I’ve added my social networking profiles here, so if any of you feel like stalking me on Twitter, last.fm or facebook, feel free to do so.

As I mentioned, there are still many things on my to do list for Inspiration Bit: I’ll be changing the sitemap page structure, styling the Contact page, updating my about profile and presenting my portfolio. I have yet to work on iBit’s new logo. What you see right now in the header is just a temporary font and styling.

One of my favourite writers, Antoine de Saint-Exupery, once said

You know you’ve achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away.

I wonder when, if ever, will I get that feeling with Inspiration Bit’s design, how long will I be adding and removing things until I get to that perfect balance? Only time will tell. One thing I can tell now is that I’m feeling soooooo relieved that after such a long time and so many promises I managed to complete this new design. You can’t even imagine how dreadful I was, I couldn’t wait to find time and launch this new look, I couldn’t even make myself to post anything because I couldn’t stand looking at the old iBit any more (how could I keep writing about beautiful design if my own site is lacking one). So hopefully, you will forgive my longest silence ever on this blog and will click away from your RSS readers to check out iBit’s new look.

Even though I know this new design is far from being perfect and complete, but I got my wings back and can’t wait to get back to blogging, completing and publishing the numerous drafts that I’ve managed to accumulate. So stay tuned, lots of interesting and inspiring stuff is coming up on Inspiration Bit.

Ok, have your say now. What do you think of iBit’s makeover? What do you like and dislike? What would you like to see here that I haven’t thought of? Since this design is still under construction, I’d love to hear your constructive criticism so that I can incorporate it with all the upcoming changes.

And last, but not least I’d like to thank Jon Tan for building a site that was constantly open in my Tabs whenever I was working on iBit’s re-design. His SILO was an invaluable resource for calculating my font-sizes and line heights in CSS. Thank you, Jon.
There were many other sites and articles that helped me a great deal and I’ll be mentioning them all in an upcoming post on Inspiration Bit’s design process.

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.