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:
Happy Cog—note how the main menu items are incorporated in the opening paragraph:
The Morning News—transferring that magazine or newspaper look to the screen is sometimes disastrous. This one gets it right:
SpiekermannPartners—this is how you use a grid (note: no footers):
Rainfall Daffinson—the not-so-invisible grid:
Porchez Typofonderie—typetastique:
AIGA NY—clean and simple:
Fray—a nice slab of serif:
Cameron i/o—just text. I’m rarely a fan of light text on a dark background, but…
Upstart Blogger—web typography gone Swiss. A white-space feast:
Frieze—I’m sure you’ll recognise the logo font:
Freelance Switch—organised and structured:
Monday by Noon—another simple one, and fluid to boot:
A Brief Message—nice use of sIFR:
Words are Pictures—nice text and gorgeous illustration; shame about the silly scrolling thing:
What do you think?
And who can name the font used in the header for this article?
Subscribe to i love typography.
— Hochuli & Kinross
109 comments * comment * trackback
Nour
Very nice list. Inspiring use of type.
Please, please do an article on sIFR in 2008! :-)
Jan 2, 2008
LaurenMarie - Creative Curio
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…
Jan 2, 2008
Benjamin D.C.
» “who can name the font used in the header for this article?”
I think it’s officina sans bold : )
Jan 2, 2008
Ted Winder
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?
Jan 2, 2008
johno (iLT)
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!
Jan 2, 2008
Benjamin D.C.
» 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.
Jan 2, 2008
johno (iLT)
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.
Jan 2, 2008
Squawk
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…
Jan 2, 2008
Alec
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?
Jan 2, 2008
Peter Svensk
Is the “frieze” font TheMix Normal (or any one of the dozens of weights) from FontFabrik’s Thesis family?
Jan 2, 2008
Ted Winder
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!
Jan 2, 2008
johno (iLT)
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 :)
Jan 2, 2008
Keith Parent
ITC Officina Sans Bold
…oh - too late.
Jan 2, 2008
Alec
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.
Jan 2, 2008
inspirationbit
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.
Jan 2, 2008
johno (iLT)
Keith
You still get 10 points for knowing it :)
Alec
Thanks for the feedback. Do you mean footers?
Jan 2, 2008
andrew
here are couple i pulled out last night:
http://markboultondesign.com/
http://craigslist.thebignoob.com/
http://www.rapha.cc/
http://traveldk.com/
http://www.howies.co.uk/section.php/5/0
Jan 2, 2008
Joe Clark
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.
Jan 2, 2008
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.
Jan 2, 2008
Futurosity
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!
Jan 2, 2008
Rinse
Excellent and very inspiring list
Jan 2, 2008
Deb Pang Davis
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…
Jan 2, 2008
Peter Svensk
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).
Jan 3, 2008
Justin
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.
Jan 3, 2008
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
Jan 3, 2008
Ravi
People at http://spanish.berkeley.edu/ treat their text well.
Jan 3, 2008
David Airey
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.
Jan 3, 2008
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/
Jan 3, 2008
Ashley Morgan
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
Jan 3, 2008
Reminiscor
the frieze logo is based on the old frieze logo which was based on something by emigre
Jan 3, 2008
Matthew Slotover
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.
Jan 3, 2008
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)
Jan 3, 2008
Robert
Wow very excellent examples, so inspiring :)
My top 3 favorites would have to be Webstock, Happy Cog, and AIGA NY. :) Good Stuff!
Jan 3, 2008
Rob
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.
Jan 3, 2008
johno (iLT)
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:
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).
Jan 3, 2008
Peter Svensk
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.
Jan 3, 2008
Stephen Coles
sIFR stands for Scalable Inman Flash Replacement, not “Shaun”, but you were close. ;)
Jan 4, 2008
Hamish M
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.
Jan 4, 2008
johno (iLT)
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.
Jan 4, 2008
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
Jan 4, 2008
johno (iLT)
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.
Jan 4, 2008
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!
Jan 4, 2008
Craig Ward
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.
Jan 4, 2008
Brad Rice
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.
Jan 4, 2008
johno (iLT)
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.
Jan 4, 2008
Craig Ward
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!
Jan 4, 2008
Sarven Capadisli
I find the Happy Cog design is using way too many type sizes then necessary.
Jan 4, 2008
johno (iLT)
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:
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?
Jan 4, 2008
Robert
Hmm… my guess is Clarendon. The “a” is what gave it away. But I could be wrong :)
Jan 4, 2008
Hamish M
Johno
Hmm, I like that idea. I’ll have to give it a go sometime. :)
Jan 4, 2008
Ted Winder
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
Jan 4, 2008
johno (iLT)
Robert
Bingo. Some more difficult ones coming soon. (Clarendon’s ‘g’ always makes me laugh).
Ted
Thank you.
Hamish
Which idea?
Jan 5, 2008
Hamish M
Johno
I’m thinking a design involving Scrabble tiles, perhaps. :)
Jan 5, 2008
Robert
Yeah Clarendon’s “g” reminds me of the Disney character goofy :)
.
Jan 6, 2008
james
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.
Jan 6, 2008
mac_fun
Amazing that most of them use “text” displayed by the browser, not jpg or gif images. Lots of CSS work?
Jan 7, 2008
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.
Jan 11, 2008
erik spiekermann
BTW:
fray also uses Officina, albeit the serif version.
Jan 11, 2008
marcus scheller
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 …
Jan 11, 2008
johno (iLT)
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.
Jan 11, 2008
marcus scheller
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
Jan 11, 2008
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.
Jan 12, 2008
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.
Jan 12, 2008
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
Jan 16, 2008
johno (iLT)
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.
Jan 19, 2008
Alan Smith
Shameless plug for 600 point type on the web.
The Movement
Jan 21, 2008
obrazy
Very useful post, thanks
Jan 28, 2008
Adaptiv Media
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…
Jan 29, 2008
Marlyse Comte
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.
Feb 6, 2008
Tony Webster
Awesome list! Fray is great.
Feb 23, 2008