15 excellent examples of Web typography

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

sd-alistapart.jpg

02: Shaun Inmanprofessional designer and developer

sd-shauninman.jpg

03: FontShopas its name suggests

sd-fontshop.jpg

04: Jesús Rodríguez Velasco blog of UC Berkeley professor

sd-rodriguez.jpg

05: BearSkinRug Shop professional illustrator, Kevin Cornell

sd-bearskinrug.jpg

06: Design View Andy Rutledge, design strategist

sd-andy-rutledge.jpg

07: Rikcat IndustriesRik Catlow, design director

sd-rikcat-industries.jpg

08: Quipsologiesnews and creative morsels

sd-quipsologies.jpg

09: Design Snipsweb design showcase

sd-design-snips.jpg

10: Red Interactive Agency web marketing and development

sd-red-interactive-agency.jpg

11: The Big Noob developed by and for…noobs

sd-the-big-noob.jpg

12: Design Can Change climate change

sd-climate.jpg

13: Process Type Foundry they make type

sd-process-type-foundry.jpg

14: Finch interactive and graphic design agency

sd-finch.jpg

15: SR28 Simon Reynolds, web designer and illustrator

sd-sr-28.jpg

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.


Tags:       

  1. 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?

  2. 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?

    lud.icro.us

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

  4. 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 :)

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

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

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

  8. Stephen
    You’re welcome. Do you know the name of the developer(s)?
    Thanks for the swashy Ls link.

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

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

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

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

  13. 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???

  14. 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!

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

  16. 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 ;)

  17. A great collection of not only fonts, but also examples of how even the regular fonts can be used so beautifully.

  18. Nathan Rutman

    I like the Coudal Partners site for their design emphasis on typography!

    Great list! Thanks!

    -Nate

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

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

  21. 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!

  22. Gen

    Your type is too small!!

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

  24. Although my work is lesser known the above I would love to submit my site for typography use:

    http://www.circa1979.com

  25. Wow! Zeldman likes you —- you’re one degree of separation from a deity! Congrats on all the kudos and the digg.

  26. 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 ;)

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

  28. 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…

  29. 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?

  30. Cool list, thanks for featuring design|snips!

  31. Edward,
    I think #5 and #15 are the best in the list! I didn’t care for #2 and #6 much.

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

  33. @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.

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

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

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

  37. 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’

  38. I think that http://www.dragnet.se deserves a look to.

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

  40. Really nice and versatile (regarding the style) list. I like 04 most.

    For me this

    http://www.immovarro.be/

    ist fine too.

  41. 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!!!!

  42. Nice article and great examples. I would add Coudal Partners to the list.
    http://coudal.com/

    I love their site and typography!

  43. 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?

  44. n3rdski

    Wow really good sites. That Design Snip was really random and I loved it.

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

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

  47. Another text-designed website:
    http://urlslive.com/

  48. Welder
    Thanks for the link. I’ll take a look.

    Addopinion
    That site is unusual in its choice of body text size:

    font-size:x-small

    I can barely read it.

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

  50. ravvyb

    Thanks for the great list. My favorite is #1 and #2. I want to redesign my own blog now!!

  51. Mad

    I would add Stock Exchange of Visions to the list.
    http://www.stockexchangeofvisions.org

    I love the site and its typography!

  52. Jon and Ravvyb
    Be sure to keep us updated on your progress.

    Mad
    Thanks for your link and your kind words.

  53. Peter

    thanks for the list…and for the stock exchange link!

  54. Great list. Keep up the good work.

  55. 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?

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

  57. Marshall

    Very nice list of sites.

    Does anyone know what font is being used for the headings on Design Can Change?

  58. @marshall —- it might be Auto 3 Light: link to myfonts.com

  59. @marshall: I submitted this yesterday, but it looks like the site ate my response. Anyhow, I think the font is Auto 3.

  60. Marshall

    Thanks Alec! I like that font a lot.

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

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

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

  64. #4 looks like a myspace kid page rather than a professor’s. still awesome though.

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

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

  67. Very good. Congratulations! Very great list of sites.
    Excelente! Saúde e paz! Peace.

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

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

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

  71. They are some really nice looking sites - I personally like zeldman.com and simplebits.com (their previous design was better I feel).

  72. 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?

  73. great list, there are some very cool examples here, i specially like #2 and #4

  74. http://www.ff0000.com/ - JUST F***N AMAZING!!!! graphics like http://notsosimpleton.com/ with with interactive its ROCK!!!

  75. Definitely some great designs there - I personally like #9, simple and clean.

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

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

  78. Awesome examples of typography in the Web 2.0 workd - #11 (bignoob) and #15 stick out in my mind the most.

  79. Excellent site, good typography

    http://www.a1newmedia.co.uk

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

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

  82. Marcus
    sIFR is what you’re looking for.

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

  84. Good examples. The typo designs are very good, keep up that great work.

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

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

  87. Great list. I am copy this article and pictures and paste on my page. Best regards

  88. A great collection of not only fonts, but also examples of how even the regular fonts can be used so beautifully. Thanks for it.

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

  90. Great list, I particularly like the fresh design used in 10 and 11.

    Regards

    Jon
    JNKServices

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

  92. Wow excellent list and all the sites look amazing. Definately popping that one in my bookmarks.

    Cheers

  93. Excellent article!
    Thanks for sharing.
    Regards

  94. Looks very interesting.

  95. wow, Great list….
    thanks for sharing..

  96. great list, there are some very cool examples here… thanks for sharing…

  97. Very nice collection. Give me an urge to start a new site!

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

  99. Wow awesome, great list, there are some very cool examples here… thanks for sharing…

  100. Very good. Congratulations! Very great list of sites.

    Regards,
    Super Mario Bro

  101. Thanks for the great list. My favorite is no.5 and no.8. I want to redesign my own blog now!!

  102. Really nice design inspiration, thanks a lot! By the way, YOUR website has great typography as well. Keep it up!

  103. Nice examples! Really cool, just bookmarked!

  104. Wow, this site is simply gorgeous! I think I’ve learned a lot about typography by just looking at the featured sites. Thank you!!

  105. IVA

    Fantastic examples of Web Typography, #4 & #15 are just fantasic. Pure Art.

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

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

  108. Very good. Congratulations! Very great list of sites.
    Excelente! Saúde e paz! Peace.

  109. oh my i just found this blog… great list of sites

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

  111. This whole site has great use of typography . Good job.

  112. Very nice.
    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.

  113. Greagt typography-site - I like clear lines and s website that is easy to navigate - The Big Noob — developed by and for…noobs - is my personal favorite… in my opinion there avery customer can see very fast what the site is about and how the navigation goes. I will visit your site again - like it - Chris

  114. Wow really good sites. That Design Snip was really random and I loved it.

  115. Great post,
    excellent selection of typography websites, when designing a website as well as having a good layout and use of images, i think what really makes a website is the typography, just doing something simple with it can make a big difference to any site.

  116. 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!!!!

  117. I’m going to put my head out there and say that effective typography is one of the main cores when designing a good website. This is because it makes the site a lot more accessible and easier to use. After all, websites are usually about INFORMATION and if that information is done in proper typography it’s communicated much more effectively. I don’t know why many designers don’t think of it like that – for me, it’s pretty much a nobrainer. This list shows how just simple things can have major impact.

  1. Metagg—Sep 21, 2007
  2. meneame.net—Sep 21, 2007
  3. Type — Jason Robb—Nov 12, 2007
  4. .terceiro vag—Nov 13, 2007
  5. Random Tangent—Jan 14, 2008
  6. Typografia « Grafika—Feb 13, 2008
  7. Typography for the web—Jun 18, 2008

previous post: ILT Investigates: type torture

next post: Baskerville, John

July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts January Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts december Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts May Fonts April Fonts March 2011 Fonts February 2011 Fonts January 2011 Fonts December 2010 Fonts November 2010 Fonts October 2010 Fonts September 2010 Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February 2010 featured fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts October Fonts September Fonts August Fonts July Fonts June Fonts May Fonts April Fonts March Fonts February Fonts January Fonts December Fonts November Fonts