15 Excellent Examples of Web Typography
Part I: Showcase
I have spent the last month searching, stumbling, noting, bookmarking and analysing in a quest to find 15 Excellent examples of Web Typography. I’ve chosen them because they make excellent use of type. Some of the examples mimic the typography of print, while others actually leverage web technology, smart CSS and delicious HTML to make their pages not only aesthetically pleasing, but legible, user-friendly and easily navigable.
In a few days, I will be taking an in-depth look at all these sites, delving into their grids, sifting through their CSS and dissecting their HTML, to discover what makes them tick — and what makes them excellent examples of typography for the Web.
Prepare yourself a drink, sip, sit back, scroll, click and — above all else — enjoy.
01: A List Apart — for people who make websites
02: Shaun Inman — professional designer and developer
03: FontShop — as its name suggests
04: Jesús Rodríguez Velasco — blog of UC Berkeley professor
05: BearSkinRug Shop — professional illustrator, Kevin Cornell
06: Design View — Andy Rutledge, design strategist
07: Rikcat Industries — Rik Catlow, design director
08: Quipsologies — news and creative morsels
09: Design Snips — web design showcase
10: Red Interactive Agency — web marketing and development
11: The Big Noob — developed by and for…noobs
12: Design Can Change — climate change
13: Process Type Foundry — they make type
14: Finch— interactive and graphic design agency
15: SR28 — Simon Reynolds, web designer and illustrator
Don’t forget to check back here for the second part, “15 Excellent Examples of Web Typography — a closer look.” It’s going to be dirty work, so your overalls, and be prepared to get your hands dirty, as we take these sites to pieces, look at grids, layout, and some very neat CSS tricks to improve your web typography.
What do you think of these examples? Are there others that you feel deserve a mention?
To ensure you don’t miss out on Part II, join the other +2000 TypeNuts and subscribe to I Love Typography today.
Read the second part, 15 Excellent Examples of Web Typography — Under the Bonnet.




















199 Comments, Comment or Trackback
johnbillion
The website of the Department of Spanish and Portuguese at UC Berkeley (link) is very similar in style to — and equally as stunning as — Jesus Rodriguez Velasco’s blog. It’s a product of the same designer, Miguel Ripoll. Possibly another contender for a more in depth design analysis?
Sep192007
johno
JohnBilliion
I’ll take a look now. I’m a huge fan of Miguell’s work. Thanks for pointing out this other site — that’s exactly what I’m after. Perhaps I can include it in the follow-up article.
In fact, I’ve just found another site I like: Lee Pilmore. I particularly like the red reversed out headings.
I like the L in your logo. Which typeface?
Sep192007
Alec
Nice sites!
Here are a couple of others for web designers out there:
* Mike Davidson’s sIFR. While the site itself isn’t typographically remarkable, here’s an example of what you can do with sIFR: sIFR test page.
* Blueprint CSS. Here’s an example of Blueprint at work: Blueprint test page.
Sep192007
LaurenMarie - Creative Curio
I’ve bookmarked quite a few of these myself for the same reason! I do enjoy their typography. I also like Garrett Dimon’s blog (I don’t know him, but I like the typography). I’m going to bookmark this post!
JohnBillion, I like UC Berkeley’s and the professor’s blog, too. Johno, didn’t you have an interview lined up with Miguel? PLEASE ask him his source of inspiration if you do!
As a side note, I’m starting to really take notice of the typography around me, as I’m driving, watching TV, reading magazines… It’s getting up there with my design awareness! I think it’s mostly a result of reading iLT. Thanks, Johno :)
Sep192007
Edward Welker
Not sure how I feel about #5 and #15. I know they have a different feel to them, but…
Anyway, I always thought Subtraction was a good example.
I look forward to seeing the closer look. Might help me put a finger on what it says to me.
Sep192007
johno
Lauren
That’s great to hear. Yes, the interview with Miguel is still on. However, he has just relocated (to Spain), so there will be a delay. I’ll take a look at Garret’s blog now.
Edward
Some of the designs were chosen because of their overall use of type; others were chosen because of minor details that were well attended to. In the follow-up, I’ll let you know why I chose 5 and 15. Thanks for input.
Alec
You must have been reading my mind. I’ve been writing a post about Blueprint. Thanks for the sIFR links.
For those of you wondering what sIFR is (Scalable Inman Flash Replacement), then head on over to to Alec’s link to Mike Industries.
Sep192007
Stephen
Thank you for the FontShop mention, John!
I too like the lud.icro.us logo. Can’t place it but it reminds me of Aquamarine. Here are a bunch of other swashy ‘L’s.
Sep192007
johno
Stephen
You’re welcome. Do you know the name of the developer(s)?
Thanks for the swashy Ls link.
Sep202007
johnbillion
Thanks for the compliment, Johno. The font used for my L is called Splendid and came free with some cheap DTP software I bought about eight years ago! Like Stephen said, it’s very similar to the L in Aquamarine.
Sep202007
Chris Papadopoulos
Some really distinctive looking sites here, several of which I hadn’t seen before. All of them are pretty darn good and creative, though some of the more ornate ones arguably have some usability issues.
I like that you picked a black & white site (the Rikcat one) because I think it shows a lot of character when somebody is confident enough in their layout to avoid any colors whatsoever.
Sep202007
Hamish M
Great list. And some new ones for me too!
Funny enough, when I was reading this in Google Reader, I didn’t see that it was coming from iLT, and so I thought “Hey, iLT should be in that list too!” Heh.
Sep202007
johno
Chris
Yes, none of the examples is perfect. I think the Rikcat design and others that resist all the hues of the rainbow are brave designs. Colour, like so many elements of design can cover a multitude of sins.
However, when your design is standing in nothing but its proverbial underpants, then you really need to have a clean pair. Actually, I sometimes reduce a full colour design to grey scale as part of the testing process; it’s surprising how much this experiment reveals.
Hamish
Where’s that blushing smiley when I need it. Good to see you here again.
Sep202007
Dylan Bathurst
I noticed that on some sites they would use a serif font for the larger headlines and other heading text, but when it came to the actual content the type would switch to a sans-serif. I have experimented with this before, and to me it looks more elegant that way. What are some of your thoughts???
Sep202007
inspirationbit
I did a similar post back in February, picking 8 sites with great typography, but haven’t seen many of the sites on your list (starting from #7 and on, though I did recently discover Design snips). I really look forward to your dissection of those sites!
Sep202007
Jonna
Just found your site from digg. Very nice collection.
I would recommend http://www.webdesignerwall.com to be in the list as well. The designer spent every little details on type layout, from header to footer.
Sep202007
allan jones
Site number 2 actually makes one hell of a mistake: reliance on a font that won’t be installed on most machines out there (in that particular case, helvetica neue). Sure, the css drops it down to helvetica, but in doing so it actually upsets the layout of the page, and it doesn’t look anywhere near so nice.
But hey, that’s maybe because i’m a geeky coder type who only follows this site so I can understand what the hell the designers that I work with are talking about ;)
Sep202007
Amrit Hallan - HowToPlaza
A great collection of not only fonts, but also examples of how even the regular fonts can be used so beautifully.
Sep202007
Nathan Rutman
I like the Coudal Partners site for their design emphasis on typography!
Great list! Thanks! -Nate
Sep202007
Martin Ringlein
Awesome round-up; some really great inspiration in there.
It does seem like you have a strong liking towards BIG type though … it does look hot.
Sep202007
johno
Apologies to everyone who has had difficulty accessing the site. The Digg effect has taken its toll. Also the inimitable Mr Zeldman mentioned this article, leading to a traffic spike, the likes of which I’ve never encountered before.
I’m working on upgrading the server and improving the caching.
Thanks to everyone who shared and Dugg this article; and apologies again for the sluggishness. I’m working on it.
Sep202007
Octave Z
Very good choice and thanks to share this. Some of these examples are in this css showcase: Css Website , websites of my selection ;)
Thanks again!
Sep202007
Gen
Your type is too small!!
Sep202007
Dimka
Thank you a lot.
When you review those sites it would be interesting if you measure the loading time, to put it to the perspective. Because it often easy to make a nice looking page, but if it takes forever to load it is a different story.
Sep202007
diane witman
Although my work is lesser known the above I would love to submit my site for typography use: http://www.circa1979.com
Sep202007
Alec
Wow! Zeldman likes you — - you’re one degree of separation from a deity! Congrats on all the kudos and the digg.
Sep202007
johno
Thanks everyone for your comments.
@Diane
the only problem I see with your site is that the entire home page is an image (with image maps). Perhaps you could remake the page using HTML, real text and some CSS? Anyway, thank you for the comment and for the link.
@Alec
Looks like it’s time for me to buy one of those I Love Zeldman or I’ve been Zeldmaned t-shirts ;)
Sep202007
Lawsy
This article inspired my to create a new design for my weblog, its a minor change but it has made an old dog look shiny and new again. I have used less images and made more of an emphasis on serif fonts for the titles.
The effect is striking IMHO. Thanks for the article and the inspiration.
Sep202007
Alex Nogués
Miguel Ripoll has just been featured in an interview at the Communication Arts website: designinteract.com/insights/
Sep202007
Alex Nogués
Miguel Ripoll has just been featured in an interview at the Communication Arts website: http://www.designinteract.com/insights/
Sep202007
johno
Alex
Thanks for the link. I have an interview with Miguel lined-up, to be published on ww.redsil.com
Lawsy
You’ve made a great start.
Sep202007
shaggy
nice picks,
good job. it’s incredibly hard to do type on the web. i hear mozilla is working on hypenation? that would be nice. i really don’t want to have to use flash like shaun inman…
Sep212007
Andrew
This is a nice list of well-designed web sites, but I was kind of hoping that it would be a list of sites that use native web-text (Arial, Verdana, Times, etc.) well.
I think it takes a lot more talent to create well-designed layouts using pure CSS (no images), and the end result is more effective, accessible, and more in the spirit of the web.
Anyone have that list?
Sep212007
Thame
Cool list, thanks for featuring design|snips!
Sep212007
Dennis
Edward,
I think #5 and #15 are the best in the list! I didn’t care for #2 and #6 much.
Sep212007
Robert H. Goretsky
Agreed with Andrew’s comment above - it seems that some of these sites are using flash / images to represent the text. This definitely makes it harder for search engines to crawl these sites.. Looking forward to your follow-up to understand what CSS tricks can be used with basic text in order to accomplish similar layouts. Comment by Robert H. Goretsky of Hoboken, NJ.
Sep212007
johnbillion
@Robert H. Goretsky - You’re wrong when you say most (all) of these sites are using Flash or images to represent text and are therefore not search engine friendly. Several (I’m definitely not saying all) are using search engine friendly image replacement techniques, meaning they’re actually very search engine friendly while still representing text with images.
The obvious exceptions are the 100%-Flash sites, which I can’t believe people still get away with building.
Sep212007
Robert H. Goretsky
@JohnBillion: I stand corrected — When I posted the first comment, I took only a glance at some of these pages. I have gone back and looked through the HTML now, and see some pretty neat things going on.. Looking forward to a deeper dive into how some of this works underneath the hood.. Comment by Robert H. Goretsky of Hoboken, NJ
Sep212007
Ace
All things are nice around here, its really a cool list of designs that has been featured, thanks for the preview. I like it! http://www.bestofpty.com
Sep212007
Joshua
I think they’re all OK. Not tremendous, but decent, with a little too much flashiness (and flash) for me.
No offense, but they’re all better than IYT’s own type treatment, which uses types completely unsuited for the size they are used at, gratuitous all-caps for no real reason and a lot of odd little inconsistencies that I assume are meant to be stylish but really don’t add anything (i.e., the date treatment in the comments). Please don’t take that as an insult, because your content more than makes up for it! Joshua
Sep212007
Cody
I see you got the server running properly again!
Great article, but like I said last night, http://www.ourtype.de better be on the next list. You just can’t ignore the typography from that website.
Another great post, keep em comin’
Sep212007
Jonas
I think that http://www.dragnet.se deserves a look to.
Sep212007
johno
Cody
I’ll certainly take a closer look at that site. Thanks for the link.
Joshua
Thanks for your input. For a moment, I thought you must be Robert Bringhurst writing under a pseudonym, but even he uses all caps in bylines. No offence taken. Thanks for the constructive criticism.
Sep212007
polarizer
Really nice and versatile (regarding the style) list. I like 04 most.
For me this
http://www.immovarro.be/
ist fine too.
Sep212007
Kate
i loved that website it jumped out at you!!!!!i think this one website is so kool!!!!!!ya its spelled with a K!!!!!keep the site on here!!!!
Sep212007
chris
Nice article and great examples. I would add Coudal Partners to the list.
http://coudal.com/
I love their site and typography!
Sep212007
johno
Kate
did you add a link to your comment? If you did, it’s not showing up. Is that what you’re referring to when you say it’s spelled with a k?
Chris
I’ll take a look at that site. Is it one of yours?
Sep212007
n3rdski
Wow really good sites. That Design Snip was really random and I loved it.
Sep212007
johno
A 76pt thank you to everyone who read, shared and commented on this article. You are an inspiration.
The second part of this article is coming next week, when I’ll be taking a look under the proverbial bonnet — at CSS, grids and more. I look forward to seeing you all again then.
johno iLT
Sep222007
Welder
My friend Komitlak made some fonts and He want to share with others…
Here is a Link: http://designtricks.blogspot.com/2007/09/free-fonts-made-by-komitlak.html
Sep222007
AddOpinion
Another text-designed website: http://urlslive.com/
Sep232007
johno
Welder
Thanks for the link. I’ll take a look.
Addopinion
That site is unusual in its choice of body text size:
I can barely read it.
Sep232007
Jon Moss
Excellent article :-) Many thanks indeed!
I’m just in the process of getting my two brands (and corresponding websites) up and running, and will be carefully choosing which font/s to use.
Sep232007
ravvyb
Thanks for the great list. My favorite is #1 and #2. I want to redesign my own blog now!!
Sep242007
Mad
I would add Stock Exchange of Visions to the list.
http://www.stockexchangeofvisions.org
I love the site and its typography!
Sep262007
johno (iLT)
Jon and Ravvyb
Be sure to keep us updated on your progress.
Mad
Thanks for your link and your kind words.
Sep262007
Peter
thanks for the list…and for the stock exchange link!
Sep272007
Zoli
Great list. Keep up the good work.
Sep282007
Gail Dedrick
I find the type on Shaun Inman’s site far too small to read. Anc it can’t be resized with the browser I have to use at work.
Isn’t the the web still 99% about reading stuff. And the moving thing distracts me from — you guessed it — reading stuff. How can typography be good if you can’t read it?
Sep282007
Julie Elman
Love this list and the entire Web site. Very inspiring. I teach design/picture editing at Ohio University’s School of Visual Communication. Your site is a great resource for myself and the students — and helps me satisfy my own obsessions with typography. Thanks a bunch and keep up the good work.
Cheers, Julie
Sep302007
Marshall
Very nice list of sites.
Does anyone know what font is being used for the headings on Design Can Change?
Oct12007
Alec
@marshall — - it might be Auto 3 Light: link to myfonts.com
Oct12007
Alec
@marshall: I submitted this yesterday, but it looks like the site ate my response. Anyhow, I think the font is Auto 3.
Oct22007
Marshall
Thanks Alec! I like that font a lot.
Oct22007
Alex
Actually one of my friends first read this article and asked me to visit this page. This article has very useful information, it will be helpful for many.
It’s really amazing to read this description. Thank you so much for your help and for your efforts.
Thanks,
Alex http://www.NobleHelp.org
Oct82007
David Hopkins
I recently read that a reliable way of using non-system fonts for web sites will be implemented. I guess it was something to do with CSS3, but can’t find any reference. This should make the web much richer for dab hand typographers and a lot more unsightly for web noobs.
Oct82007
johno (iLT)
David
You might be thinking of WebKit. You can read a little more about it over at Typographica, in their article, “Embedded” Web Fonts Return. Uh-oh.
There’s also some info re fonts in CSS3 over at W3C.
Oct92007
syahid ali
#4 looks like a myspace kid page rather than a professor’s. still awesome though.
Oct102007
LOKi
Nice list of sites, though I’m not sure what your criteria was in selecting them. I think you missed the all too obvious (recently-redesigned) http://www.typography.com and ourtype.be
These sites from premiere independent type designers really showcase their beautiful work and good typographic web standards in general.
Oct102007
Jens Meiert
As far as I understand good typography (inspired by typographers like Tschichold), the less fonts, the better; also, even three sizes might be enough. Typographic excellence as an attribute of websites that use 5 fonts and sizes that really “scream”? I don’t know.
Oct102007
baratas
Very good. Congratulations! Very great list of sites.
Excelente! Saúde e paz! Peace.
Oct172007
Paul Wagner
http://www.tenmetal.com
Oct252007
johno (iLT)
Paul
I like your site, but the type is too small for my eyes. Hoefler Text/Times New Roman at that size is difficult to read. Great portfolio though.
Oct252007
Paul Wagner
thanks Johno,
I choose 11px just for additional information, all the really important text is in 12, 14 or 18px. In this case I traded legibility against structure.
Oct262007
fanboy
Some amazing examples. I had never seen bearskin rug before, that is a really nice site.
All this talk of uploading any font you want to use in the future seems a bit of a shame to me. The restrictions of web type forcing people to be extra creative is a good thing I think.
Oct272007
Mark
They are some really nice looking sites - I personally like zeldman.com and simplebits.com (their previous design was better I feel).
Nov32007
Mark
Experienceis the most important graphic magazine in italy, and works with typhography making it smells. yes. they make fragrance on paper making types smelling good. it’s great, don’t you tink?
Nov72007
dingmo Ed
great list, there are some very cool examples here, i specially like #2 and #4
Dec52007
Georg
http://www.ff0000.com/ - JUST F***N AMAZING!!!! graphics like http://notsosimpleton.com/ with with interactive its ROCK!!!
Dec212007
Pete
Definitely some great designs there - I personally like #9, simple and clean.
Dec282007
Zyczenia
This “Jesús Rodríguez Velasco — blog of UC Berkeley professor” have great design! This “SR28 — Simon Reynolds, web designer and illustrator” is very nice.
Jan52008
Pressemitteilung
Great list. And some new ones for me too! I noticed that on some sites they would use a serif font for the larger headlines and other heading text, but when it came to the actual content the type would switch to a sans-serif.
Jan52008
Logo Designers
Awesome examples of typography in the Web 2.0 workd - #11 (bignoob) and #15 stick out in my mind the most.
Jan102008
Peter Jones
Excellent site, good typography http://www.a1newmedia.co.uk
Feb12008
Stroller Chloe
While a diverse array of fonts are excellent, its a shame if u want to use one thats different you have to use an image, let them d/l, or use flash.
I suppose its the way things are going to be for a long time.
Feb32008
Marcus
Great list, is there any way to use different fonts in a website design without the need for the client machine to have that font installed? Apart from using the font in an image that is.
Feb112008
Hamish M
Marcus
sIFR is what you’re looking for.
Feb112008
Logo designer
How come that Coudal Partners site is not on your list? The site is classics of web typography, not only in its current reincarnation, but its previous versions as well.
Feb282008
Ausdauer
Good examples. The typo designs are very good, keep up that great work.
Mar32008
James burt
They are really good design. Love design no. 15. Do you happen to know their designer? I really need a good designer for my new website.
Mar62008
Andie Miller
Hi there,
Just came across your typography example, which has not only inspired me but given me a lot of ideas to help us draw on our design skills, especially in our new development which enables us to provide an easy solution to enable smaller clients better functionality with good design. Please feel free to critique our development, but please note our easy web design development can be adopted to any style Build a starter web site
Mar232008
Opony
Great list. I am copy this article and pictures and paste on my page. Best regards
Mar282008
Micky
A great collection of not only fonts, but also examples of how even the regular fonts can be used so beautifully. Thanks for it.
Mar282008
edebiyat
Interesting.. I like that you picked a black & white site (the Rikcat one) because I think it shows a lot of character when somebody is confident enough in their layout to avoid any colors whatsoever.
Apr52008
Jon Roberts
Great list, I particularly like the fresh design used in 10 and 11.
Regards
Jon JNKServices
Apr62008
felsefe
Thanks for very interesting article. I really enjoyed reading all of your posts. It?s interesting to read ideas, and observations from someone else?s point of view? makes you think more. So please keep up the great work.
All the best
Apr82008
Web Design Manchester SEO
Wow excellent list and all the sites look amazing. Definately popping that one in my bookmarks. Cheers
Apr82008
forum
Excellent article!
Thanks for sharing. Regards
Apr82008
filozof
Looks very interesting.
Apr92008
sinema
wow, Great list….
thanks for sharing..
Apr112008
sinema blog
great list, there are some very cool examples here… thanks for sharing…
Apr152008
Gothic
Very nice collection. Give me an urge to start a new site!
Apr152008
fundraiser
Seriously - amazing and beautiful collection of sites! I was actually surprised to see that I hadn’t seen most of these websites except A List Apart. I love that site.
Apr162008
Webdesign Agentur
Wow awesome, great list, there are some very cool examples here… thanks for sharing…
Apr192008
Super Mario
Very good. Congratulations! Very great list of sites.
Regards,
Super Mario Bro
Apr212008
Bahamut
Thanks for the great list. My favorite is no.5 and no.8. I want to redesign my own blog now!!
Apr212008
Senior
I’d have to recommend the following:
http://www.basmatitree.net/
and http://www.thesuperest.com/
Apr222008
Creationpool - Agentur für Webdesign und Flash Programmierung
Excellent work. I like the Typography.
Apr232008
Webdesign Hamburg
Really nice design inspiration, thanks a lot! By the way, YOUR website has great typography as well. Keep it up!
Apr242008
Kölsch
Nice examples! Really cool, just bookmarked!
Apr252008
Friseur
Wow, this site is simply gorgeous! I think I’ve learned a lot about typography by just looking at the featured sites. Thank you!!
Apr282008
IVA
Fantastic examples of Web Typography, #4 & #15 are just fantasic. Pure Art.
Apr292008
Creare Web
Excellent example of quality typography.
Typography is utilized more than ever at the moment, as a web developer myself its almost my companys standard to create a typography logo for a potential customer.
If they then request a specific logo design we would then charge then additional for a bespoke design.
May12008
Website Design
Some great links to typography websites there. I think typefaces are fundamental in the aesthetics of any website, perhaps even more so than images.
Gotta say I love this site, great job.
May22008
website design
Very good. Congratulations! Very great list of sites.
Excelente! Saúde e paz! Peace.
May52008
DazzleCat
oh my i just found this blog… great list of sites
May82008
Claire Search
As you seem to be a bit of an expert on fonts, i was wondering if you could possibly answer a question that has been bugging me for a while…
I was wondering if you can attach fonts to your website, so you don’t have to keep to the standard fonts that everyone else has?
It would be great if you could give me an answer.
Also, really helpful website, nice and informative, and looking forward to you dissecting these 15 sites. I have been designing for a web company for just over a year now, and before that i just did a Graphic Design and Photography course and didn’t know alot. So i would say i was still pretty much a beginner, in comparison to flash websites out there.
Thank you everyone
May92008
Reply to “15 Excellent Examples of Web Typography”