Type Righter

March 8, 2006 9:14 PM

The Elements of Typographic Style Applied to the Web. Robert Bringhurt's undisputed bible of typography until now has been limited to print design. This site, a work in progress, presents his principles one at a time, and explains how to follow them as a web designer using HTML and CSS.
posted by Robot Johnny (26 comments total)

I admire the ambition, but I don’t think it’s going to work. Bringhurst’s book is wonderful, but it’s about books: not posters, not stone inscriptions, not pamphlets, not calligraphy, and not web sites. It has such a good reputatation because it’s full of non-obvious wisdoms about book design,* and that’s not going to come out right on a website, no matter how skilled and well-intentioned the designer is.

For example, he says “I am excluding those principles which are not relevant to the Web”, but he’s using small caps, which just don’t fly on 2006-era monitors (and aren’t in the right form on most systems). Again, I admire the ambition, but I don’t think it’s the Right Thing. If he were doing a full adaptiation of the book to the web, it wouldn’t be enough like the book to warrant the name. As it is, it looks like it’s going to rely on Flash®, unidiomatic navigation, and stilted references.

I hope I’m wrong and it works. Even if it doesn’t, it should get more people to read the book.

* Also because it exemplifies everything it says and the prose is excellent.
posted by vruba at 10:25 PM on March 8, 2006

I <3 type. Also, I saw this somewhere else but can't recall what blog... damn! Thanks for the reminder tho.
posted by tweak at 10:50 PM on March 8, 2006

Thanks so much for this Robot Jonny! Although vruba has some points. I really question his use of serif typefaces on today's monitors...
posted by grouse at 12:26 AM on March 9, 2006

Also, I don't think it is clear enough that this is not Bringhurst's work, but his principles being applied. This is one case where I think the author's name needs to be much more prominent.
posted by grouse at 12:27 AM on March 9, 2006

The classic text is Dean Allen's short A List Apart article Reading Design. Read it.
posted by ryrivard at 2:20 AM on March 9, 2006

Surely it should be "The Elements of Verdana"?

god, I'm bored of that font.
posted by gwildar at 2:34 AM on March 9, 2006

I'd like the site more if they switched their body and heading fonts. Serifs just aren't as readable at small sizes on monitors.
posted by Civil_Disobedient at 3:54 AM on March 9, 2006

This info will be useful as I'm just beginning to comp some new web pages on the ol' Linotype machine.
posted by spock at 4:21 AM on March 9, 2006

If you have created static pages for your website then inserting <acronym> and <abbr> elements where appropriate might be slightly tedious but probably feasible. Dealing with text delivered by a content management system, however, is a different kettle of fish and would need some sort of automation. At this point your CMS developer would probably turn to regular expressions.

All that so you can insert 0.1 em extra space between characters. Mmmmkay.
posted by gimonca at 5:37 AM on March 9, 2006

While I think that the options for body text are adequate (if fairly limited), from a design perspective I think that the best option is to style your headlines. And the best way to do that with limitless font options (IMHO) is sIFR.
How and when to use sIFR, home page?, and blog of one of the developers (looking ahead to version 3).
posted by spock at 6:27 AM on March 9, 2006

spock: use sIFR and I'll never come back to your site. Asking "is sIFR better than a jpeg image for a headline?" is about as important a question as asking which testicle you'd rather have smashed with a hammer first---except that there's a fair chance of fixing a site that uses sIFR simply by using adblock.

To browser (or maybe operating system) developers: Make the text layout good by default. I know it's hard, but that's why God invented experts.

To everyone else: Just write text and non-presentational HTML (like ABBR, STRONG, OL, etc.) in your web pages. Thanks to the browser developers (should they heed my advice), it will look just fine. (A few exceptions I'd allow for: use HTML entities like mdash or special whitespace characters).

It's asinine that anyone would try to get proper kerning by putting two consecutive letters in their own SPAN with a special CSS rule. They payoff isn't worth the effort, especially since it will look bad when a viewer doesn't have the exact same font the page author did.
posted by jepler at 9:22 AM on March 9, 2006

I found this site very, very hard to read.
posted by xammerboy at 10:19 AM on March 9, 2006

If type matters this much to you, just publish everything as flash. If it means that much to you, then the user-hostile characteristics of flash as an information medium won't be so important.

Otherwise, and if what you really want to do is present information, then just do what jepler suggests and send the browser well-formed HTML. The cases for which that's not good enough are sufficiently exotic that 99.995% of users will never benefit from caring about them.
posted by lodurr at 10:27 AM on March 9, 2006

This site looks horrible. Maybe it's my own fault - i'm looking at it in IE, but frankly if these techniques look bad in IE then they're of no use to anyone, sorry Firefox supremicists.
posted by Artw at 10:28 AM on March 9, 2006

He knows a lot about type, but his HTML and Cross-Browser-Skills suck. The site is almost unuseable under IE.
posted by homodigitalis at 11:16 AM on March 9, 2006

Under firefox the layout is different, but I get some rubbish about "additional plugins requried to display all the media on this page".
posted by Artw at 11:28 AM on March 9, 2006

BTW, if anyones looking for a modern, sensible way of coding websites that is standards complient, supports nifty css and degrades gracefully I strongly recomend Zeldmans "Designing With Web Standards".
posted by Artw at 11:30 AM on March 9, 2006

ah... it turns out theres a flash movuie on the page, which I didn't have a player for, so that's the cause of the weird alert.

Can anyone see where this flash movie actually shows up on the page? Very weird.
posted by Artw at 11:32 AM on March 9, 2006

Ugh. And this is better than using a .gif how???
posted by Artw at 3:20 PM on March 9, 2006

Ugh. And this is better than using a .gif how???

Using sIFR saves you time, since you don't have to make the graphic files in advance. (This is more of an issue if you publish frequently; the guy who invented it used it for headlines as ESPN.com.) You can copy-and-paste the text, so it's more accessible than graphic files. It converts HTML headings to Flash, so the markup is more semantic than using images.

That's all besides the point, though, because the Typographic Style site isn't using sIFR. It's using this Flash movie for the site's tagline. I have no idea why. A GIF or PNG would be better.

Also, you should use PNG in place of GIF for legal reasons
PNGs have their advantages over GIFs, but that's not one of them. The GIF patents expired in 2003/2004.

posted by kirkaracha at 4:42 PM on March 9, 2006

PNG vs. GIF: For the sake of your clients, use GIF. PNG does not work properly in IE. There's a little-talked-of bug in IE's PNG support that causes it to fail to render PNGs under certain difficult to predict, but fairly common conditions.

I would love to use only PNG. PNG is a beautiful idea. But it's kind of a deal-breaker for me if there's a decent probability that the menu buttons will just stop rendering for the CEO of the client's prospective customer.

And: Could we possibly take a break from the SIFr stroke-fest evangelism? It's kind of creepy. So you all loves you some type and will expend more effort than is worthwhile to gets it. Bully for you. Just, you know, please keep it in private like decent folks.
posted by lodurr at 4:34 AM on March 10, 2006

I'm not sure how answering a question and correcting two misconceptions counts as evangelism, and there are more people more people bitching about sIFR than endorsing it, but whatever.
posted by kirkaracha at 6:53 AM on March 10, 2006

There's a little-talked-of bug in IE's PNG support that causes it to fail to render PNGs under certain difficult to predict, but fairly common conditions.

This can be fixed, but unless you absolutely need the transparency, or you're dealing with a very large image, use GIFs.
posted by Civil_Disobedient at 5:27 PM on March 10, 2006

There's a little-talked-of bug in IE's PNG support that causes it to fail to render PNGs under certain difficult to predict, but fairly common conditions.

This can be fixed, but unless you absolutely need the transparency, or you're dealing with a very large image, use GIFs.
posted by Civil_Disobedient at 7:04 PM on March 10, 2006

Dang, sorry 'bout the double.
posted by Civil_Disobedient at 7:04 PM on March 10, 2006

While the intentions are good, I just see a lot of the advice having much practical applications given the constraints of online publishing: coding, CMS's etc and the proliferation of viewing devices and formats. There's a whole new generation of web viewing devices and most of these techniques just won't work, not to mention a user's personal overiding of styles. At work I have a much bigger monitor so, surprise, I have changed they way a lot of sites render.
posted by synkro at 7:57 PM on March 10, 2006