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.

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?

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.

So while I’m working hard at completing the re-design of Inspiration Bit, I’m grateful to be given more opportunities to continue with my Design Critique series. This time, a very talented Simon Pascal Klein asked me to take a look at his wonderful creation—Klepas.org.

Simon Pascal is passionate about typography, and it definitely shows up in the design of his personal site. The clean layout is based on a strict four columns grid where the section in the middle spans over two columns. The typographic choice is very straightforward: most of the site’s content is displayed in Georgia, while Helvetica (with the fall-back to Verdana) is designated for auxiliary notes on the left sidebar and the introduction text in the comments area.

I like how Simon injected the site with a few personal touches like the Lion symbol on the homepage that represents his sign of birth (Leo), and the black&white photo with a cup of coffee that manifests Pascal’s love of java. He also started a very interesting sister-site inadvertently called Typenuts where he showcases some very curious and interesting typography-related finds, like the photo of “a personal letter, signed by Goethe”.

As much as I like the look and feel of Klepas.org, I would refine a number of things there:

• Déjà vu

  One of the first things that caught my attention on this site was the use of the exact same fleuron in the date treatment as the one in iLT’s byline. Perhaps had I visited Klepas.org prior to seeing iLoveTypography, I would’ve simply noted an interesting ornament that goes really well together with the medieval and understated style of the site. Personally, due to an epic popularity of ilT, I would change it with some other decorative element, while sticking to the same classical feel.

  

• An odd colour scheme

  At first it appears that Klepas is adhering to a typical minimalistic colour scheme of black & white with one accent colour that becomes increasingly popular with many sites that focus on type and achieving a rich typographic colour rather than employing various hues of chromatic colour. But upon further exploration of the site we notice that besides the prominent red, Simon Pascal is making use of other colours to differentiate links from the rest of the content: orange for hover links and purple for visited links. To me this colour scheme looks slightly odd, the purple visited links look a bit displaced, what do you think?

  

  Furthermore, I find it slightly confusing to see different link treatments in various parts of the content: some flash with a colour of orange on a hover, others simply brighten up from a light grey to a darker shade, while others display an underline.

• Shouldn’t the note be noticed?

  While I do like the attractive red fleuron that precedes the “notes” on Klepas.org, I don’t think that feature alone makes the notes distinctive enough to differentiate them from the rest of the content. Perhaps a slightly decreased font-size, or a lighter font colour, or some kind of thin line separators above and/or below the note would make the notes to stand out better.

  

• Calendar styling

  I’m not a big fan of calendars on the blog’s sidebars, but I might be in the minority here. Nevertheless, I would’ve preferred to see a more original styling for the Calendar on Klepas. I like Rob Goodlatte’s approach to showing the dated archive on the sidebar.

  Speaking of archives, one thing that I miss a lot on Klepas.org is the way to see some of the old content of the blog. I think new visitors to Klepas would really benefit from features like Related, Recommended, or most Popular posts, and Archives page (there is an Archives page for Typenuts but none for Klepas main site).

• Comment wish

  This is more of a personal preference rather than a critique, but I’d really like to see some added features that would allow me to instantly recognize the author’s responses from the rest of the comments on the blog. Right now all comments—visitors’ and Pascal’s—look the same. This is something that I’d definitely be adding in Inspiration Bit’s new design.
  

• Bulleted Lists

  While I do like the way Simon styled the hanging bullets outside of the main content column, I think the bulleted lists would become more legible and easier to read with the added margin space between the list items.

I’m not expecting all of my suggestions above to be worthy of consideration, others might be okay with the way things are right now, but I hope Simon Pascal would find some of them helpful. Overall, I really like the classic vibe that comes from Klepas.org. The auxiliary notes on the sidebar that accompany Simone’s articles help to break down the reading of usually lengthy and always interesting posts.

What are your thoughts on Klepas.org? What would you like to see improved or changed on that site?

After seeing Designr, the personal portfolio site of a talented designer from Italy, I’m starting to think that all portfolio sites should stick to one page only format. Take a look at Piotr Fedorczyk’s web site: it includes all the essentials for a portfolio site—About section, selected work, portfolio examples, contact form and even a social profile. A gentle colour scheme, beautiful typography, intuitive navigation, some jQuery trickery and lots of creativity make this one pager a joy to look at and explore.

The first thing that catches the eye on Designr is the use of a charming Balmoral typeface for its logo. Piotr follows it up with a site description that’s perfectly matched in a classic Baskerville italic. In fact the entire page’s font is based on Baskerville with the fall-back font Palatino Linotype.
body {
font-family: Baskerville,'palatino linotype','times new roman',serif;
}

Speaking of CSS: believe me, I’ve seen my share of CSS code, with myriads of code styling ways, but I never came across of such a semantically beautiful documentation of a stylesheet as the one by Fedorczyk. It makes studying the code so much simpler. You be the judge:

Due to its extremely light contrast the diamond-shaped background doesn’t interfere with the dark grey writing, and actually adds interest to the simple two-column layout. The headlines are displayed in blue all-caps on a very light grey background, with a thin dark border underneath.

The gorgeous drop caps deserve an extra attention. The first capital letter of each section is separated from the rest of the content and displayed on an ornate light background image:
.miniatura {
background:transparent url(/img/dcap-backg.gif) no-repeat scroll center;
display:inline;
float:left;
font-size:3em;
line-height:0.8em;
margin:0.05em 0.14em -0.01em 0pt;
}


The bulleted list is styled with lovely blue asterisks, and the text is reduced in size. After clicking on any link on Fedorczyk’s page you’ll discover another fascinating trick: all visited links are styled with a tiny blue checked mark in the background. What an ingenious touch, now it’s so easy to see which links I visited—they’re all displayed as “checked”.

a:visited {
background:transparent url(/img/checked.gif) no-repeat scroll right center;
margin-right:2px;
padding-right:17px;
}

And to recap, here’s an example of how your content would look like if you apply Designr styles:

Once you’re done studying all that typographic goodness on Designr, check out some very impressive jQuery effects, like the expanding description below each of the Selected Works on mouseover. Toggle on the “Show Entire Folio” button reveals a striking portfolio that Piotr is deservingly proud of.

I really like how he presented the examples of his work: long picture fragments are linking to the larger size images on Flickr, each work is dated and accompanied with useful details like the type of work (poster or a website), links and small description that sometimes is followed up with a small note in italic.

I can add only one thing to this review: if Piotr Fedorczyk was able to produce such a visually stunning and quality body of work in just 2 years, I can’t wait to see what else he’ll have for us in store.

What do you think?

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?

The greatest honour any type could achieve is to have its face loved and recognized by people. We realize that not all of us were crafted in an equally beautiful way — some of us turned to be a classic work of art, while others are simply tools to express one’s thoughts or communicate a message. The biggest fear of every type is to be used in ways that we were not intended for or abused to the point of being hated.

Sixteen of us finally got together with a plea to give us a break and forget about our existence for the next 25 years or so. Please give us a chance to get back our merits, we don’t want to be a typographic failure. There are so many other wonderful types (and not only the commercial ones) that would bring more sense and beauty to your designs, fliers, documents; the typefaces no one gets fired for using, fonts that will last you a lifetime. It is our hope that more people will write letters to those in charge at Microsoft, Apple and Adobe requesting to add more fonts (such as Adobe Caslon Pro, Adobe Jenson Pro, Franklin Gothic, Frutiger, Futura, Gill Sans, Helvetica Neue, Univers and Warnock Pro) to the core system.

So next time you see any of our 16 faces in your software’s fonts list, skip it and experiment with another, find a more suitable type for your specific project needs. In the end you’ll thank us for that.

1. COMIC SANS — don’t take me seriously, please

The only reason I was created by Vincent Connare was to replace the use of Times New Roman in Microsoft’s comic software called Microsoft Bob. I was never supposed to show my face in places other than comics and speech bubbles. I was never intended to be used in official documents nor am I close to looking like kids handwriting. And even though I’m flattered that Apple liked me so much that released my clone, I never dreamed of making the list of the default system fonts on all computers.

2. TIMES NEW ROMAN — don’t kill my timeless look

I curse the day when I became the default font in all Microsoft applications. I wonder how did I get this “honour” from Bill, considering the fact that I’ve never been fond of him myself. The only hope I have left is that people will realize there are other fonts at their service, all they need to do is to scroll down that fonts list.

3. HELVETICA — I’m so tired to be the IT font

Some designers are praising me and dedicating films, others hate for being “spaced tightly”, but most agree that I’ve become a safe font that is heavily overused. Please, understand that you can’t always rely on me to illustrate and deliver your every message. I’m not perfect for everyone and every occasion.

4. BRUSH SCRIPT MT — I can’t turn you into an artist

I know you love me, with a passion that even my creator, Robert E. Smith, could’ve not envisioned back in 1942. But please, don’t use me every time you need to show off your artistic side in ads and posters. Take a look at my fellow types — Feel Script, Sarah Script, Metro Script. Why should they enjoy a tranquil life while I do all the hard work? Oh, and please, don’t use me in ALL CAPS, I get very ugly when I have to scream.

5. PAPYRUS — I’m in the middle of the Hate and Heart war

Hey, how about this font—it looks interesting? And so they choose me. I know I’m everywhere – from a local coffee shop to war posters. Even my creator, Chris Costello, wishes he had a disclaimer attached to me: “May be habit forming. Not responsible for overdose or inappropriate use of this product.”

6. CURLZ MT — I’m too cute to handle too much text

In 1995 Steve Matteson & Carl Crossgrove designed me to “look like bent, twisted metal” and to be used for “carefree titles”, menus and greeting cards. Beyond that I’m too ornate to deliver a legible message and too whimsical to represent businesses. I know my limitations, one of them being the fact that I’m not the Audrey Hepburn type.

7. KRISTEN ITC — I wasn’t meant to be your average type

I was designed by George Ryan in 1995, who described me as “not your average text or display font” that was inspired by a handwritten restaurant menu. Now I became just your average “kids” font for teachers and scrapbooking, and just about everything else when Comic Sans needs a break.

8. ZAPF CHANCERY — I don’t want to be revived anymore

Designed in 1979 by Hermann Zapf and based on chancery handwriting of the Italian Renaissance era, I usually pick up where other scripts fail, and more often than not in All-Caps or Italic. I’m tired of seeing my distorted face, please let me rest in peace.

9. TRAJAN — I hate Hollywood movies

Yes, I have a rich history, being one of the first original display faces for Adobe, thanks to talented Carol Twombly. But I bet that even she could not have predicted that the movie industry designers would become so obsessed with me.

10. BRADLEY HAND ITC — do I really look like your handwriting?

Why so many people are infatuated with Richard Bradley‘s handwriting is beyond me. Indeed, I was designed to bring a personal touch to digital correspondence, but when everyone’s handwriting looks the same I stop being personal, don’t I?

11. IMPACT — Closer to a collision nowadays

Designed by Geoffrey Lee in 1965 with the intention to make an “impact” with a strong statement. However, often I can be overwhelming and overshadow all your other messages, and I should never be used for body text. Keep in mind that the more people use me to make an impact the less effect I will have on the reader as a result.

12. ALGERIAN — help, I’m burning in hell

I was created by Phillip Kelly in 1988, aimed to embellish “any work which suggests the Victorian era”. Want to guess what actually happened? You can see me everywhere from restaurants to sports to movie credits, and lots of examples in Flickr’s pool — Algerian Font, a burning hate.

13. COOPER BLACK — I came to you from the past

Storefronts favour me a lot. It’s not surprising though, I look good with the flowing “outer contours”, but after seeing myself on so many signs, I get very dizzy. I wonder how Oswald Cooper, who designed me in 1921, would’ve characterized my purpose?

14. MONOTYPE CORSIVA — adding sparkle, but can get too shiny

Designer Patricia Saunders has designed me primarily for use as initial letters, not for displaying an entire poem. As linotype.com suggests: “Monotype Corsiva can be used for short text passages in advertising but is best used to add sparkle to invitations, greetings cards and menus and to give a sense of occasion to certificates and awards.”

15. VIVALDI — inviting you and the rest of the world

I was designed by Friedrich Peter in 1994, and I am ideal for invitations, certificates. I am definitely not a text font, and should be used sparingly, not everyone can read me my intricate letters especially the caps. Oh, and I never thought that I’ll be a popular font choice for tattoos.

16. COPPERPLATE GOTHIC — a peculiar impact

I was designed by Frederic W. Goudy in 1900s. Because of my looks – wide, no lowercase, only small caps, and quirky tiny serifs – some designers find me challenging to work with, while others use me almost every time they get a chance and almost always inappropriately.

More Type debates and obituaries

There are myriads of type-related debates on the Web, which often get so heated you can feel the tension in the air. There are those who attack and wish to see as dead, there are others who defend, though in the end it’s clear to both sides that some typefaces are severely abused:

• Type Obituaries
• Reviled Fonts
• America’s Most Fonted
• 5 Fonts I wish Would Die
• Typefeces
• Overused Fonts
• Best Most Overused Fonts
• Tragic Typefaces

Which other typefaces should join our plea to stop the abuse? Do you really hate us that much, or do you hate the misuse and overuse? Voice your opinion here, please.

From the moment I saw Jon Tan‘s personal site I got smitten by its ravishing though perhaps somewhat esoteric simplicity. Right away I clicked on my FireBug icon and started the investigation. The more time I was spending with jontangerine under my “microscope” the more amazed I was getting with all those hidden gems that were so brilliantly put together to form an enjoyable user experience on this site.

Previously I featured jontangerine’s footer in my 16 bits of amazing footers. But it’s just one of the inspiring bits that Jon’s site has to offer.

The Hound of the Baskervilles

One of the first details that caught my eye on this meticulously designed site was the elegant ampersand that’s joining “pith & pulp” next to the logo. The interesting part was that it’s not an image, but a plain text. A quick trip to CSS section in the FireBug revealed that it’s been achieved with the use of the Baskerville font in italic:

font-family:baskerville,palatino,'palatino linotype', georgia,serif;
font-style:italic;

It was the first time I’ve learned that Baskerville and Palatino belong to the web-safe fonts list. And then to my surprise I’ve discovered that even the funky jontangerine logo itself is not an image but a “type folly” — a clever manipulation of type and CSS.

Textured Tangerine

Despite sticking largely to a monochromatic scheme Jon enhances the black & white colour scheme with various shades of grey and a delicious pinch of orange on link hovers.

Another thing that jumps at you is the use of small-caps for the links, menu titles, first lines and in the preface. An interesting detail about the links is that they’re underlined not with the usual text-decoration but the border-bottom property that allows extra customization like the thickness of the border, the style and colour:

{
border-bottom:0.071em solid #A9A9A0;
color:#000000;
font-variant:small-caps;
text-decoration:none;
}


While the base font and most of the site’s content is displayed in Georgia, the headlines are set in Baskerville and the section headings in each article are beautifully accentuated in Baskverille Italic.

It’s the little details that count

Once you click on an article link you’ll get to a few more pleasant discoveries in titles, drop caps and first lines. You see, post titles on jontangerine are displayed not above the post as most of us are accustomed to see and use but on the top left part of the article’s content. Constrained by width:6.5em and floated to the left those headlines look like they came down from a magazine pages. The drop caps and the first line’s styling in all caps reinforce once again that same association.

Elastic beauty

Last, but certainly not least, if you want to see an example of an elastic site made right, look no further – Jon Tan’s site is the perfect case study for that. Everything on jontangerine is set in em, from the text to padding and margins, to border sizes and images. This allows to increase/decrease the size of all elements on the site. To see it in action, go to jontangerine and simply toggle between Ctrl+(Command+) and Ctrl- (Command-) to change the size of the text and images.

The default font size here is set to 1em and all other elements are accordingly proportioned. Here’s the code for the main image that usually comes before the post’s content:

{
margin:1.571em 0pt 0pt;
width:29.857em;
}

Fortunately, Jon has written an excellent tutorial on how to build elastic sites and convert pixels to ems, so hopefully we’ll see more user-friendly elastic sites on the Web.

Here’s an example of some styles used on the home page:

And here are the styles for the article on the single page:

There’s much more precious things lurking behind the scenes of Jon’s site, but I rather leave them up to you to discover. I think I’ve covered the major elements, let me know if I missed anything important.

Hope you find this web typography series useful. Would you like me to continue the “investigation” of sites with beautiful typography, or have you had enough for now? ;-)