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.

jontangerine

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.

jontangerine_singlepage

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:

jt_example1

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

jt_example2

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? ;-)

Recent Bits
Related Bits
Behind The Scenes Of Exquisite Web Typography – Part Four
Behind The Scenes Of Exquisite Web Typography – Part Two
Behind The Scenes Of Exquisite Web Typography – Part Five
Behind The Scenes Of Exquisite Web Typography
8 Bits From The Past
Striking Web Sites with Font Stacks that Inspire
Meticulous Design: Dramatic Headlines
Behind The Scenes Of Inspiration Bit
Comment Bits

25 Insightful Bits in response to “Behind The Scenes Of Exquisite Web Typography – Part Three”

  1. I really enjoy your type insights and could read as many as you could write, so by all means carry on.

  2. Yes, please continue. Excellent articles. There is a great feed of web type available from Feedblendr that is notable: Nice Web Type.

  3. I really liked this article.

    I can’t believe I hadn’t come across Jon’s site before because that’s a really neat site: great typography, minimal use of color, way cool. Only thing I take (very) minor issue with is that the use of small-caps feels a tad excessive.

  4. Thanks, Andrew. I haven’t yet decided on which site to analyze next, but no worries, I will ;-) I’m also learning a lot from this research.

    Thanks, Adrian and thanks a bunch for the FeedBlendr – it will definitely come handy, and the Nice Web Type site is such an excellent idea.

    Glad you liked it, Chris. As long as the linked text is not too long, the small-caps look not too bad, and the usage of the same font colour as the main text makes them more legible than all caps usually are.
    Hey, that’s a neat application you’re working on – Writing Analysis Tool. Will you be adding more features to it?

  5. I was frustrated trying to solve a programming problem the other day and I needed a break from working on my main project so that writing tool was just a small side-project I made to take my attention elsewhere for a bit. It doesn’t really work very well right now. I’m not sure if I’ll work on it further.

    The ultimate idea is to analyze peoples’ articles and see if they use some words too frequently and analyze patterns and check writing style and so-forth.

  6. That type folly is pretty rad. I wish I had the patience for a site like that. Maybe that’s why I like print design so much more.

  7. Love these, Vivien!! I keep coming back to the one on ALA. I hope you’re planning to do more. Bookmarked and Stumbled!

  8. Chris, hope you’ll be in a mood and will have time to work some more on your Writing analysis tool. When I tried it out the first time, I quickly wrote two sentences, and got the results that there were 15 words in what was written and all of them unique, however my Ego count was 3 (I, I am, my), but the good thing was that I didn’t use any of the “Valley girl” jargons, that count was 0 ;-)

    Jacob, judging by what you said, one can assume that print jobs don’t require as much patience as the web work? ;-)

    Lauren, thanks a lot. I will continue with this series and hopefully you’ll find the future articles as interesting and helpful ;-)

  9. My favorite thing about Jon Tan’s site is his use of cochin italic on the about page. But you might have to use a Mac to see it!

  10. Hi Taylor. Indeed, Jon is using a very delicate Cochin italic on the about page. Fortunately, I can see it, not sure about Windows users. Jon has defined the fall back fonts for those who don’t have Cochin installed:
    font-family:cochin,baskerville,’palatino linotype’,georgia,serif;

  11. I’m really enjoying this series, and hope there will be many more to follow. Jon’s site is beautiful, and he has a great eye for typography.

  12. Great post. Jon definitely has a unique and ingenious site. It’s difficult not to want to copy some of the coolness (like using curly braces. I guess iLoveTypography uses curly braces too… I’ve seen more people adding them in to not as lovely effect.

  13. Thanks, John. Looks like many people liked this series, so there will definitely be more. Plus I too enjoy my little type investigations on Web ;-)

    Thanks, Kristarella. Yes, the curly braces are becoming very popular on sites, but only in the hands of Jon and John they get the shiny look ;-)

  14. iltomee

    Hi. Thank you. I’m a programmer, and am just starting out learning web design. It is so good to learn from something, that’s so detailed. Cheers: Tom

  15. You’re very welcome, Tom. Hope you’ll stick around, ’cause there will be many more similar posts on iBit. :)

  16. Jon’s site is a study in understated elegance. I found it a few months ago and go back to it periodically to just marvel at his work, and read his work.

    Cameron Moll is another guy with a strong eye for typography.

  17. Keep going with this awesome stuff!
    This is what i call a helpful blog

Pingbacks and Trackbacks

  1. Sunday type: ampersand type | i love typography, the typography blog

    [...] Grunge fonts Behind the scenes of exquisite web typography #3 Zeichenpress cards — Swiss Miss Adventures in Kerning, Part [...]

  2. PROs And CONs Of Going Solo » Inspiration Bit

    [...] Inspiration Bit Knowledge comes from inspiration – one bit at a time « Behind The Scenes Of Exquisite Web Typography – Part Three [...]

  3. Meticulous Design: Dramatic Headlines » Inspiration Bit

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

  4. Meticulous Design: Information Architecture » Inspiration Bit

    [...] Tan’s personal site is all about paying attention to details—from exquisite typography to an elegant and user-friendly information architecture. The two sidebars on the homepage are [...]

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

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

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

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

  7. Striking Web Sites with Font Stacks that Inspire - Inspiration Bit

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

  8. Get inspired by Inspiration Bit – Inspiration Bit

    [...] 24 Behind The Scenes Of Exquisite Web Typography – Part Three [...]

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