Today I’m going behind the scenes of a web site that is filled with so many typographic goodies that will keep you dizzy and busy for a long time. If 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 Typography.
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;
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.
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;
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.
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;
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? ;-)