I Love Typography

15 Great Examples of Web Typography

The List: Q1 2008

What better way to start the year than with a little typographic inspiration. Last year I published 15 Excellent Examples of Web Typography, and owing to its popularity and people’s sateless appetite for lists, here are another 15. I’ve decided to make this a regular feature and will publish this list every quarter (3 months [for those living on Mars, that’s every 5.7 months]).

Some of the designs are here for their simplicity, and they demonstrate that sometimes less really is more. Others made it onto the list simply because they use text well, or they demonstrate how the grid should be used. Although I’m sure that a number of these sites are very accessible and validate against HTML99 and the like, they exist here not because of that and not because they are pretty (though sometimes they are), but because of their treatment of text—their typography. Well, here they are (in no particular order). Enjoy.

Webstock—mixing it up:

webstock.gif

Happy Cog—note how the main menu items are incorporated in the opening paragraph:

happy-cog.jpg

The Morning News—transferring that magazine or newspaper look to the screen is sometimes disastrous. This one gets it right:

Typography. The Morning News

SpiekermannPartners—this is how you use a grid (note: no footers):

spiekermann-partners.jpg

Rainfall Daffinson—the not-so-invisible grid:

Typography. Rainfall Faffinson

Porchez Typofonderie—typetastique:

typofonderie.jpg

AIGA NY—clean and simple:

Typography. AIGA NY

Fray—a nice slab of serif:

Typography. Fray

Cameron i/o—just text. I’m rarely a fan of light text on a dark background, but…

Typography. Camero i/o

Upstart Blogger—web typography gone Swiss. A white-space feast:

Typography. Upstart Blogger

Frieze—I’m sure you’ll recognise the logo font:

Typography. Frieze Magazine

Freelance Switch—organised and structured:

Typography. Freelance Switch

Monday by Noon—another simple one, and fluid to boot:

Monday by Noon

A Brief Message—nice use of sIFR:

Typography. Ripped From the News

Words are Pictures—nice text and gorgeous illustration; shame about the silly scrolling thing:

Typography. Words are Pictures

What do you think?

And who can name the font used in the header for this article?

Subscribe to i love typography.


Tags:   

  1. Very nice list. Inspiring use of type.

    Please, please do an article on sIFR in 2008! :-)

  2. I really like the Web Stock site. I saw that a little while ago and admire the way they use typography in the (image-based) titles, altering the sizes and even orientations!

    I notice that many sites use the menu in the opening paragraph or purpose statement. Automattic does something similar, too. I like it, but I think it can present some usability issues because people look for traditional navigation, generally in a horizontal line at the top of the page. But I know, you’re presenting it for its use of type!

    Mmm, lots of type-based sites like Jon Tan and Astheria. Very lovely! I’m glad you’ll be doing a post like this more regularly! I enjoy them very much.

    I’m having trouble with the header font… at first I thought it was FF Meta because of the y, but now I don’t think so. Then I thought National, but the y (among other things) is different. I’m stumped! I do notice the little details that are kinda hard to miss at that size, like the bent ears and the angled terminals. The g, a, i, l and y should give it away if I can only locate where to look… checking the sidebar…

  3. » “who can name the font used in the header for this article?”

    I think it’s officina sans bold : )

  4. I loved every one of the sites you put on your last list, but I don’t really like these…

    And what is that font in Frieze?

  5. Nour
    It’s on my list :)

    Benjamin
    I’m impressed. The correct weight too. That was fast.

    Ted
    Not one? Re the font for Frieze, I’ll let someone else answer it. If no-one does, then I’ll let you know. Thanks for the comment!

  6. » Benjamin
    » I’m impressed. The correct weight too. That was fast.

    I love this type very much, so yes, it was quite easy for me : )
    Between, itsartist’s website might interress you for his “only web fonts” approach.

  7. Lauren
    Now you know. Thanks for the additional links.

    Benjamin
    It is kind of odd how popular Officina has become, when one considers what it was originally intended for. I’m with you, though—I’m a big fan. I’m even considering using it for the default header. I’d be interested to know what everyone thinks about that, Thanks for the link too.

  8. A very nice list. And the reference to Pink Floyd’s Wish You Were Here on ‘Words are Pictures’ made my day… I don’t know whether it was intended though.

    Initially I though that the font in the header was Hypatia Sans Pro, just because of the i, turns out I was completely wrong: It is nothing like it.
    And yes, Officina is lovely, too…

  9. Alright, two questions: First, Johno, do you have an issue with footers being part of a grid system? Second, What was Officina originally intended for?

  10. Is the “frieze” font TheMix Normal (or any one of the dozens of weights) from FontFabrik’s Thesis family?

  11. Ah, my question was already answered: must have been posted while I was writing my comment.

    I do like the websites above, but none of them stand out as being “AMAZING!” like some in the other list did. Never mind, though. :)

    Keep up the great work on this site!

  12. Alec
    >do you have an issue with footers being part of a grid system?

    Not at all. I just thought their absence was interesting, and it made me rethink the need for a footer (especially on a page that’s not very tall). Would be interesting to hear what others have to say on the subject.

    I think Officina was originally designed for business documents. I’ll need to check that—my memory’s not the best. I think that once it began to be used widely, then the extra weights were added. I’ll get back to you on that; unless there’s someone else out there with an answer. Of course, the designer is the one to ask :)

    Ted
    No problem. Appreciate your input. Maybe the next list will elicit a wow :)

  13. ITC Officina Sans Bold
    …oh - too late.

  14. I’m all for headers, even on short pages, but then I’ve been accused of being too “boxy” in my designs. (Of course, IABAD — “I Am Barely A Designer”.)

    Oh, and personally I’d vote “no” for Officina as your default header. I like the more traditional serif header you have now.

  15. I didn’t know that Martians are also reading iLT. How did you manage to get them to subscribe? ;-)
    I see HappyCog has already linked to this article, proudly showing off their feature here ;-)
    I’m with Alec - “nor” for Officiana as your default header. I’m surprised to read that it was originally designed for business documents, it has a rather informal look to it.
    Not really sure how MondayByNoon got on this list - it is a simple site indeed, have nothing against it, but then there are tons of very similar sites that look like this one.

  16. Keith
    You still get 10 points for knowing it :)

    Alec
    Thanks for the feedback. Do you mean footers?

  17. You actually seem to be assessing graphic design, not typography.

    And would people *stop saying* that Happy Cog is a pioneer in using a simple opening paragraph with links to describe its enterprise? I was doing that earlier than they were, and we know each other.

  18. Danielle

    I disagree with siting the “Words are pictures” site as an example of good typography. I wish the descriptions of the works were not in all caps because this makes them very difficult to read.

  19. Just wanted to thank you for including Upstart Blogger, which I designed, in your list. Wow! I feel honored to be in such fine company. You’ve included some of my favorite designs and introduced me to a few new ones. Thanks!

  20. Rinse

    Excellent and very inspiring list

  21. Wow, nice list, Johno!

    “A Brief Message” is a new one for me.

    I agree with Alec on Officina re: as your default header. Voting, “no”.

    And, I agree with Danielle about “Words are Pictures”. I enjoy the overall feel of the site and the caps are hard to read. Maybe I’m just getting old (grin).

    Andrew made mentioned of Rapha’s site which I think is really smart. I’m eager to get my hands on their magazine. The photography makes cycling really sexy…

  22. Curious if my guess about the “frieze” logo font was correct.

    Also, how ‘bout a jscript (or other) image rotator for the header so you can live a little, using lots of type treatments like this and this, for example (Filosofia and Adobe Caslon, respectively).

  23. Futurosity:

    I love the Upstart design. I’ve had it up all day since I found this post…haven’t actually read anything, just been enjoying the white space & Swissness of it. And the date format…nice.

    Nice nice nice.

  24. oli

    RE: international sites tweet, I was hoping you’d some post some examples of nice typography from the Japanese web—I couldn’t think of any either :-S

  25. People at http://spanish.berkeley.edu/ treat their text well.

  26. I love the hand illustration on the Fray website. It really helps it to stand out amongst the others (all very nice examples themselves).

    Thanks for this John.

  27. Barney

    I’d never seen cameron i/o before. I’d really had my fill of those ultra-minimalist light grey on dark grey type blogs as well, but this is really something special. Got it just right.

    One big issue: Words Are Pictures has crap web typography. It’s generally a bad website. The physical typography it showcases is very cool, but as an online entity it ain’t all that nice. When you said ‘the scrolling thing’ I thought you meant the fact that you can’t see the full width with a w1060px screen, and I didn’t actually notice that there was more than 450px of vertical content. Makes no sense.

    This is a particularly nice set up if you ask me:

    http://presentimperfect.com/

  28. Thanks for including my blog, Upstart Blogger, in the list, it is much appreciated. All credit to Robert (Futurosity) for the design. The current design will be freely available as a wordpress theme once the pending refresh is complete.

    I’d love some input on how the site could be given a fresh look without spoiling the inherent design aesthetic… http://www.upstartblogger.com/if-it-aint-broke-dont-fix-it

  29. Reminiscor

    the frieze logo is based on the old frieze logo which was based on something by emigre

  30. Very glad to see our site on this list, and that people are interested in the frieze font.

    As Reminiscor correctly surmises, the logo is from the magazine masthead, which was adapted from the Emigre typeface Triplex back in 1991 by Tom Gidley and myself. It has had a few tweaks since, recently by Paul Barnes, typographer to The Guardian newspaper and Peter Saville amongst others.

  31. TypoJunkie

    Hey John!

    Great links, even if I don’t really like some of them. I do love the Fray one, though.

    I found that the “frieze” logo looks a lot like Citizen, which to my surprise after reading the comments, was also designed by Zuzana Licko (or Emigre), but in 1986, so it might even be Triplex’s predecessor?

    Oh, and I vote “NO” on the header issue. I think it’s better if you (or the interviewed designer, or whoever) plays around with it whenever you (he) feel(s) like it.

    Anyway, keep the great posts coming, and have a great 2008 (which looks a lot better than 2007 when you type it)

  32. Wow very excellent examples, so inspiring :)
    My top 3 favorites would have to be Webstock, Happy Cog, and AIGA NY. :) Good Stuff!

  33. Excellent list. Thanks for deciding to do this regularly.

    I also loved your follow up to the first “15 examples” post, in which you got under the hood and described what made them good. I’d love to see more of that. Many sites make lists, but the invaluable info is understanding what makes something so good that it is noteworthy.

  34. Thanks to all for your comments.

    Deb
    Thanks for the vote. One of the benefits of having ‘i love typography’ on a single line is that it saves a little vertical space; might stick with FF Meta Serif but change to something like this:

    alternate header for iLT

    Ashely
    Thanks for dropping by. I’m sure someone here will have a few ideas.

    Peter
    Nice header. The second link doesn’t work, however. Might use the first one some time. If anyone else has a header design, then send away. Typographica does a similar sort of thing with its headers or nameplates—nice to see some variety; and another way for readers to contribute. Thanks for taking the time to create that.

    Justin
    I like the the date styling on upstart blogger too. Of course, there are those who’d say this kind of thing is an unnecessary distraction; but then one could say the same of art. I’m all for pleasant distractions. How mundane and prosaic the world would be without them!

    Barney
    presentimperfect.com is nice; would look even better with different sizes of type for headlines, body, etc. Haven’t seen that one before. Thanks.

    Reminiscor
    I’m not aware of previous incarnations of that logo. You have a picture?

    Oli
    I searched and found nothing. There’s just too much 1980’s and Flash in many of the Japanese web sites—a little too kawaii for my taste; but there must be some good ones out there. Anyone?

    Joe
    Well, it’s often difficult to talk about typography in complete isolation; and typography is about more than text. Re Happy Cog: I agree, they are by no means the first to do this sort of thing. Just an observation. Thanks for stopping by and taking the time to comment. I appreciate it.

    Vivien (inspirationbit)
    It’s not the Martians we need to worry about, but the Martian typography—must be something to do with their gravity ;) And re getting Martians to subscribe, that’s easy; just offer them Mars Bars, boom, boom.

    Rob
    Yes, I plan to do a follow-up to this. Several of the sites listed here make very good use of the grid in—that’s something I’d like to feature; for example, take a look at the very precise grid of the SpiekermannPartners site (measured to the pixel).

  35. John, here’s the Adobe Caslon nameplate. I worked at Aldus/Adobe in the ’90s and have always liked Carol Twombly’s cut of Caslon. Some guy used it for his word tattoo.

  36. Another great list, John! And some of these are totally new to me. Thanks for the inspiration — maybe one day I can make the cut! :)

    Seems I’m too slow for guess-the-header though, hehe.

  37. Peter
    Thanks again. Roger Gordon might be interested in that tattoo photo. Now I wonder if Jonathan Hoefler has a similar tattoo set in ITC Garamond ;)

    Stephen
    I never imagined anyone would notice that; my attempt at humour—and a poor one at that.

    Hamish
    Thanks. Would be interesting to see a site based on one of your wallpaper designs.

  38. TypoJunkie

    About Japanese websites, I always loved Yugo Yakamura’s work (although it has more to do with web innovation than grid/typography). He’s the guy behind http://www.yugop.com (WARNING: This is a bit addictive)

    Some of my favorites are http://www.kashiwasato.com and http://ut.uniqlo.com

  39. TypoJumkie
    Of course, the uniqlo site—clean forgot about that one; and I was reading about it just the other day in Creative Review. Thanks for the other links too. I’ll take a closer look later today.

  40. TypoJunkie

    Pica! (my new swearword) I Forgot to say that you can see his latest work at http://tha.jp

    Glad I could contribute something back!

  41. Thanks for including my site on the list; it’s only through forums like these that you can read honest feedback about how people percieve your site. I’d previously been chastised for making people scroll the page down to view my entire list of work on my old site, but now I’m in the wrong for having a scroller and, god forbid, all cap headers :D Perhaps there’s a better solution out there that I haven’t fathomed yet, check back soon.

  42. I liked Craig Ward’s scroller. However, I was a little confused about which word I needed to use “up” or “down”. Down actually scrolled the text upwards. The word images on that site were exceptional.

  43. Craig
    Thank you. You’ll never please everyone. Personally I find it easier (especially using a scroll wheel) to scroll the entire page, as opposed to elements within the page.

  44. Johno, you’re right, you’ll never please everyone, particularly in this field. It’s a brave designer who aligns himself with the field of typography as it attracts such fastidious commentators - myself included truth be told.

    Regardless, everyone’s opinion is valid and the site is in constant development so I’ll keep trying new things. I’m pleased to hear you like the work though, check back towards the end of the month for some (hopefully) very nice updates!

  45. I find the Happy Cog design is using way too many type sizes then necessary.

  46. Matthew
    Thanks for dropping by to clarify the font behind frieze.

    It appears that some of you missed Matthew’s comment, so here it is again:

    As Reminiscor correctly surmises, the logo is from the magazine masthead, which was adapted from the Emigre typeface Triplex back in 1991 by Tom Gidley and myself. It has had a few tweaks since, recently by Paul Barnes, typographer to The Guardian newspaper and Peter Saville amongst others.

    Now you’ve heard it from the horse’s mouth.

    Now here’s a much easier one: who can name the font used in the Happy Cog logo?

  47. Hmm… my guess is Clarendon. The “a” is what gave it away. But I could be wrong :)

  48. Johno
    Hmm, I like that idea. I’ll have to give it a go sometime. :)

  49. John, I recently featured iLT on a list of 9 top website designs. See it here: http://tedwinder.org/blog/2008/01/03/top-9-website-designs/

    Ted

  50. Robert
    Bingo. Some more difficult ones coming soon. (Clarendon’s ‘g’ always makes me laugh).

    Ted
    Thank you.

    Hamish
    Which idea?

  51. Johno
    I’m thinking a design involving Scrabble tiles, perhaps. :)

  52. Yeah Clarendon’s “g” reminds me of the Disney character goofy :)
    .

  53. Some very interesting ideas and layouts here - The ones with more extensive use of images seem to attract my attention more than a straight page of text. (FRAY being the prime example)

    James.

  54. Amazing that most of them use “text” displayed by the browser, not jpg or gif images. Lots of CSS work?

  55. erik spiekermann

    very precise grid of the SpiekermannPartners site (measured to the pixel).

    Thanks for the compliment, although it isn’t really one. How would you not measure to the pixel? What else would you measure to? Whether you code CSS or just HTML, you have to give measurements, not just say: “left a little and then down a little”. If you simply divide the given width into columns, there’s your grid. Not too fine so it wouldn’t get noticed (like bricks in a wall), but fine enough to give some orders to the page (like windows – they would be multiples of bricks, and the whole house would be multiples of the windows).

    And also thanks for the compliments about ITC Officina. More here:
    Get rich through typedesign.
    If only everybody who likes it so much had paid a license for it. For this particular typeface the estimates are that only 1 out of 10 users actually bought it.
    Don’t worry – I won’t go after anybody for using it. I’d rather you use one of mine without paying than some other crap.

  56. erik spiekermann

    BTW:
    fray also uses Officina, albeit the serif version.

  57. How would you not measure to the pixel?

    erik, it’s simply not usual in webdesign. most people don’t know or just don’t care …

  58. Mr Spiekermann
    Thanks for you input. About ‘measured to the pixel’, I was thinking more in terms of proportions—where even the vertical measures are a proportion of the horizontal. I plan a follow-up post, where I’ll be using your site as an example.

    I’m a proud owner of an Officina license. I think your ‘1 in 10’ is a conservative estimate (more likely 1 in 50). It’s a pity really, as this surely can only be a disincentive for aspiring type designers—though I guess the truly talented ones will design type whatever.

    I have heard from a reliable source that there is a circle in Hell reserved for font pirates, where the denizens are branded as such on their foreheads—set in Papyrus, of course.

    I hadn’t noticed Fray’s use of Officina until you mentioned it. I’ve just recieved a copy of FontBook through the post—absolutely wonderful. Thank you.

  59. where even the vertical measures are a proportion of the horizontal

    coincidence :)

    I plan a follow-up post, where I’ll be using your site as an example.

    if you need some info drop me a line since i and a coworker of mine developed the whole thing …

    cheers, m

  60. erik spiekermann

    coincidence

    Says Marcus, who built the site with Robert @ SpiekermannPartners. He’s being too modest. The proportions of all the elements have been carefully considered. The smallest grid element relates in proportion to the images and the main text boxes. And my blog site uses the same grid, albeit with different base element. This is how we get a familiarity between the sites that isn’t uniformity.

  61. erik spiekermann

    I plan a follow-up post, where I’ll be using your site as an example.

    Get Marcus to send you the original grid.

  62. sean steezy

    i am amazed at the depth of knowledge that some people have when it comes to typography. this site is something i check up on every now and then, and always end up cruising around for hours. the amount of knowledge on this site is incredible, and I enjoy wallowing in the ocean of font.

    all the links are great design/typography.

    much props.

    -ss

  63. erik spiekermann
    I have done; and I’ve gone a step further and ask that he write the post.

    sean steezy
    Thanks for the compliments, Sean. However, I do in fact know very little; but I do love type.

  64. Shameless plug for 600 point type on the web.

    The Movement

  65. Very useful post, thanks

  66. Great list. Thank the lord for XHTML and CSS!
    I have just too many personal favourites but these rock too.
    And sIFR. Oh the beauty…

  67. Great collection. It is so much fun to watch font take over the web, gone are the times where the web was every designers nightmare.

  68. Awesome list! Fray is great.

  1. Devolio—Jan 3, 2008
  2. Templaterie Blog—Jan 8, 2008
  3. gomenda.net—Apr 8, 2008

previous post: Sunday Type: Feel Type

next post: Sunday Type: Iso Type

October Fonts September Fonts August Fonts 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