The Elements of Typographic Style Applied to the Web Matt 14 Dec 2005

14 comments Latest by dmr

The Elements of Typographic Style Applied to the Web steps through the working principles of the classic book, explaining how to accomplish each one with techniques available in HTML and CSS.

For too long typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy. In years gone by this could have been put down to the technology, but now the web has caught up. The advent of much improved browsers, text rendering and high resolution screens, combine to negate technology as an excuse.

It’s being published one principle at a time by Richard Rutter. You can subscribe to an RSS feed to keep up to date.

14 comments so far (Jump to latest)

Paul 14 Dec 05

This is a excellent site (still new and content lite) with a long overlooked focus - typography.

In fact, the sites push towards ‘em’ based design is wonderful. For those of us who wish to control our own browser font sizing and have the site adjust accordingly, this is mana from heaven. I hate 10 point type on a 1280 x 1024 monitor.

I’ll be headed down this design path myself now thanks to these guys.

Coudal 14 Dec 05

Let’s not forget Strunk and White’s original Elements of Style here, if the writing isn’t clear, the typography can’t help.

Will 14 Dec 05

I’ll be interested to see how this pans out. The book remains a fantastic resource.

Dean 14 Dec 05

While the site’s topic/purpose is great, I find the navigation lacking/confusing.

And how about some bold text for subheads?

dmr 14 Dec 05

Uhhh, the web hasn’t caught up at all. Where’s font embedding????? Where’s multi-column text support? Where’s auto-hyphenation in justified text? This is basic stuff here; and no where in sight. IE7 might let us use 6 new typefaces; oh boy — yippie!

And layouts that stretch to fit a range of display sizes is way overrated. Let’s focus on good type; larger photos; straight-forward language; clear hierarchy. Stretchy layouts can’t be seriously considered as thoughtful design until CSS supports multi-columns that adjust dynamically. And just what’s the motivation to make a layout work the same on 640x480 and a 23” cinema display? Let’s just work within some constraints and move on. No one’s complaining about newspaper layouts, or books, or magazines; what’s all the web layout fuss about?

Seth 14 Dec 05

I can’t remember how many times I’ve told clients that text is NOT supposed to run across the ENTIRE page.

Ever fire a client because of that one? I have.

Ben 14 Dec 05

Good thing this isnt DMR’s blog. His would be called The “Elements of Pessimistic Style”.

dmr 14 Dec 05

Ben, ha! I’ve been writing an article on typography for a week or two and it’s mostly about finding inspiration off-line, why’s that? Because there’s so little in the way of good web typography, a choice between georgia and verdana is fairly limited, wouldn’t you say?


taken from the introduction of the site…
“typographic style and its accompanying attention to detail have been overlooked by website designers, particularly in body copy”
What details are we talking about here? Proper em and en dashes? Typographic quotes?

“but now the web has caught up”
Again, on what issues specifically?

I know some issues I would consider gains in design on the web, but they’re not typographic; nerdy stuff like proper box model rendering (including floats, margin/padding issues, etc).

Darrel 15 Dec 05

“Uhhh, the web hasn�t caught up at all. Where�s font embedding?????”

Came and went. Turns out most folks don’t care as much about specific fonts as we do. ;o)

“Where�s multi-column text support?”

I think the latest FF has it. But, again, that typically makes sense in print. Not so much on screen. Otherwise, there are various javascript solutions.

“Where�s auto-hyphenation in justified text?”

That would be nice. Especially the auto-wrapping of long URLs.

“And just what�s the motivation to make a layout work the same on 640x480 and a 23� cinema display?”

Because people are different. And hardware is different. And the web medium enables us to do it.

“Because there�s so little in the way of good web typography, a choice between georgia and verdana is fairly limited, wouldn�t you say?’

‘Good typography’ isn’t about having a crapload of fonts.

Darrel 15 Dec 05

“Let�s just work within some constraints and move on.”

“a choice between georgia and verdana is fairly limited, wouldn�t you say”

I’m confused…do you want constraints or not? ;o)

dmr 15 Dec 05

Darrel, come on! So, I guess web design and typography are just fine the way they are eh?


“Turns out most folks don�t care as much about specific fonts as we do. ;o)”

Certainly many folks are using image and flash text replacement techniques, right? We’re all using graphics that use type in them also. Let’s be reasonable.


“I think the latest FF has it. But, again, that typically makes sense in print. Not so much on screen. Otherwise, there are various javascript solutions.”
No multi-column support exists in web standards: CSS3 ain’t even close to ready. FF isn’t a standard and script shouldn’t be the answer. It’s dead easy to dump text into 4 columns in Illustrator or InDesign, CSS shouldn’t be any different. How does multi-columns of text not make sense on screen? You certainly don’t expect to run a single column of text across my cinema display do you? Surely that’s the place for 4 or 5 columns of 300px wide text. Is it not?

“�Good typography� isn�t about having a crapload of fonts.”

Most designers agree, a set of 20 or so will do them just fine; but wouldn’t it be nice to have choices other than Georgia and Verdana? Count how many times you see those faces used in print.


“Because people are different. And hardware is different. And the web medium enables us to do it.”

How does this apply to print? Information is different; books are different; yet the design of the printed page remains fairly unchanged over hundreds of years. I don’t buy that argument. Just because you can design for 640px AND 1920px wide doesn’t mean you should… that’s the constraint I’m talking about: layout and resolution constraints. The other issues I mentioned are much more important to make web tools on par with print tools.

Darrel 15 Dec 05

Certainly many folks are using image and flash text replacement techniques, right? We�re all using graphics that use type in them also. Let�s be reasonable.

DESIGNERS care about typefaces passionately. Most readers of said websites don’t.

That doesn’t mean we shouldn’t choose good typefaces. I just fine the current crop quite adequate for most body text needs.

It�s dead easy to dump text into 4 columns in Illustrator or InDesign, CSS shouldn�t be any different.

They are entirely different mediums.

How does multi-columns of text not make sense on screen?

Every implementation I’ve seen (EXCEPT for IHT) is a pain to use on screen. They typically make the columns longer than the browser viewport which adds to a lot of up and down scrolling.

Columns make a lot of sense when you need to sell ads in print and when you need to dump a LOT of text into an article.

You certainly don�t expect to run a single column of text across my cinema display do you?

No, I would either assume that you didn’t buy a giant monitor just so you could browser my site in a maximized browser window, or I’d add a max-width setting to make sure the line lengths aren’t too insanely long.

Most designers agree, a set of 20 or so will do them just fine; but wouldn�t it be nice to have choices other than Georgia and Verdana?

Yea, but I’m not loosing sleep over it either. Those are both good faces. ;o)

And there are other options, too.

Count how many times you see those faces used in print.

They weren’t designed for print.

How does this apply to print? Information is different; books are different; yet the design of the printed page remains fairly unchanged over hundreds of years.

I’m missing your point.

The other issues I mentioned are much more important to make web tools on par with print tools.

The web isn’t print. Accept that. Embrace that.

dmr 15 Dec 05

I’d argue that print is the foundation of design. The same core issues of designing a web page is the holds true to a print page or anything else.

Anyway, I’m tired of typing this nonsense. Design work awaits!

dmr 15 Dec 05

Let’s try that again, but with English:

The same core issues of designing a web page also holds true for a print page, or anything else.