Jontangerine.com website
Here’s one of those sites that doesn’t scream at you. It doesn’t have to. Honestly, when I first visited this site, I was reading an incredible great blog entry and found it very readable and soothing. I didn’t think much else of it other than I learned a lot from the article.

I came back later to learn more about em sizing and elastic layouts and it hit me:

This site is gorgeous. I can learn a lot from this stud.

Jon Tan truly is a master of typography and shows exactly how a designer can pull off a beautiful site, with very few images and a few colors. I encourage you to take a gander at the site, look around and pay attention to the details.

From ampersands, headings, side notes, his site logo (text all styled with CSS!), to his about page, Jon Tan truly is a master of CSS, typography and immaculate web design. I dig it. Go Jon! You Rock!

Comments

4 Comments

  1. Larry Marburger said over 2 years ago

    Awesome find. I’m no type nut by any means, but I can appreciate the effort he went through to layout his header using only HTML and CSS. To go through all that, you have to be a masochist. No doubt about it.

    With all the new browsers seeming to make the switch from increasing text size to zooming the page instead, I think it’s becoming less of an issue create a fluid site using measurements in em. I’m sure there’s more reason to using em than just to create a fluid layout that gives the illusion of zoom when text size is increased.

    When I was designing my site (I’m so not a designer), I noticed some things were easier to think about in terms of ems instead of pixels. For example, I wanted more margin around higher headings so I set the margins on all headings to an em value instead of individual pixel values on each heading tag. From a developer trying to do the job of a designer, that made a lot of sense to me.

  2. Rogie said over 2 years ago

    @Larry – Absolutely. There are always things that I think about in ems more. That article was an eye opener to me fo sho. For instance, paragraph tags and line height scream em sizing. Floated images within content also do. I think pulling off a purely em based site would be rewarding, provide deeper insights and benefit any web designer.

    As far as laying out his logo with pure CSS/HTML, I think it just shows the sort of purist that he is.

  3. Mohammad Reza Farsizadeh said over 2 years ago

    In the name of ALLAH
    Hello
    Your site’s contents is good really.

  4. Jon Tan said over 1 year ago

    Hi Rogie, I’ve been remiss in not stopping by to say thanks for your generous words, before. A colleague reminded me with a link yesterday, so I thought it was about time. I definitely don’t see myself as a master, but I appreciate it, regardless!

    Larry, “masochist” is exactly the right word. It was time consuming but fun! One thing I would say is that an elastic layout gives genuine zoom based on default text size rather than an illusion.

Sorry, the comment form is closed at this time.