jon tangerine

jon tangerine

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.

elastic beauty

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.

Detail shot of the Jon Tangerine Logo Effect

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.

Example of the Post Titles

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.

Paragraph note example
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.

Personal Notes

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.

criticisms

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?

  1. George

    Lovely use of typography and layout.

    I’ve mentioned this before on this site and would like to hear other peoples opinion, but HTML small caps really grate me.

    Correct me if Im wrong but when your eye gazes over the three column archives, does the first letter of every word in the titles stick out like a sore thumb to you? (The “colouring” is far from even)
    I believe this is the equivalent of hitting the faux SmallCaps, Bold and Italic buttons in Photoshop (only when their respective properly designed equivalents aren’t available)

    There is a reason why typefaces have their own small caps versions, is so they look the same weight when shrunk and placed next their larger/standard cap versions. (I understand that these aren’t available in html)

    Im quite surprised that the designer of an otherwise excellent site let something like this slide, but I see this a lot so maybe Im being picky. I agree that small caps would look nice for this element but not the way that Im seeing them.

    Anyone else?

  2. Jon Tan

    Wow, Vivien, thank you for your generous words! You’re right about the pictures on the index: I change them regularly as I take more but I’ll reveal more. I’m also just fixing the sequence so it’s only random when the page first loads in a session. Comments subscriptions will be done soon after your gentle reminder, I promise! There just one correction: There is a site search, it’s in the log (archive). Perhaps it needs to be more prominent. Again, many thanks, I appreciate it very much.

    George, you’re right: Georgia has no small-caps version. Ascender corp now owns the rights to create and sell variants like small caps for Georgia. I’m using a faux version deliberately. They are not HTML small caps, but generated by the rendering engine using the CSS font-variant property. This comment on iLT may give you some insight into my thinking. Thanks for your comment.

  3. johno

    Great review, Vivien. There is something innately elegant in all Jon’s design (what I’ve seen of it). Beautifully balanced, ample space enabling the words to speak, and attention to the smallest details. This is a man who takes incredible pride in his work. He is, I believe, something of a craftsman, rather than a designer; and I do believe that perhaps he was born posthumously—he really would have been at home in the heyday of metal type. Oh, and his writing is pretty good too.

  4. johno

    Wish typesites had editable comments.
    Just in response to George: Jon, of course is right; Georgia does not come with small caps, so compromise is the only alternative. Moreover, at standard screen resolutions, the subtle differences between real and ersatz small caps would go pretty much unnoticed. Having said that, I’d love to see Ascender Corp design and release a set of small caps for Georigia.

  5. Sander

    Great review! I very much like the website, the content is great in a superb layout. I would say for the individual post titles just a bit more line-height. What I personally like are those floating boxes with extra content left and right of the articles and that the list items are shown in roman style! I’ve learned alot from Jon his website. thank you and keep it up!

  6. inspirationbit

    George, I’ve see small-caps implementation on many sites, and on the majority of them they irk me too, but not on Jon Tangerine’s site. Somehow he managed to balance them really well with the other type treatments on his blog.

    Jon, thank you for creating such an inspirational site. So sorry for missing your Search function in the Log, how did that happen… I guess that means you do need to make it more prominent and place it on the home page as well ;)

    Thanks, John. I agree with you that Jon is more of a craftsman than a designer, but I’m very glad he was born in the XX century, which makes me very proud for being from the same generation as him. Oh, and regarding his writing: sometimes it makes me wonder what do I love most — reading Jon’s articles or looking at his work. In the end I’m just glad that he’s so gifted in both.

    Thanks, Sander. Glad you liked my review.

  7. Leon P

    Mr Tan is a master. What I really love about the site is the fact that it’s all type: no cludging CSS to make it look like a poster. The reviewer is right: it’s more like a (beautiful) book than a poster, which is entirely apposite for the web, a textual rather than a graphical medium.

    Another strength is its acknowledgment that web typography is different from print. So while we’re treated to some nice large Palatino (if we’re on Windows) the paragraphs are set in Georgia - no Times in order to make it seem more ‘bookish’.

    While I love the link colours - is the colour of the border on the hover effect slightly different from the colour of the text? - I think the small-caps are slightly overdone (although I have nicked the effect!)

    The articles are extremely informative and a joy to read - both in-depth and accessible, and Jon responds to an awful lot of the posts. He even gave me some help when I was trying to use some of the info he’d provided in an article about PHP. My only criticism is that the prose can occasionally veer too far into the purple for my taste. But a hugely influential site that provides so much inspiration, both through the articles and the design.

  8. Jose Riveros

    —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. —

    Yes, my experience of Jon’s site is vastly different on my Mac than on my PC.

    Its a site to be admired.

  9. David Rapson

    @Jose Riveros - I just got a Macbook recently and also had a totally new experience on Jon’s site than I did on my PC.
    The little things like that are what really impresses.
    Amazing work Jon