Non-sucky web typography

May 8, 2008 6:46 PM

15 Great Examples of Web Typography. Because 95% of web design is about typography in the first place.
posted by signal (48 comments total)

I'm salivating.
posted by liquorice at 6:52 PM on May 8, 2008

Awesome

Thank you, signal, for a truly great post.

Inspiring

I have a lot of reading and a lot of work to do.

posted by Fuzzy Skinner at 6:59 PM on May 8, 2008 [1 favorite]

I'm getting sick of design. Those pages are all pretty, but nothing I haven't seen a million times before.

Plus 'lists' have become the one of the biggest 'traffic whoring' cliches out there these days.
posted by delmoi at 7:19 PM on May 8, 2008 [6 favorites]

Couldn't they have shortened the process by just saying "here's the 15 websites we found that use seriphs"?
posted by yhbc at 7:19 PM on May 8, 2008 [5 favorites]

The sad thing is that light-colored sans-serif fonts on a dark background are the best possible for reading on a monitor—and yet this combination is considered "bad design." Style over substance, as usual.
posted by sonic meat machine at 7:21 PM on May 8, 2008

Did you mean: serif
posted by yhbc at 7:22 PM on May 8, 2008

saying 95% of web design is about typography is like saying 95% of auto design is about the steering wheel.
posted by billyfleetwood at 7:34 PM on May 8, 2008 [1 favorite]

Did you mean: serif

Or how about seraphim?
posted by tangerine at 7:37 PM on May 8, 2008

saying 95% of web design is about typography is like saying 95% of auto design is about the steering wheel.

Unless you actually read the article.
posted by signal at 7:40 PM on May 8, 2008 [2 favorites]

I did a study in 2007 and found web design (and I looked at every site) to be 93% about typography so I'd recommend anyone reading the links to take it with a grain of salt as it it not based in reality!
posted by dobbs at 8:15 PM on May 8, 2008 [3 favorites]

It's all abstract ascii art to me.
posted by Null Pointer and the Exceptions at 8:19 PM on May 8, 2008

The last 5% is lolcats.
posted by Memo at 8:20 PM on May 8, 2008 [5 favorites]

I spent a ton of time reading Designing The News, which is completely great, and the huge bold header is really an excellent touch. (And the body type is sans-serif, by the way.)

The rest of this list really seems to be unexciting, though. And what the hell is it with list posts lately? Anyway, read dtn.
posted by blacklite at 8:23 PM on May 8, 2008

Unless you actually read the article.

I did read the article. I also read the followup article. And after reading both, that analogy stood before me like a shining beacon in pitch black night.

When driving a car, you are in constant contact with the steering wheel. It is your primary interface with the car. If your hands are not on the wheel...you are not driving. It's that fundamental to the entire driving experience, yet still not 95% of auto design.

Same goes for typography.
posted by billyfleetwood at 8:48 PM on May 8, 2008

Part one.
posted by aqhong at 8:51 PM on May 8, 2008 [1 favorite]

Great stuff. I particularly like the Seed Conference site.
posted by brundlefly at 8:56 PM on May 8, 2008 [1 favorite]

Typography and Metafilter. Don't you see what you've done? YOU FOOL!!!!!
posted by blue_beetle at 9:15 PM on May 8, 2008

So all I need to do to be included in a list like this is use Georgia in #000 and have a #FFF background, a 60pt header and a lot of whitespace.

Boring.

Anyway the fact that a lot of the featured sites are also design sites just makes me think this kind of list is about wanking all over each other. Yuck.
posted by loiseau at 9:22 PM on May 8, 2008

Have to agree with loiseau's comment above. Yawn factor is high on these "Great" sites.
posted by flapjax at midnite at 9:49 PM on May 8, 2008

I am sick of delmoi. Nothing I've not seen before, and the vapid comments are repeated a million times over.

Plus "delmoi" has become one of the biggest 'comment whoring' cliches out there.

Now if DU would comment we'd have the bifecta.
posted by Eekacat at 9:50 PM on May 8, 2008 [1 favorite]

Where's comic sans?
posted by Saxon Kane at 9:52 PM on May 8, 2008 [1 favorite]

This is cool, but right off the bat, when did reverse type become completely acceptable, especially when it comes to user interface? My old stand by is that if reverse type was easy to read, then newspapers would use it.
posted by Brocktoon at 10:53 PM on May 8, 2008

Brocktoon, newspapers would use considerable more ink for one, but the idea is kinda silly. There is additive (transmitted) and subtractive (reflective) color models. What works for one, light text on dark background for instance, would be pretty bad on the other.
posted by -t at 11:14 PM on May 8, 2008

Oh, I almost forgot. That Seed Conference page is pretty sweet, but what does it look like in IE6 on XP. Unfortunately, that albatross is going to be around a while.

It is exciting to finally see the day when in the (hopefully not so distant) future where browsers are mature enough to handle type well.
posted by -t at 11:21 PM on May 8, 2008

P.S. God... I am a nerd.
posted by -t at 11:23 PM on May 8, 2008

Designing the News, ok that's nice.... mmm, OmniTI, looks pretty good... Designr.it OH MY GOD KILL IT! KILL IT NOW! WHAT THE FUCK IS WITH THAT BACKGROUND! JESUS CHRIST WHAT THE FUCK!

That page is unreadable. That background combined with that font is just... ugh. Who the fuck thought that was worth an award?
posted by aspo at 11:39 PM on May 8, 2008

I spent a ton of time reading Designing The News, which is completely great...

Is that dude's beard for reals? It looks like it was drawn with the spray can in MS Paint.
posted by aqhong at 12:51 AM on May 9, 2008 [1 favorite]

sonic meat machine wrote: The sad thing is that light-colored sans-serif fonts on a dark background are the best possible for reading on a monitor—and yet this combination is considered "bad design." Style over substance, as usual.

Citation needed. Seriously, people trot this out all the time as an undeniable truth, but it strikes me, and my eyes, as completely made-up. Maybe it was true of older CRT monitors, or modern monitors with the brightness as high as it goes, but, for me, dark on light is much more readable than the reverse. A design like MetaFilter's (on the standard settings) will give me a blinding headache within half an hour.

This study suggests dark on light is the more readable, but I'm inclined to think that it varies from person to person. Scanning this lengthy thread on a web design/usability weblog, the commenters seem to be split 50/50 between light on dark-ists and dark on light-ists.
posted by jack_mo at 12:56 AM on May 9, 2008

Back on topic: that Seed Conference site really is lovely. I wonder if it'll usher in a fad for using Times New Roman? (Or is it part of an existing trend? I don't really keep up with this stuff anymore.)
posted by jack_mo at 1:03 AM on May 9, 2008

swings and round abouts isn't it. Everyone hated serif for the web at the start. Now it's all about the serifs. I'm lovin my slabs at the minute, maybe next year blackletter will make a comeback.

I would say (without reading the actual article) that both web and print design are 95% Typography. Then again, I'm biased, started my career as a typesetter.

The next big advance will be css3 support for embedded fonts. God help the web and readability then. Those who don't understand that web design is 95% typography will get it then.
posted by twistedonion at 1:25 AM on May 9, 2008

Smashing Magazine has an impressive collection of typographic posters , typography in motion and big typography that designers and enthusiast should check out.

Also noteworthy: Web Style Guide: Typography.
posted by msaleem at 1:53 AM on May 9, 2008 [2 favorites]

I'd like to suggest, based on hundreds of thousands of research papers that I have written and published very very science.. Maybe more important than light-on-dark or dark-on-light, is the contrast between text and background?
posted by romanb at 2:43 AM on May 9, 2008

How do these highly designed sites deal with users who don't use the font size they specify? I read a lot of sites with the font size increased considerably, and for many of them, the site design ends up looking like garbage. Do designers take this into account when designing pages?

(It's not that the sites can't implement the larger type size, but that the design elements stop making sense when the type is large. For example, here on the blue, the links to Metafilter, AskMetafilter, etc. that are in yellowish run into the yellowish band at the top of the page, making it harder to read those links. Not a big deal here, but similar problems mess up other sites considerably.)
posted by leahwrenn at 5:09 AM on May 9, 2008

It all depends how good the designer is leahwrenn. If you take mefi for example, Matt could probably make the top menu have a repeating background so if you increase your text size the menu background adjusts accordingly. Much like the way that the bottom links stay in the dark blue footer.

Realistically though you have to just design for a standard and hope the layout degrades "gracefully" as they say.
posted by twistedonion at 5:21 AM on May 9, 2008

> Oh, I almost forgot. That Seed Conference page is pretty sweet, but what does it look like in IE6 on XP.

IE 6's text rendering is patchy, but that's a function of its age. With that in mind the Seed Conference page looks better than you expected. Which shouldn't be a surprise, since IE 6's notoriety has more to do with how it positions, displays and scales objects, not how it draws text.
posted by ardgedee at 6:31 AM on May 9, 2008

jack_mo, I don't have a study to cite, but just a suggestion. The people who look at a computer monitor most steadily (for hours at a time) are programmers. Look at the way they generally set up their editors (myself included). Most of the time, where there is an option, programmers use a light-on-dark setup, to the point that even Microsoft IDEs now offer color schemes.

Metafilter is a bad example of light on dark. It's more of "light on medium," and that's why it's suboptimal for reading. I'd say that if you pulled the blue down to where the bottom bar is and changed the normal text to the color of bylines (but kept it the same size) then MeFi would be easier to read.
posted by sonic meat machine at 7:15 AM on May 9, 2008

jack_mo, I don't have a study to cite, but just a suggestion. The people who look at a computer monitor most steadily (for hours at a time) are programmers. Look at the way they generally set up their editors (myself included).

Couldn't that be a hangover from old monitors too, now done out of habit? I know a few programmers who opt for light on dark, in any case. And everyone I know who spends their working day writing words (or doing layout) rather than code, many of whom spend as much time looking at a screen as coders, works dark on light. That the two groups who probably spend most time staring at a screen generally opt for opposite colourschemes makes me wonder if a part of it is habit/tradition, or the way apps are traditionally designed for a given group. Like I said above, in the longest discussion of the issue I could find online the preference split was about 50/50 - it'd be interesting to know if that split was programmer vs. writer/designer.

Whatever, in the absence of studies to cite, I just find it odd that people always state as fact that light on dark is more readable when so many people report that the opposite is true. Perhaps I should email unpopular usability guru Jakob Nielsen and ask him to do a study.

(You're dead right about the contrast though: high contrast light on dark doesn't give me as much of a headache as MetaFilter-style.)
posted by jack_mo at 8:16 AM on May 9, 2008

Whatever, in the absence of studies to cite, I just find it odd that people always state as fact that light on dark is more readable when so many people report that the opposite is true.

My guess is that it's the same people who state the fact "serif for print, sans for screen".
posted by signal at 8:26 AM on May 9, 2008

Well, heh, I hate to say it, but many writers and designers are a little bit technically illiterate and don't even realize they have an option. How many people know about Word's "light on dark" visual option, for example? I'd also say programmers are less likely to be tradition-bound than this particular group. I know of writers, for example, who still use WordStar (for DOS!) and swear that it's better than anything created since—and who seem completely ignorant of the many editors which have WordStar emulation modes.
posted by sonic meat machine at 8:29 AM on May 9, 2008

According to this contrast checker, MetaFilter doesn't meet the W3C accessibility guidelines for color contrast.
posted by kirkaracha at 9:10 AM on May 9, 2008

delmoi: I'm getting sick of design. Those pages are all pretty, but nothing I haven't seen a million times before.

My sentiments exactly. All this "great design!" crap we keep seeing is pure masturbation; really great design is design you don't notice. That's the whole point. I like typography as much as the next guy, but only insofar as it serves a purpose.

Given how aloof the design junkies nowadays seem to be of ineluctable modality, it's becoming harder and harder to keep myself convinced that they're not really great typographers so much as in love with marketing. And the culture of marketing pisses me off.
posted by Viomeda at 9:25 AM on May 9, 2008 [2 favorites]

That "95%" page froze the shit out of Firefox. Multiple times. On two different platforms. What the almighty hell?
posted by caution live frogs at 10:45 AM on May 9, 2008

Never mind, I think I figured it out: The other 5% is cross-browser testing.
posted by caution live frogs at 11:29 AM on May 9, 2008 [1 favorite]

I'd like to call attention
to the elegant whitespace
in this comment.

Or bluespace, perhaps.

posted by fantabulous timewaster at 12:48 PM on May 9, 2008 [1 favorite]

sp a  c   e    s    t    r   e   t  c  h ed
posted by Civil_Disobedient at 5:29 PM on May 9, 2008

These seem extremely plain. Not really making me too excited.
posted by quiet sam at 12:14 AM on May 10, 2008

I've been reading this same impassioned crap since dsiegel (who started a tulip mania in 1 pixel transparent .gif files) started spouting it in 1997.

All the sites on that list look silly in lynx. And even sillier in Firefox, on a 22 inch wide screen , with the default background set to gainsboro. To say nothing of being unreadable, and most unaccessible, on a WAP device.

I've thought about this, all I'm going to: typographers that refuse their medications shouldn't have Web access.
posted by paulsc at 7:21 AM on May 10, 2008

Line height and kerning killed those sites for me.
posted by Ogre Lawless at 1:01 PM on May 12, 2008