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

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:

  1. Fonts used:

    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.

  2. Font Styles:

    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.

  3. White Space:

    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:

a list apart example

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.

Recent Bits
Related Bits
Behind The Scenes Of Exquisite Web Typography – Part Four
Behind The Scenes Of Exquisite Web Typography – Part Three
Behind The Scenes Of Exquisite Web Typography – Part Two
Behind The Scenes Of Exquisite Web Typography – Part Five
8 Bits From The Past
Behind The Scenes Of Inspiration Bit
Get Inspired by 8 bits of Exquisite Typography
Meticulous Design: Dramatic Headlines
Comment Bits

21 Insightful Bits in response to “Behind The Scenes Of Exquisite Web Typography”

  1. Nice post and very good discover of the secrets behind the nice designed great website. It sure helps me to understand more in typography in web. Thanks.

    Cheers, Kent

  2. Great post. It is easy to say a site is great but far more useful to dissect it and tell us why.

    I’m looking forward to the rest, especially as I am re-learning my web-type skills at the moment.

  3. Nice analysis Vivien. Jason Santa Maria did fine work on ALA. Just one amendment though: Even though the font size is set in ems, the design is fixed-width rather than elastic; something that caused great consternation at the time. The content scales well to a certain point but the containers do not expand with font size, nor do the images scale. Regardless of that, the typography is outstanding, and I especially love the treatment of Garamond for the identity.

  4. This is very interesting. I always liked the look of A List Apart, but I never knew what was the secret behind.

  5. Kent, thanks for your feedback. I’m glad you found it helpful.

    thanks, Andrew. You know I always liked ALA site, but I became an even bigger fan of it when I actually put in under the microscope – discovered so many little things that are not jumping at you during the simple visits to the site. But then that’s why it is so good. A great design is subtle, not the screaming one – hey look at my drop shadow and the cool gradient ;-) Hope you’ll find the future installments interesting as well.

    Jon, thanks so much for pointing out about that ALA’s site doesn’t have a truly elastic layout. I just amended my post and called it a “semi-authentic elastic layout” and linked to your comment here for further explanations ;-)

    Btw, I don’t quite get the image scalability part in the elastic designs. Is it a good thing to have? I always thought that we shouldn’t let the browser resize the actual image size, since we’ll be losing in its quality. Are we talking about all images on the site, or just the content frames in the background, and things like that – that are supposed to scale with the scaled text?

    Thanks, Simonne. See? Now you know why you liked ALA design ;-) Tell me something – did you find my tutorial bits easy to follow here, or should I adjust the structure of these behind-the-scenes posts?

  6. Hi Vivien, it does use relative sizes for type, but has absolute widths for structural elements so just for (you could say pedantic) clarity, it is a fixed-width layout. Part of the reason for me clarifying this is that I’ve often see folks be confused by the differences between elastic, fluid, fixed-width and hybrid layouts, so perhaps this might help in a small way.

    Regarding image scalability: I was referring to all images, but specifically images as embedded content. It is a contentious issue, mainly because of the quality loss, and the fact we don’t have SVG or CSS3 scalable background images yet (although IE8 might support SVG I believe.) However, the same people who benefit from extreme levels of text scalability would almost certainly benefit from being able to scale images, too. As Joe Clarke once pointed out, watching someone with a vision impairment put their nose an inch away from the screen in order to try and understand an image is a case in point. Obviously, for some designers, any quality loss may be unacceptable. Is it for their audience though? Browsers could, and should handle resized quality better. Even so, I would rather code to give people the native ability to scale images. After all, the folks who might benefit often can’t even see the perfectly-rendered regular size image anyways. Not allowing them enlarge images on grounds of quality is redundant.

  7. Hi Jon. Thanks so much for your detailed response. About ten years ago when I’ve heard about SVG for the first time, and started playing with it, I was convinced that it’s going to be the next standard on the Web, but then came Flash, and SVG was put on the back shelf. I do hope it comes back, it’s got a huge potential.

    “the folks who might benefit often can’t even see the perfectly-rendered regular size image anyways” – it’s impossible to disagree with this.

    You know what? You’ve inspired me to look for and feature some elastic sites here and talk about how they function. There is a CSS galery site featuring liquid and elastic sites, and I did a feature on Liquid sites while browsing that gallery.

  8. An excellent article, Vivien.
    I particularly like how they use different type and type styles as hierarchy.
    A List Apart also has a good Print style sheet (something I need to do!).

  9. Thanks for the tip, Johno. I’ll take a better look at ALA’s print style as well. Good luck with yours for iLT ;-)

  10. I really love how you broke this down and even recreated a sample with what you learned! The way your investigative mind works is so great for the rest of us! Keep these articles coming, Vivien!

  11. Thanks Lauren, I’m very happy to hear that you like this series. Another one is coming up this week. Glad you liked the samples. I’m also thinking of taking someone’s website and changing its typography with FireBug, on-fly… just need to find time and a willing “victim”, otherwise I’ll have to perform it on I.Bit ;-)

  12. Great article. I love when sites effectively mix serif and sans. Very cool. I’ve been trying it… see how we go. :)

  13. Thanks, Kristarella. I agree – I’ve seen several sites mixing serif and sans, but very few of them are doing that successfully.

Pingbacks and Trackbacks

  1. Graphic Design Articles

    [...] Behind The Scenes of Exquisite Web Typography – Submitted by Vivien [...]

  2. $5000 Prize Giveaway Graphic Design Group Writing Project

    [...] Behind The Scenes of Exquisite Web Typography – Submitted by Vivien [...]

  3. Results from Jacob Cass’s $5000+ Graphic Design Group Writing Project } Group Writing Projects

    [...] Behind The Scenes of Exquisite Web Typography – Submitted by Vivien [...]

  4. Behind The Scenes Of Exquisite Web Typography - Part Two » Inspiration Bit

    [...] is the second installment in my quest on going behind the scenes of web sites with exquisitely crafted typography and revealing their beauty [...]

  5. Behind The Scenes Of Exquisite Web Typography - Part Three » Inspiration Bit

    [...] you missed my previous installments in this series, you can still catch up with us by checking out Part One and Part Two on going Behind The Scenes Of Exquisite Web [...]

  6. Meticulous Design: Dramatic Headlines » Inspiration Bit

    [...] 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 [...]

  7. Behind The Scenes Of Exquisite Web Typography - Part Four » Inspiration Bit

    [...] you missed my previous installments in this series, you can still catch up with us by checking out Part One, Part Two and Part Three on going Behind The Scenes Of Exquisite Web [...]

  8. Behind The Scenes Of Exquisite Web Typography - Part Five » Inspiration Bit

    [...] missed my previous articles in Exquisite Web Typography series, be sure to check previous issues: Part One, Part Two, Part Three and Part [...]

Selected Bits

PopularBits

RecommendedBits

FavouriteBits

PersonalBits

Hi, I'm Vivien. Thanks for visiting my Inspiration Bit. I often find myself scouring the internet looking for either answers to many questions I have or websites that inspire me, sites that I can learn from. On what topics you might ask — any topics that interest me, anything from web design to typography and art, from blogging to entrepreneurship, from programming to open source.
read more…
When I'm not blogging, I design web sites, teach programming, play with my daughter and try to balance family, work, friends and a somewhat active social life on