Many people are complaining about how frustrating it is to be working with such a limited number of web safe fonts. However, rather than simply blowing off some steam talented designers have learned how to cope with it and make the best of it until an uncertain future when we would be blessed to spend hours contemplating on which one of the hundreds available for Web fonts we should use for our sites.
I’m constantly scouring the Web looking for sites with an exquisitely crafted typography and getting under their hoods, studying the CSS code, trying to uncover their magic tricks in achieving a perfectly balanced typographic designs accomplished with only one or few of the twelve web safe fonts that are installed on all computers.
Inspired by John’s article on Web Typography, I decided to go behind the scenes of my favourite sites and gently tear them apart and share with you all those secret bits I’ve managed to find.
First Bit – A List Apart
Our first stop is going to be non-other but A List Apart itself – a powerful testament of what can be achieved with a good eye on typography, knowledge of grid, a little bit of colour and abundance of style.
Despite its rather minimalistic design, there are lots of things happening under ALA’s roof:
There are three fonts that are used throughout the site: Georgia, Verdana and occasional Times. However, a careful look at the site reveals a number of stylistic/layout manipulations that give A List Apart such an opulent look.
First of all, ALA is based on a semi-authentic elastic layout, setting the default font size in the body tag to font-size:0.8125em and the font-family:Verdana,sans-serif. All the consequent hierarchy of text sizes vary from the date set in uppercase 0.9em Verdana, letter-spaced with 0.33em to the introduction text set in Georgia, italic, size 1.05em to the post’s title being displayed in 1.8em Georgia font and the author’s name shown in uppercase 0.85em Verdana, with 2px space between the letters.
A masterful switch from uppercase letters to italic to bold creates a rich font hierarchy. It’s a simple math after all – with three type faces and three styles of each of the fonts you get nine different types. Add to that all the different sizes you can set the font in and the possibilities are pretty much unlimited. Just take a look at the elegant menu text on the site, who could know that you can achieve that by setting your characters with the uppercase 18px Georgia.
The quickest way you could improve any web site’s typography and the overall look is by injecting generous amounts of white space here and there. On A List Apart the text lines in all paragraphs breath easily with the line-height:1.8em and font-size:0.88em. There’s plenty of padding and margin space between the block elements and various sections.
And here is a close look at how it is possible to lay out a stunning page by applying some of the techniques learned from A List Apart:
Notice a subtle change in font styles in the byline, where the word “by” is set in 1.1em Times, italic, while the rest of the line with the author’s name is set in a complimenting uppercase bold 0.85em Verdana and 2px letter-spacing.
By varying types and styles, with carefully thought out white space, and with the help of a well organized grid it becomes so much easier to read from screen where each section shines with individuality.
Initially I planned on dissecting four web sites in one article, but I think I rather spread it out over several posts and give you a chance to try out some of the typographical tricks shown here on your own sites. That is if you actually found this post useful and helpful, did you?
This study of web site typography has certainly helped me a lot, and I’ve already envisioned how the text would be laid out in my re-designed site. Let me know what you think of it and what would you like me to concentrate more in my research of exquisite web typography? Which are your favourite sites with beautiful typography?
In my next installment of a great typography on the Web I will be going behind the scenes of a gorgeously looking website that is featured in every CSS gallery out there, and the most incredible thing about this site that all the stunning typography was achieved by using only ONE typeface: Georgia. Be sure you’re subscribed to Inspiration Bit so you don’t miss out on how you too can add some grace to your own site’s typography.
This article is also an entry to Jacob’s $5000+ PRIZE GIVEAWAY – Graphic Design Group Writing Project on Just Creative Design – just in time for the deadline on March 4th.