30Jan

Web Site Typography Makeover

In researching sites to include in my post on good typographic style I came across countless examples of poor typography and layout.

One of those was GQ magazine, which surprised me given the quality of the magazine's print version. Take a look at a sample article and judge for yourself.

I thought it would be interesting to see what improvements could be made to the typography and layout of the article.

Here's the page before:

GQ article page screenshot

And here's the page after 15-20 minutes of tweaking:

GQ article page after typography improvements

Did I make my point?

Posted on: January 30, 2008 | 14 Comments

14 Comments Posted

HUGE improvement. Good work. Hopefully they will see this post and get it together.

1. Posted by Chris Coyier on January 30, 2008

yea, some website does have poor layout, but often they manage to change or modify their site after some time.

2. Posted by jason on January 30, 2008

wait, does this happen to you, im using a labtop, so when i scroll up, it will take me all the way to the top of the page and then stop, i cant stop the scrolling. wonder is this s bug of this blog or just my computer.

3. Posted by jason on January 30, 2008

I like your version of the Headline and introductory paragraph - theirs is way too compressed together, both vertically and horizontally.

But I think I prefer their body text - the white background and bolder text is quite harsh on the eye (on my monitor at least). I think I'd stick with black on grey, but use a lighter shade of grey than the sidebar.

That's just me though.

4. Posted by Chris Hunt on January 31, 2008

Jason — I suspect it may be your laptop. I haven't heard of this problem before.

Chris — your point about how the page looks on your monitor is critical. It's hard to know how a color will look on different monitors. They gray background of the original article looks too dark on my monitor.

Therefore, in my opinion the safest bet is to use white for your content background as it will provide the best contrast across the widest range of monitors.

5. Posted by Christian Watson on January 31, 2008

To often it seams that people forget how important good contrast and an easy to read font are to making a good site. The little bit of work that you did would not require much effort, maybe a little CSS tweak, and it made a world of differnce for the layout. Hopefully, GQ will see this and make a change for the better.

6. Posted by Blue Clove Designs on January 31, 2008

Good instructive example!

7. Posted by Edjuh on February 02, 2008

Your layout looks a great deal cleaner, that's for sure. However, for an article of this length - the original broken into 11 pages - your amends will have effectively doubled the depth of these pages.
I know that many clients really dislke having to scroll through overly long pages. Would you recommend to GQ that they leave the article broken into the original 11 (now much deeper) pages, or would you suggest that they break it up even further - and in that case would you expect readers to be put off by an article that now runs to 18 - 20 pages?
Cheers! R.

8. Posted by richard on February 02, 2008

Richard — this is already a very long article, so I'm not sure that my typographic changes really matter from that perspective.

Of course, one could argue that the article is too long for the web in its current form and should be edited down.

In my opinion, my changes make the article easier to read which counters any potential negative effect of it being longer on the page.

9. Posted by Christian Watson on February 05, 2008

This may be a little off-topic, but Christian's point about the length and web-friendliness of this article made me think about it... remember when just a few years back every print outlet seemed to thrill at putting large articles online? ("Read the rest of the story online!") The thought at first was how much cheaper (virtually free) it was to put all this content online versus printing it, and here we find now that people have even LESS tolerance for long articles on screen than in print. (I've already prattled on too long, in fact!)

I agree w/ the point about contrast being key for readability, but think a middle ground between the revised version and the original could be found. That grey may be too dark, but a lighter shade of grey would probably still be both safely bright enough and preserve contrast with the introduction. Overall though, I think what you've found is a print designer trying to replicate the look on the web and not realizing the failure that lies therein.

10. Posted by adam j on February 08, 2008

Adam — you make an interesting point. Would someone actually read this article all the way through online? Fortunately, because it is broken up into separate pages it would be pretty easy to review the analytics to see how far most people get.

I suspect that a small percentage of people read the whole article. Which begs the question — should it just be an online version of the original print article or should it be stripped down to suit the medium?

I would suggest the latter is more appropriate.

By the way, for a similar example of how not to write for the web, check out a sample article from The New Yorker magazine . Can you imagine reading 7 pages of that dense text? I doubt it!

11. Posted by Christian Watson on February 08, 2008

good example!

12. Posted by lexu web design on February 12, 2008

A very good example of how semantic's play a big part in effective web design

13. Posted by Mat on February 17, 2008

Even the grey background that they used, makes the article harder to read. I find that if you are just using small amounts of text, then you can be artistic with the typography, and tighten the letter spacing to make it look a little more snazzy, but any substantial text that you want people to read on your web-site needs to be clear and a comfortable size.

14. Posted by James Creare on February 21, 2008