Comments on: Non-sucky web typography

Non-sucky web typography

signal — Thu, 08 May 2008 18:46:00 -0800

15 Great Examples of Web Typography. Because 95% of web design is about typography in the first place.

By: liquorice

liquorice — Thu, 08 May 2008 18:52:49 -0800

I'm salivating.

By: Fuzzy Skinner

Fuzzy Skinner — Thu, 08 May 2008 18:59:20 -0800

Awesome

Thank you, signal, for a truly great post.

Inspiring

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

By: delmoi

delmoi — Thu, 08 May 2008 19:19:02 -0800

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.

By: yhbc

yhbc — Thu, 08 May 2008 19:19:55 -0800

Couldn't they have shortened the process by just saying "here's the 15 websites we found that use seriphs"?

By: sonic meat machine

sonic meat machine — Thu, 08 May 2008 19:21:59 -0800

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.

By: yhbc

yhbc — Thu, 08 May 2008 19:22:23 -0800

Did you mean: serif

By: billyfleetwood

billyfleetwood — Thu, 08 May 2008 19:34:42 -0800

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

By: tangerine

tangerine — Thu, 08 May 2008 19:37:55 -0800

Did you mean: serif Or how about seraphim?

By: signal

signal — Thu, 08 May 2008 19:40:13 -0800

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.

By: dobbs

dobbs — Thu, 08 May 2008 20:15:16 -0800

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!

By: Null Pointer and the Exceptions

Null Pointer and the Exceptions — Thu, 08 May 2008 20:19:35 -0800

It's all abstract ascii art to me.

By: Memo

Memo — Thu, 08 May 2008 20:20:51 -0800

The last 5% is lolcats.

By: blacklite

blacklite — Thu, 08 May 2008 20:23:07 -0800

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.

By: billyfleetwood

billyfleetwood — Thu, 08 May 2008 20:48:36 -0800

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.

By: aqhong

aqhong — Thu, 08 May 2008 20:51:46 -0800

Part one.

By: brundlefly

brundlefly — Thu, 08 May 2008 20:56:27 -0800

Great stuff. I particularly like the Seed Conference site.

By: blue_beetle

blue_beetle — Thu, 08 May 2008 21:15:26 -0800

Typography and Metafilter. Don't you see what you've done? YOU FOOL!!!!!

By: loiseau

loiseau — Thu, 08 May 2008 21:22:26 -0800

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.

By: flapjax at midnite

flapjax at midnite — Thu, 08 May 2008 21:49:54 -0800

Have to agree with loiseau's comment above. Yawn factor is high on these "Great" sites.

By: Eekacat

Eekacat — Thu, 08 May 2008 21:50:16 -0800

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.

By: Saxon Kane

Saxon Kane — Thu, 08 May 2008 21:52:17 -0800

Where's comic sans?

By: Brocktoon

Brocktoon — Thu, 08 May 2008 22:53:09 -0800

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.

By: -t

-t — Thu, 08 May 2008 23:14:12 -0800

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.

By: -t

-t — Thu, 08 May 2008 23:21:05 -0800

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.

By: -t

-t — Thu, 08 May 2008 23:23:07 -0800

P.S. God... I am a nerd.

By: aspo

aspo — Thu, 08 May 2008 23:39:59 -0800

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?

By: aqhong

aqhong — Fri, 09 May 2008 00:51:04 -0800

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.

By: jack_mo

jack_mo — Fri, 09 May 2008 00:56:09 -0800

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.

By: jack_mo

jack_mo — Fri, 09 May 2008 01:03:33 -0800

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

By: twistedonion

twistedonion — Fri, 09 May 2008 01:25:43 -0800

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.

By: msaleem

msaleem — Fri, 09 May 2008 01:53:52 -0800

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.

By: romanb

romanb — Fri, 09 May 2008 02:43:15 -0800

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?

By: leahwrenn

leahwrenn — Fri, 09 May 2008 05:09:18 -0800

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

By: twistedonion

twistedonion — Fri, 09 May 2008 05:21:18 -0800

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.

By: ardgedee

ardgedee — Fri, 09 May 2008 06:31:03 -0800

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

By: sonic meat machine

sonic meat machine — Fri, 09 May 2008 07:15:30 -0800

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.

By: jack_mo

jack_mo — Fri, 09 May 2008 08:16:00 -0800

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

By: signal

signal — Fri, 09 May 2008 08:26:19 -0800

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

By: sonic meat machine

sonic meat machine — Fri, 09 May 2008 08:29:02 -0800

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.

By: kirkaracha

kirkaracha — Fri, 09 May 2008 09:10:26 -0800

According to this contrast checker, MetaFilter doesn't meet the W3C accessibility guidelines for color contrast.

By: Viomeda

Viomeda — Fri, 09 May 2008 09:25:50 -0800

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.

By: caution live frogs

caution live frogs — Fri, 09 May 2008 10:45:54 -0800

That "95%" page froze the shit out of Firefox. Multiple times. On two different platforms. What the almighty hell?

By: caution live frogs

caution live frogs — Fri, 09 May 2008 11:29:45 -0800

Never mind, I think I figured it out: The other 5% is cross-browser testing.

By: fantabulous timewaster

fantabulous timewaster — Fri, 09 May 2008 12:48:16 -0800

I'd like to call attention to the elegant whitespace in this comment. Or bluespace, perhaps.

By: Civil_Disobedient

Civil_Disobedient — Fri, 09 May 2008 17:29:04 -0800

sp a c e s t r e t c h ed

By: quiet sam

quiet sam — Sat, 10 May 2008 00:14:37 -0800

These seem extremely plain. Not really making me too excited.

By: paulsc

paulsc — Sat, 10 May 2008 07:21:59 -0800

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.

By: Ogre Lawless

Ogre Lawless — Mon, 12 May 2008 13:01:40 -0800

Line height and kerning killed those sites for me.