The web­site of the Depart­ment of Span­ish and Por­tuguese at UC Berke­ley (link) is very sim­ilar in style to — and equally as stun­ning as — Jesus Rodrig­uez Velasco’s blog. It’s a product of the same designer, Miguel Ripoll. Pos­sibly another con­tender for a more in depth design ana­lysis?

John­Bil­liion
I’ll take a look now. I’m a huge fan of Miguell’s work. Thanks for point­ing out this other site — that’s exactly what I’m after. Per­haps I can include it in the follow-​up art­icle.

In fact, I’ve just found another site I like: Lee Pilmore. I par­tic­u­larly like the red reversed out head­ings.

I like the L in your logo. Which typeface?

Nice sites!

Here are a couple of others for web design­ers out there:

* Mike Davidson’s sIFR. While the site itself isn’t typo­graph­ic­ally remark­able, here’s an example of what you can do with sIFR: sIFR test page.

* Blue­print CSS. Here’s an example of Blue­print at work: Blue­print test page.

I’ve book­marked quite a few of these myself for the same reason! I do enjoy their typo­graphy. I also like Gar­rett Dimon’s blog (I don’t know him, but I like the typo­graphy). I’m going to book­mark this post!

John­Bil­lion, I like UC Berkeley’s and the professor’s blog, too. Johno, didn’t you have an inter­view lined up with Miguel? PLEASE ask him his source of inspir­a­tion if you do!

As a side note, I’m start­ing to really take notice of the typo­graphy around me, as I’m driv­ing, watch­ing TV, read­ing magazines… It’s get­ting up there with my design aware­ness! I think it’s mostly a result of read­ing iLT. Thanks, Johno :)

Not sure how I feel about #5 and #15. I know they have a dif­fer­ent feel to them, but…

Anyway, I always thought Sub­trac­tion was a good example.

I look for­ward to seeing the closer look. Might help me put a finger on what it says to me.

Lauren
That’s great to hear. Yes, the inter­view with Miguel is still on. How­ever, he has just relo­cated (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 over­all use of type; others were chosen because of minor details that were well atten­ded to. In the follow-​up, I’ll let you know why I chose 5 and 15. Thanks for input.

Alec
You must have been read­ing my mind. I’ve been writ­ing a post about Blue­print. Thanks for the sIFR links.

For those of you won­der­ing what sIFR is (Scal­able Inman Flash Replace­ment), then head on over to to Alec’s link to Mike Indus­tries.

Thank you for the Font­Shop men­tion, John!

I too like the lud.​icro.us logo. Can’t place it but it reminds me of Aqua­mar­ine. Here are a bunch of other swashy ‘L’s.

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

Thanks for the com­pli­ment, Johno. The font used for my L is called Splen­did and came free with some cheap DTP soft­ware I bought about eight years ago! Like Stephen said, it’s very sim­ilar to the L in Aqua­mar­ine.

Some really dis­tinct­ive look­ing sites here, sev­eral of which I hadn’t seen before. All of them are pretty darn good and cre­at­ive, though some of the more ornate ones argu­ably have some usab­il­ity issues.

I like that you picked a black & white site (the Rikcat one) because I think it shows a lot of char­ac­ter when some­body is con­fid­ent enough in their layout to avoid any colors what­so­ever.

Great list. And some new ones for me too!

Funny enough, when I was read­ing 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.

Chris
Yes, none of the examples is per­fect. I think the Rikcat design and others that resist all the hues of the rain­bow are brave designs. Colour, like so many ele­ments of design can cover a mul­ti­tude of sins.
How­ever, when your design is stand­ing in noth­ing but its pro­ver­bial under­pants, then you really need to have a clean pair. Actu­ally, I some­times reduce a full colour design to grey scale as part of the test­ing pro­cess; it’s sur­pris­ing how much this exper­i­ment reveals.

Hamish
Where’s that blush­ing smiley when I need it. Good to see you here again.

I noticed that on some sites they would use a serif font for the larger head­lines and other head­ing text, but when it came to the actual con­tent the type would switch to a sans-​serif. I have exper­i­mented with this before, and to me it looks more eleg­ant that way. What are some of your thoughts???

I did a sim­ilar post back in Feb­ru­ary, pick­ing 8 sites with great typo­graphy, but haven’t seen many of the sites on your list (start­ing from #7 and on, though I did recently dis­cover Design snips). I really look for­ward to your dis­sec­tion of those sites!

Just found your site from digg. Very nice col­lec­tion.

I would recom­mend http://​www.​web​design​er​wall.com to be in the list as well. The designer spent every little details on type layout, from header to footer.

Site number 2 actu­ally makes one hell of a mis­take: reli­ance on a font that won’t be installed on most machines out there (in that par­tic­u­lar case, hel­vetica neue). Sure, the css drops it down to hel­vetica, but in doing so it actu­ally upsets the layout of the page, and it doesn’t look any­where near so nice.

But hey, that’s maybe because i’m a geeky coder type who only fol­lows this site so I can under­stand what the hell the design­ers that I work with are talk­ing about ;)

A great col­lec­tion of not only fonts, but also examples of how even the reg­u­lar fonts can be used so beau­ti­fully.

I like the Coudal Part­ners site for their design emphasis on typo­graphy!

Great list! Thanks!

-Nate

Awe­some round-​up; some really great inspir­a­tion in there.

It does seem like you have a strong liking towards BIG type though … it does look hot.

Apo­lo­gies to every­one who has had dif­fi­culty access­ing the site. The Digg effect has taken its toll. Also the inim­it­able Mr Zeld­man men­tioned this art­icle, lead­ing to a traffic spike, the likes of which I’ve never encountered before.

I’m work­ing on upgrad­ing the server and improv­ing the cach­ing.

Thanks to every­one who shared and Dugg this art­icle; and apo­lo­gies again for the slug­gish­ness. I’m work­ing on it.

Very good choice and thanks to share this. Some of these examples are in this css show­case: Css Web­site , web­sites of my selec­tion ;)

Thanks again!

Your type is too small!!

Thank you a lot.
When you review those sites it would be inter­est­ing if you meas­ure the load­ing time, to put it to the per­spect­ive. Because it often easy to make a nice look­ing page, but if it takes forever to load it is a dif­fer­ent story.

Although my work is lesser known the above I would love to submit my site for typo­graphy use:

http://​www.​circa1979.com

Wow! Zeld­man likes you —- you’re one degree of sep­ar­a­tion from a deity! Con­grats on all the kudos and the digg.

Thanks every­one for your com­ments.

@Diane
the only prob­lem I see with your site is that the entire home page is an image (with image maps). Per­haps you could remake the page using HTML, real text and some CSS? Anyway, thank you for the com­ment and for the link.

@Alec
Looks like it’s time for me to buy one of those I Love Zeld­man or I’ve been Zeld­maned t-shirts ;)

This art­icle 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 strik­ing IMHO. Thanks for the art­icle and the inspir­a­tion.

Miguel Ripoll has just been fea­tured in an inter­view at the Com­mu­nic­a­tion Arts web­site: design​in​ter​act.​com/​i​n​s​ights/

Miguel Ripoll has just been fea­tured in an inter­view at the Com­mu­nic­a­tion Arts web­site: http://​www.​design​in​ter​act.​com/​i​n​s​ights/

Alex
Thanks for the link. I have an inter­view with Miguel lined-​up, to be pub­lished on ww.​red​sil.com

Lawsy
You’ve made a great start.

nice picks,
good job. it’s incred­ibly hard to do type on the web. i hear moz­illa is work­ing on hypena­tion? that would be nice. i really don’t want to have to use flash like shaun inman…

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, Verd­ana, Times, etc.) well.

I think it takes a lot more talent to create well-​designed lay­outs using pure CSS (no images), and the end result is more effect­ive, access­ible, and more in the spirit of the web.

Anyone have that list?

Cool list, thanks for fea­tur­ing design|snips!

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

Agreed with Andrew’s com­ment above - it seems that some of these sites are using flash / images to rep­res­ent the text. This def­in­itely makes it harder for search engines to crawl these sites.. Look­ing for­ward to your follow-​up to under­stand what CSS tricks can be used with basic text in order to accom­plish sim­ilar lay­outs. Com­ment by Robert H. Goret­sky of Hoboken, NJ.

@Robert H. Goret­sky - You’re wrong when you say most (all) of these sites are using Flash or images to rep­res­ent text and are there­fore not search engine friendly. Sev­eral (I’m def­in­itely not saying all) are using search engine friendly image replace­ment tech­niques, mean­ing they’re actu­ally very search engine friendly while still rep­res­ent­ing text with images.

The obvi­ous excep­tions are the 100%-Flash sites, which I can’t believe people still get away with build­ing.

@John­Bil­lion: I stand cor­rec­ted — When I posted the first com­ment, 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.. Look­ing for­ward to a deeper dive into how some of this works under­neath the hood.. Com­ment by Robert H. Goret­sky of Hoboken, NJ

All things are nice around here, its really a cool list of designs that has been fea­tured, thanks for the pre­view. I like it!

http://​www.​bestofpty.com

I think they’re all OK. Not tre­mend­ous, but decent, with a little too much flash­i­ness (and flash) for me.

No offense, but they’re all better than IYT’s own type treat­ment, which uses types com­pletely unsuited for the size they are used at, gra­tu­it­ous all-​caps for no real reason and a lot of odd little incon­sist­en­cies that I assume are meant to be styl­ish but really don’t add any­thing (i.e., the date treat­ment in the com­ments). Please don’t take that as an insult, because your con­tent more than makes up for it!

Joshua

I see you got the server run­ning prop­erly again!

Great art­icle, but like I said last night, http://​www.​our​type.de better be on the next list. You just can’t ignore the typo­graphy from that web­site.

Another great post, keep em comin’

I think that http://​www.​drag​net.se deserves a look to.

Cody
I’ll cer­tainly 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 Bring­hurst writ­ing under a pseud­onym, but even he uses all caps in bylines. No offence taken. Thanks for the con­struct­ive cri­ti­cism.

Really nice and ver­sat­ile (regard­ing the style) list. I like 04 most.

For me this

http://​www.​immo​varro.be/

ist fine too.

i loved that web­site it jumped out at you!!!!!i think this one web­site is so kool!!!!!!ya its spelled with a K!!!!!keep the site on here!!!!

Nice art­icle and great examples. I would add Coudal Part­ners to the list.
http://​coudal.com/

I love their site and typo­graphy!

Kate
did you add a link to your com­ment? If you did, it’s not show­ing up. Is that what you’re refer­ring to when you say it’s spelled with a k?

Chris
I’ll take a look at that site. Is it one of yours?

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

A 76pt thank you to every­one who read, shared and com­men­ted on this art­icle. You are an inspir­a­tion.

The second part of this art­icle is coming next week, when I’ll be taking a look under the pro­ver­bial bonnet—at CSS, grids and more. I look for­ward to seeing you all again then.

johno
iLT

My friend Komit­lak made some fonts and He want to share with others…
Here is a Link:
http://​designtricks.​blog​spot.​com/​2​0​0​7​/​0​9​/​f​r​e​e​-​f​o​n​t​s​-​m​a​d​e​-​b​y​-​k​o​m​i​t​l​a​k​.html

Another text-​designed web­site:
http://​urlslive.com/

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

Addopin­ion
That site is unusual in its choice of body text size:

font-size:x-small

I can barely read it.

Excel­lent art­icle :-) Many thanks indeed!
I’m just in the pro­cess of get­ting my two brands (and cor­res­pond­ing web­sites) up and run­ning, and will be care­fully choos­ing which font/s to use.

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

I would add Stock Exchange of Vis­ions to the list.
http://​www.​stock​ex​changeof​vi​sions.org

I love the site and its typo­graphy!

Jon and Ravvyb
Be sure to keep us updated on your pro­gress.

Mad
Thanks for your link and your kind words.

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

Great list. Keep up the good work.

I find the type on Shaun Inman’s site far too small to read. Anc it can’t be res­ized with the browser I have to use at work.

Isn’t the the web still 99% about read­ing stuff. And the moving thing dis­tracts me from — you guessed it — read­ing stuff. How can typo­graphy be good if you can’t read it?

Love this list and the entire Web site. Very inspir­ing. I teach design/picture edit­ing at Ohio University’s School of Visual Com­mu­nic­a­tion. Your site is a great resource for myself and the stu­dents — and helps me sat­isfy my own obses­sions with typo­graphy. Thanks a bunch and keep up the good work.

Cheers,
Julie

Very nice list of sites.

Does anyone know what font is being used for the head­ings on Design Can Change?

@mar­shall —- it might be Auto 3 Light: link to myfonts.com

@mar­shall: I sub­mit­ted this yes­ter­day, but it looks like the site ate my response. Anyhow, I think the font is Auto 3.

Thanks Alec! I like that font a lot.

Actu­ally one of my friends first read this art­icle and asked me to visit this page. This art­icle has very useful inform­a­tion, it will be help­ful for many.
It’s really amaz­ing to read this descrip­tion. Thank you so much for your help and for your efforts.

Thanks,
Alex
http://​www.​Noble​Help.org

I recently read that a reli­able way of using non-​system fonts for web sites will be imple­men­ted. I guess it was some­thing to do with CSS3, but can’t find any ref­er­ence. This should make the web much richer for dab hand typo­graph­ers and a lot more unsightly for web noobs.

David
You might be think­ing of WebKit. You can read a little more about it over at Typo­graph­ica, in their art­icle, “Embed­ded” Web Fonts Return. Uh-​oh.

There’s also some info re fonts in CSS3 over at W3C.

#4 looks like a myspace kid page rather than a professor’s. still awe­some though.

Nice list of sites, though I’m not sure what your cri­teria was in select­ing them. I think you missed the all too obvi­ous (recently-​redesigned) http://​www.​typo​graphy.com and our​type.be

These sites from premiere inde­pend­ent type design­ers really show­case their beau­ti­ful work and good typo­graphic web stand­ards in gen­eral.

As far as I under­stand good typo­graphy (inspired by typo­graph­ers like Tschich­old), the less fonts, the better; also, even three sizes might be enough. Typo­graphic excel­lence as an attrib­ute of web­sites that use 5 fonts and sizes that really “scream”? I don’t know.

Very good. Con­grat­u­la­tions! Very great list of sites.
Excelente! Saúde e paz! Peace.

http://www.tenmetal.com

Paul
I like your site, but the type is too small for my eyes. Hoe­fler Text/Times New Roman at that size is dif­fi­cult to read. Great port­fo­lio though.

thanks Johno,
I choose 11px just for addi­tional inform­a­tion, all the really import­ant text is in 12, 14 or 18px. In this case I traded legib­il­ity against struc­ture.

Some amaz­ing examples. I had never seen bearskin rug before, that is a really nice site.

All this talk of upload­ing any font you want to use in the future seems a bit of a shame to me. The restric­tions of web type for­cing people to be extra cre­at­ive is a good thing I think.

They are some really nice look­ing sites - I per­son­ally like zeld​man.com and sim​ple​bits.com (their pre­vi­ous design was better I feel).

Experienceis the most import­ant graphic magazine in italy, and works with typho­graphy making it smells. yes. they make fra­grance on paper making types smelling good. it’s great, don’t you tink?

great list, there are some very cool examples here, i spe­cially like #2 and #4

http://www.ff0000.com/ - JUST F***N AMAZ­ING!!!! graph­ics like http://​not​sosim​pleton.com/ with with inter­act­ive its ROCK!!!

Def­in­itely some great designs there - I per­son­ally like #9, simple and clean.

This “Jesús Rodríguez Velasco — blog of UC Berke­ley pro­fessor” have great design! This “SR28 — Simon Reyn­olds, web designer and illus­trator” is very nice.

Great list. And some new ones for me too! I noticed that on some sites they would use a serif font for the larger head­lines and other head­ing text, but when it came to the actual con­tent the type would switch to a sans-​serif.

Awe­some examples of typo­graphy in the Web 2.0 workd - #11 (bignoob) and #15 stick out in my mind the most.

Excel­lent site, good typo­graphy

http://​www.​a1new​me​dia.​co.uk

While a diverse array of fonts are excel­lent, its a shame if u want to use one thats dif­fer­ent you have to use an image, let them d/l, or use flash.

I sup­pose its the way things are going to be for a long time.

Great list, is there any way to use dif­fer­ent fonts in a web­site design without the need for the client machine to have that font installed? Apart from using the font in an image that is.

Marcus
sIFR is what you’re look­ing for.

How come that Coudal Part­ners site is not on your list? The site is clas­sics of web typo­graphy, not only in its cur­rent rein­carn­a­tion, but its pre­vi­ous ver­sions as well.

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

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 web­site.

Hi there,

Just came across your typo­graphy example, which has not only inspired me but given me a lot of ideas to help us draw on our design skills, espe­cially in our new devel­op­ment which enables us to provide an easy solu­tion to enable smal­ler cli­ents better func­tion­al­ity with good design. Please feel free to cri­tique our devel­op­ment, but please note our easy web design devel­op­ment can be adop­ted to any style Build a starter web site

Great list. I am copy this art­icle and pic­tures and paste on my page. Best regards

A great col­lec­tion of not only fonts, but also examples of how even the reg­u­lar fonts can be used so beau­ti­fully. Thanks for it.

Inter­est­ing.. I like that you picked a black & white site (the Rikcat one) because I think it shows a lot of char­ac­ter when some­body is con­fid­ent enough in their layout to avoid any colors what­so­ever.

Great list, I par­tic­u­larly like the fresh design used in 10 and 11.

Regards

Jon
JNK­Ser­vices

Thanks for very inter­est­ing art­icle. I really enjoyed read­ing all of your posts. It?s inter­est­ing to read ideas, and obser­va­tions from someone else?s point of view? makes you think more. So please keep up the great work.
All the best

Wow excel­lent list and all the sites look amaz­ing. Definately pop­ping that one in my book­marks.

Cheers

Excel­lent art­icle!
Thanks for shar­ing.
Regards

Looks very inter­est­ing.

wow, Great list….
thanks for shar­ing..

great list, there are some very cool examples here… thanks for shar­ing…

Very nice col­lec­tion. Give me an urge to start a new site!

Ser­i­ously - amaz­ing and beau­ti­ful col­lec­tion of sites! I was actu­ally sur­prised to see that I hadn’t seen most of these web­sites except A List Apart. I love that site.

Wow awe­some, great list, there are some very cool examples here… thanks for sharing…

Very good. Con­grat­u­la­tions! Very great list of sites.

Regards,
Super Mario Bro

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

I’d have to recom­mend the fol­low­ing:

http://​www.​bas​matitree.net/

and

http://​www.​thesu​per​est.com/

Excel­lent work. I like the Typo­graphy.

Really nice design inspir­a­tion, thanks a lot! By the way, YOUR web­site has great typo­graphy as well. Keep it up!

Nice examples! Really cool, just book­marked!

Wow, this site is simply gor­geous! I think I’ve learned a lot about typo­graphy by just look­ing at the fea­tured sites. Thank you!!

Fant­astic examples of Web Typo­graphy, #4 & #15 are just fantasic. Pure Art.

Excel­lent example of qual­ity typo­graphy.

Typo­graphy is util­ized more than ever at the moment, as a web developer myself its almost my com­panys stand­ard to create a typo­graphy logo for a poten­tial cus­tomer.

If they then request a spe­cific logo design we would then charge then addi­tional for a bespoke design.

Some great links to typo­graphy web­sites there. I think typefaces are fun­da­mental in the aes­thet­ics of any web­site, per­haps even more so than images.

Gotta say I love this site, great job.

Very good. Con­grat­u­la­tions! Very great list of sites.
Excelente! Saúde e paz! Peace.

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

As you seem to be a bit of an expert on fonts, i was won­der­ing if you could pos­sibly answer a ques­tion that has been bug­ging me for a while…

I was won­der­ing if you can attach fonts to your web­site, so you don’t have to keep to the stand­ard fonts that every­one else has?

It would be great if you could give me an answer.

Also, really help­ful web­site, nice and inform­at­ive, and look­ing for­ward to you dis­sect­ing these 15 sites. I have been design­ing for a web com­pany for just over a year now, and before that i just did a Graphic Design and Pho­to­graphy course and didn’t know alot. So i would say i was still pretty much a begin­ner, in com­par­ison to flash web­sites out there.

Thank you every­one

This whole site has great use of typo­graphy . Good job.

Very nice.
I find the type on Shaun Inman’s site far too small to read. Anc it can’t be res­ized with the browser I have to use at work.

Greagt typography-​site - I like clear lines and s web­site that is easy to nav­ig­ate - The Big Noob — developed by and for…noobs - is my per­sonal favor­ite… in my opin­ion there avery cus­tomer can see very fast what the site is about and how the nav­ig­a­tion goes. I will visit your site again - like it - Chris

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

Great post,
excel­lent selec­tion of typo­graphy web­sites, when design­ing a web­site as well as having a good layout and use of images, i think what really makes a web­site is the typo­graphy, just doing some­thing simple with it can make a big dif­fer­ence to any site.

i loved that web­site it jumped out at you!!!!!i think this one web­site is so kool!!!!!!ya its spelled with a K!!!!!keep the site on here!!!!

I’m going to put my head out there and say that effect­ive typo­graphy is one of the main cores when design­ing a good web­site. This is because it makes the site a lot more access­ible and easier to use. After all, web­sites are usu­ally about INFORM­A­TION and if that inform­a­tion is done in proper typo­graphy it’s com­mu­nic­ated much more effect­ively. I don’t know why many design­ers 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.