If you’re looking for a web site that can be used as a textbook on exquisite Web typography with a scrupulous attention to details, Jon Tan’s personal site would be the one to get the crown. I went from being this blog’s casual admirer to a diligent student, trying to unveil all those secrets that make JonTangerine so magical to look at and joy to read online. The deeper I dig, the more hidden gems I uncover. I hope that one day Jon would dedicate an article and disclose his decisions behind all those typographic choices, and confess how long did it take him to deliver such a perfect baby.
Jon Tangerine comes with lots of surprises; I’ll try to go over some of the more remarkable ones and let you uncover the rest. There’s something that you won’t find on Jon Tan’s site—background images. In fact, there are no presentational images at all, so no image replacement techniques would entertain your eyes. All images on his site are part of the content, and they stretch along with the text, making JonTangerine one of the most beautiful examples of an elastic interface.
Jon takes the elastic nature of his site to the next level by turning his rather intricate logo into a “type foly” – a brilliant manipulation of Times New Roman with CSS. Where else can you resize someone’s logo on the Web to your heart’s content without losing a bit of quality—a true vector experience.
non-typical web fonts
Jon Tangerine was the first site where I saw a rather generous use of Baskerville with the fallback to Palatino Linotype and Times New Roman. Look at the way “pith & pulp” elegantly stand out next to the logo in Baskerville Italic. While most of the content is displayed in Georgia, the majority of headers are set in Baskerville. One interesting detail you may notice is the difference in type between the post titles on the home page and the individual ones, the first one displays the titles in Georgia, the latter one in Baskerville. Another trick that I really like (and the one you don’t see on many sites) is how the individual post titles are indented to the left of the article rather than above.
Even though Jon doesn’t rely on highlighting words and phrases in bold, there’s plenty of texture on his site with various type treatments. The first thing that jumps at you is the use of small-caps for links. To soften their heavy impact on readers Jon cleverly underlines them with very thin grey borders, while keeping the text black. Small-caps in the section titles like Preface and Asides are also set in a very light grey with a well-chosen letter-spacing.
when black and white become a new colour
Even though the site’s colour scheme is monochromatic, it’s full of colours due to Jon’s masterful use of black and shades of grey, just like a magnificent black & white photo where you can still see that someone’s eyes are blue or leaves are green. Yet since the site is called Jon Tangerine, a pinch of orange is a must, hence all hover links will flash back at you with a tangy colour of orange.
Recently Jon wrote an outstanding article on paragraphs in Web typography and design, his personal site is an excellent example of the right treatment of paragraphs. The majority of posts by Jon Tan are rather lengthy, but reading his long articles online is not at all eye-straining, thanks to a strictly justified text fit with a tailor-like perfect line-height and paragraph’s vertical margins.
When you start reading Tan’s articles you’ll be surprised once again with his meticulous attention to details. Starting from a delightful drop cap and the first line set in all-caps, it feels like you’re reading a beautiful book: with the main content aligned in the middle and leaving plenty of space on both sides for some helpful notes that add to the point made in the corresponding paragraphs. Even the lists are aligned the same way as paragraphs, with the roman numbers hanging on the left. Secondary headings, displayed in Baskerville Italic, provide a relaxing break between the article sections. I tend to stop for a moment or two, admiring the ravishing italics before continuing my reading journey.
At times it feels that Jon goes for broke with his type treatment, other times his embellishment is as subtle as it gets. On one hand his personal note is written in a charming italic Cochin that only some lucky Mac users would be able to see and appreciate. While on the other hand, the blockquotes on his site are styled with no-frills in a classic Georgia italic, in light grey, and a simple outline of dotted borders at the top and bottom.
I could go on and on talking about Jon Tan’s gorgeous blog, but I’ll leave it up to you to explore other delights.
It’s hard to criticize something that I’m a big fan of. So I’ll be brief here and simply express some of my personal wishes. I know that Jon Tangerine is a work in progress, being built with a home-grown PHP application called Lifelong File, so some of features of a typical blog are missing there. But still I hope to see a search functionality there in a near future, as well as Subscribe To Comments option that would make my experience as a reader and commentor on this blog much easier. I would also love to see more black & white photos in the header that are randomly called when clicking on the “Refresh” link at the top, otherwise I’m left looping through only three or four choices.
Other than those minor things above I have only four words to say about JonTangerine.com: “I love this site.” Don’t you?Want more? Check out the archives for previous reviews, and don’t forget to subscribe for future reviews, posted weekly.