Web Hosting News

Did you know that Web Designers have many dreams? We dream about the end of browser wars, death of IE6, we hope to see the end of raster wars and plead our case to powerful authorities to release more fonts into the public domain or at least distribute new Vista typefaces for other platforms.

While we all wait for the world (or at least the World of Wide Web) to become more beautiful and complete, and beseeching for those wishes to come true, some designers take actions by actually saying good bye to IE6 and dropping support for that browser-dinosaur or doing their best and still managing to produce web sites with such a jaw dropping stunning web typography that would make even some leading print publications green with envy.

Last week I featured dozens of web sites that use only one of the ten core web fonts, Georgia, to delight our eyes with beautiful typography.

Today I’ll be showcasing sites and designers that went down a different path, and by building advantageous CSS font stacks, they recruit the help of nontraditional for Web fonts that allow to spruce up their designs and take them to the next level.

Must read articles on CSS Font Stacks and Font Surveys

Several helpful articles were written about CSS font stacks, yet still many designers fail at implementing them correctly when specifying font names in CSS. Though mastering CSS font stacks is not a rocket science, it’s not as easy as pie either.

Back in 2004 Jeff Croft was urging designers to to open their mind and consider using some of the other typefaces that are often pre-installed on computers these days. He compiled a list of 20 useable typefaces along with alternative suggestions that could be used in the font family sequence. Most of the fonts on the list were Mac only, with some that would be hard to find decent alternatives for on other platforms, but it was an eye opening move.

The two hardest obstacles that designers face in building efficient font stacks are the knowledge of the best alternatives to the chosen ideal typeface that exist on other platforms and the percentage (backed up by a reliable statistics) of systems where that font is installed. Code Style has conducted and published a number of helpful font surveys to list the most common fonts on Windows, Mac and Linux. Also VisiBone has published its own Font Survey Results, based on browser shares, by testing 800 systems: 614 PC, 164 Mac, 22 Linux. Though not completely reliable, nevertheless very handy when putting the font sequence together.

In November 2007 Megan McDermot compiled a Complete Guide to Pre-Installed Fonts in Linux, Mac, and Windows. Then Richard Rutter has developed a very helpful Font Matrix and published a valuable article on 24 Ways: Increase Your Font Stacks With Font Matrix.

Last year Nathan Ford from Unit Interactive has stirred up heated debates with his article Better CSS Font Stacks, where he went an extra mile and put together a comprehensive compilation of various font stacks for body copy and headlines. He also offered a PDF for download with the examples of both titles and copy, set in different font stacks.

Christian Montoya was appealing to web designers to add Windows Vista fonts to the stylesheets and has put together a PDF document with Windows Vista fonts compared to typical Web fonts.

Recently Michael Tuck has written a very resourceful article on SitePoint where he presented us with 8 Definitive Web Font Stacks. He’s put lots of thought and work into his research, but unfortunately SitePoint has drastically cut down the article, though gave Michael an option to follow it up with Part 2.

You would think that after all these online publications and the encouragements from fellow designers to think outside of the core web fonts box and experiment with font stacks, we’ll see an explosion of sites that demonstrate the use of unexpected typographic choices. Yet the majority of designers still prefer to go the more traditional route with image replacements and sIFR when using uncommon for Web fonts.

Web Sites with font stacks that stand out

For the last couple months I’ve been collecting sites that exhibit the use of typefaces that are not part of the core web fonts. I won’t be talking too much on whether or not the designers have built efficient and proper font stacks for those site, I will simply present them for you and hopefully we can start some discussions in the comments around the efficiency of those font sequences and perhaps some alternatives.

First choice: Baskerville

First time I saw the use of Baskerville on Web was Jon Tan’s magnificent site. I knew right away that I will use this gorgeous typeface in Inspiration Bit’s new design. Hence, you see it scattered all over this site: in headings, post excerpts, recent posts at the top, personal bits and numerals. Since Baskerville comes pre-installed on Macs only, designers often list it with Palatino Linotype as one of the fallback choices.

JonTangerine

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 has set Baskerville for the body tag and uses it for everything on his stunning web site (once again, you can read a more complete review of Designr in another installation of Behind The Scenes Of Exquisite Web Typography series):

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

Andrea Gandino

Andrea Gandino’s site is a work of art and fiction at the same time. Everything, starting from the paper textures background to typeface choices to exquisite design details, make this site look more like a precious book. Besides relying on Baskerville for styling headlines and dates, he uses Adobe Caslon Pro for navigation and headings in the content:

#navigation li a, .text h4, .content .text h3, .content h3 {
font-family: "Adobe Caslon Pro", Baskerville, Georgia, Palatino, "Times New Roman", Times, serif; font-style: italic;
}
.entry .title, .content .title {
font-family:Baskerville,Palatino,Georgia,"Times New Roman",Times,sans-serif;
}

Travis Gertz

Travis Gertz has decided it’s time to play with his designs, by applying concepts of art direction. His first experiment is set entirely in Baskerville:

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

Natalie Jost

By setting the body tag to Baskerville, Natalie Jost gets even her (and site’s) name and tagline displayed in Baskerville. She also uses Verdana on the homepage, Georgia for the form and Frutiger for occasional headings set in h3.

body {
font: 100% Baskerville, Georgia, Times, Times New Roman, serif;
}
h3 {
font-family: frutiger, arial black, arial, sans-serif;
}

First choice: Palatino/Palatino Linotype

Palatino, along with its Windows alternative Palatino Linotype, is slowly gaining attention from designers. Sometimes they like it so much that use pretty much no other font but Palatino in their stylesheets:

Triimpuls

With the exception of the text in the navigation and comment form, the rest of the content on Triimpuls is displayed in Palatino:

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

The Museum of Innocence

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

For his company’s web site Dave Shea is using Lucida Grande for the body copy, while styling all headings in Georgia, that’s preceded and replaced by Candara on Vista machines:

body {
font-family:"Lucida Grande","Lucida Sans Unicode",arial,sans-serif;
}
h2, h3 {
font-family:Candara,georgia,serif;
}

Jason Santa Maria

Jason Santa Maria 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

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

Another site with lots of sIFR and image replacements for display fonts, but the main typeface used is once again Lucida Grande:

body {
font-family:"Lucida Grande","Lucida Sans Unicode",Verdana,Geneva,Helvetica,Arial,sans-serif;
}

Other font choices

Here are examples of sites with miscellaneous font selections and interesting CSS font stacks:

Vitor Lourenco

body {
font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,arial,sans-serif;
}

Twisted Intellect

Praiseworthy attention to details for what’s remained from a blog. Notice the for the intertwined “oo” in the link to Facebook:

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

Stories & Novels

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

Max Voltar

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

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

Already back in 2006 Alice Rawsthorn was calling Georgia the most fashionable type on the Internet in the style and design section of International Herald Tribune. And it looks like in the past couple years its popularity grew on the Web. Almost every other site we visit is using Georgia in one way or another. Being one of the first typefaces specifically designed for use on screen, Georgia looks great and is legible both in big and small sizes, thanks to a relatively large x-height.

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

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

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

Designed in a predominantly grey and white colour scheme, Alex Giron creates an eye-pleasing site with very little CSS trickery and, logo aside, once again with Georgia only. He starts off by changing the default browser settings with body {color:#232323; font-family:Georgia,"Times New Roman",Times,serif; font-size:62.5%; line-height:2em;}, and further bumps up the paragraph text to 12px by setting p {font-size:1.2em; word-spacing:0.15em;}.

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

Not sure if you’ve got a knack for a beautiful typography? How about getting a bit of practice with Georgia only by emulating some basic styles seen on Ceramiche Corsini: all text, except the copyright credits, is set to 12px, including the headings, that in addition are highlighted in bold.

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

Now that you’ve got it working with basic CSS, how about adding some colour, interesting graphics and atypical horisontal navigation, and you can create a work of art similar to Dean Oakley’s portfolio site.

Surfgarden

Need some more practice with basic styles and Georgia, how about checking out Surfgarden: display your Georgia in three or four different sizes, three varying colours, three styles (normal, bold, italic), plenty of padding, handwritten logo and notes, and all of sudden your site will be featured in 40 Excellent Blog Designs.

Here are some more colourful examples:

Lucy Blackmore

v1Creative

Bobulate

iPhoneDevelopmentBits

Giblette

Carnivale du Vin

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

Georgia comes with some very beautiful characters but ampersand is not one of them. Fortunately, it’s quite simple to replace them with other more voluptuous ampersands. Plugins like wp-typogrify will style them for you with something like: span.amp {color:#878B3F; font-family:Baskerville,"Goudy Old Style","Palatino","Book Antiqua",serif; font-style:italic;}
Miles took it one step further by styling for in designs for interaction in Baskerville, italic, as well. Other than those two small elements, the rest of the site is displayed in Georgia, but it’s those little details that make things much more memorable.

The Things We Make

If you’re not afraid of mixing lots of colours together and are good at it, then you’ll certainly find lots of inspiration in how Mike Kus blends colour with type. After counting till ten I lost track of how many colours are on this site, but guess what—they work without compromising on site’s usability.