Examples of Typographic Style on Commercial Web Sites
There's something special about opening a page that uses great typography and layout. The headline pops out at you, drawing you in. Through good use of spacing the text looks readable and inviting.
The paragraphs are nicely chunked so you know you can read through them without losing your place. Images are given room to coexist on the page, and the caption text doesn't blend in with the rest of the copy.
All these elements combine into a feeling of acknowledgment of the reader by the designer — a recognition that for content to be truly read it has to breathe, unencumbered by short line heights, narrow columns, small font sizes and intrusive advertising.
Given that most of the internet is still content-based, why is it then that there are so few really good examples of what I've just described above, especially on large, commercial, content-rich web sites? You know, like news and magazine sites?
Below are some examples — not necessarily perfect — of sites that get it.
They understand that to be effective, content has to be read, and to be read it has to be presented in a way that acknowledges and rises above the limitations of the medium in which it exists.
1. Business Week
2. Financial Post
3. The BBC
4. The New York Times
5. The Seattle Times
6. TIME
As I mentioned, these examples are not perfect. Business Week's paragraphs are a little too long. The BBC's style is a little too functional (although very readable). I'm personally not a huge fan of The Seattle Times' choice of Arial as a body copy font.
However, they do get most of it right — oh, and these screenshots do not do them justice.
I'm sure I've missed some great examples of well implemented web typography on large, commercial web sites. Please let me know in the comments.
Posted on: January 29, 2008 | 14 Comments
Recent Entries in "Web Design"
Recent Posts
- Is It Fair To Criticize Bad Design? (26)
- NCsoft North America is Hiring Web Folks (2)
- BBC News Site Redesign and User Feedback (12)
- A Good Meta Description is Hard to Find (19)
- I've Got a New Job (15)
- Online Charting Tool for RSS Feeds (4)
- 8 Questions You Should Ask on Every Project (9)
- Get More Traffic: 18 Social Media Sites for Web Designers (26)
- The Evolution of a Button (8)
Popular Posts
- CSS Rounded Corners 'Roundup' (76)
- Using a Background Image Grid to Lay Out Your Web Site (43)
- Typography for Headlines (40)
- Blog Comment Form Design Showcase (15)
- Blog Comment Design Showcase (36)
- How to Get a Job in the Web Industry (24)
- How to Create a Block Hover Effect for a List of Links (32)
- How to Write a Web Site Creative Brief (6)
- How to Style 'Author' Comments Differently on Your Blog (9)
- How to Style an A to Z Index with CSS (5)
14 Comments Posted
Times Online?
1. Posted by Matthew on January 29, 2008
Seems like the BBC could do with more spacing around their images/captions.
2. Posted by John Faulds on January 29, 2008
Matthew — yes, although the paragraphs run on too long. That middle column could do with being removed as well, so that the articles have more horizontal room on the page.
For a contrast, check out Portfolio which, although the article column width is about the same, is much more readable because of shorter paragraphs and larger line heights.
John — agreed.
Fortune Magazine is pretty good although the text color is too light.
3. Posted by Christian Watson on January 29, 2008
They are simple, effective headings, which means these sites are not only good from a design point of view, but usuability is good and its easily understandable, nothing worse then a user getting lost in a site.
Big fan of financial post headers ^^
4. Posted by Ash on January 30, 2008
Some of these have to similar font weight in headings and the content which makes them blend together!
5. Posted by Jermayn Parker on January 30, 2008
Fortune Magazine is pretty good although the text color is too light.
yea, agree. the color make it diffcult to read.
6. Posted by jack on January 30, 2008
i like to use image and photo to draw the attension of user, so i usually place a image next to the link that i want the visitor to click on and this really work.
7. Posted by dave on January 30, 2008
I agree completely. Sometimes sites are so "artsy" that they are illegible. In addition to bad typeface I hate having to go desperately in search of a phone number. I used to teach people how to use PowerPoint and I always said that they needed a good, easy to read presentation first before putting any effects in. I believe that same basic principle applies for the web. It must be easy to read and all relevant info must be easily accessible before putting in fancy design features. I love your blog-it is interesting and useful.
-Cordelia, Cordelia Blake Web Design, CB Blog
8. Posted by Cordelia Blake on January 31, 2008
I don't think these screenshots actually do this article justice. I think the whole design of these sites plays a huge part in allowing the focus to be on the article and generally making article styling as bare bones as your examples to really work. I'm not criticising the post by any means but i think that whilst the article is good - there is also the role of the overall site to play...
9. Posted by Adaptiv Media on January 31, 2008
I agree.. typrography, textography and imageography (sorry, I made those last two up) are all important, but I cant get past the number of simple spelling mistakes, bad grammar, and poor sentence structure that go completely unchecked... doesn't anyone proofread anymore..
oh and did you know..."..taht as lnog as the lsat two letetrs in a wrod are spleled coerrtcly, the hmuan bairn wlil stlil decode the mssegae".. cos you just read this, didn't you..............
10. Posted by Keith Riley on February 01, 2008
Adaptiv Media — I agree with you. The articles look much better in the context of the web sites that they come from. I think the New York Times is a case-in-point.
11. Posted by Christian Watson on February 05, 2008
Typographic can be a issue to web designers and take effects on the intial design. Designing a site in photoshop and then exporting into a HTML editor means that you either have to use images or re-create the titles using real text.
As you all know not all browsers support all the font lists installed on a personal machine, meaning you have to substitute hindering your design.
Most modern HTML editors do allow modification tho, and with some clever manipulation you can remove letter spacing, apply classes and adjust levels of density to increase the attractiveness of a simple title.
Maybe the BBC web designers should take note!
12. Posted by Nick-SEO on February 06, 2008
Hi Christian,
Good to know this stuff is important and people notice. I work with a graphic designer who specialises in typography and she's always harassing me to make my website comply with her demands.
I'm trying and will get there eventually...I swear!
13. Posted by Craig Dewe on February 06, 2008
Most people dont realise how important it is to make your text look professional. I think i prefer number 1.
14. Posted by web design leeds on April 18, 2008