The Elements of Typographic Style Applied to the Web (2005)

by tosh • 8 years ago

152 35 8 years ago

A classic! I studied the original book heavily when I got into web design, and fell in love with this website when it first came out. A must-read for anyone who cares about words on the web.

amluto• 8 years ago

I read the paper version while I wrote my thesis because learning about typography and making my thesis pretty was a great distraction from actually writing the thesis. It was a fantasy book with one major, glaring flaw. The book was printed with wide outer margins and very narrow inner margins. This may have satisfied some concept of design, but it made it very hard to read the letters closets to the middle of the book. It turns out that paperbacks need a certain amount of inner margin to compensate for the fact that they don’t open quite all the way.

I don’t know whether this was a typographic faux pas or a defect in my particular copy.

Isamu2• 8 years ago

I have the paperback, and that stood out as a glaring flaw to me also.

I had to compare it to my other paperbacks, which were all made with ample center margins to account for the stiff binding. But they didn't look nearly as nice although not due to the center margins.

In fairness, the author (Robert Bringhurst) probably didn't have final say over the paperback, at least as it was bound in final form. The binding is just too stiff for the form factor which is unusually narrow and tall for a paperback.

There are less stiff paperback bindings. Dover used to produce paperbacks with pages stitched into signatures, but that was a more expensive binding.

bordercases• 8 years ago

Robert Bringhurst didn't have final say

He could have taken the book to a different publisher!

sampl2• 8 years ago

I noticed this too!

In fairness, the author (Robert Bringhurst) probably didn't have final say over the paperback, at least as it was bound in final form.

I’m guessing he had a LOT of influence over the printing. The paper is extremely high quality, there’s red color type every so often, etc. If there’s any book where the author would control the printing, it’s this one.

I’m guessing he’s either optimizing for a mathematically or historically “correct” ratio over the reader experience, or we’re supposed to “break in” the book more before reading:

http://booksville.blogspot.com/2009/12/how-to-break-in-new-b...

klmr• 8 years ago

The book was printed with wide outer margins and very narrow inner margins.

The typical rule is to have the inner margins that are half as wide as the outer margins, so that the two inner margins, being adjacent, visually add up to the same space as one outer margin. This is complicated by the fact that the inside of the pages are folded and vanish in the binding. In a well typeset book, this is compensated for by adding a “binding correction” to the width of the inner margins. The result is very aesthetically pleasing. It sounds like with your edition the typesetting was done independent of the binding, and hence didn’t properly account for constraints.

kiriakasis• 8 years ago

also sometimes it happens that pages shift one down and inside and outside swap, it ends up orribly, if the OP had problem reading the letters close to the center this could be the reason.

mrybczyn• 8 years ago

Damn, I thought another post in https://typesetinthefuture.com/ was being linked.

Genius, that guy.

ukyrgf• 8 years ago

Bank Gothic! I remember using that font so much in the 90s when I was a kid trying to make super futuristic digital art. Then I joined a company that used Eurostile for everything, left there and swore to never use it again, and forgot Bank Gothic ever existed.

metalliqaz2• 8 years ago

Is that page supposed to impress me with superior typesetting? I'm no expert, I can admit that. But I find that page much less easy to read than a typical Google site, or Twitter, or Wikipedia.

For example, on the landing page the navigation links are on the bottom right, which requires a large eye/mouse movement from the "origin" (top left) where the title is.

discreditable• 8 years ago

The site is also pretty crappy on mobile too.

JoshMnem• 8 years ago

I only skimmed it, but it looks like the site itself was built in 2005.

kej• 8 years ago

It's also not clear what is a link and what isn't until you mouse over it. Even then, the word "Latest" is in the same typeface and weight as the links, but isn't clickable.

thechao• 8 years ago

This website taught me there are upper- and lower- case numbers.

http://theworldsgreatestbook.com/book-design-part-3/

metalliqaz2• 8 years ago

It doesn't say anything about upper case numbers. Just old style vs lining, and tabular vs proportional.

osteele• 8 years ago

I thought it was broken in my browser, because it looked like the content area was missing and I didn't see any links!

david_ar• 8 years ago

This is my attempt at applying the recommendations, but with an updated style:

https://texify.davidar.io/WebTypography/

crazysmoove• 8 years ago

Also good: Practical Typography (https://practicaltypography.com/) by Matthew Butterick

tome• 8 years ago

I first came across that author via his other book/site https://typographyforlawyers.com/

Froyoh• 8 years ago

Guarantee someone is gonna nit-pick and find a fault somewhere on that website that "violates" the style they're talking about.

snowwrestler• 8 years ago

You got downvoted, but currently the top-voted comment does exactly what you predicted.

https://news.ycombinator.com/item?id=16913397

soperj• 8 years ago

Honestly didn't know what to do when I arrived at this website. Couldn't scroll down, and didn't look like there were any links. Took a moment to figure it out.

harrylove• 8 years ago

From 2005. Also posted several times before. https://news.ycombinator.com/from?site=webtypography.net

dang• 8 years ago

Thanks, we'll add the year above.

chipotle_coyote• 8 years ago

As a lot of folks have noticed, this is from 2005; I think the complaints are mostly valid, but it's also interesting to see what's changed in web design in the intervening 13 years. (Type tended to be smaller than the norm now, "mobile-first" design simply wasn't a thing, etc.)

It's worth noting the project this site turned into: a book called Web Typography. It has its own subdomain at http://book.webtypography.net and it looks markedly more modern and responsive.

WovenTales2• 8 years ago

Seems good so far, but it's annoying that the author needlessly sniped at double-spaced sentences. He even admits that whitespace collapsing makes it a meaningless distinction, but rather than focus on the actual information of "if you really need them, here's the vaious Unicode spaces" he spends over half the section harping on something that winds up making no difference.

Theodores• 8 years ago

'white-space: pre' is what I learned there. Never knew such a thing could be possible. This means no need to do a 'nl2br' on the content if it contains no HTML, this is a common scenario, I am going to see if 'white-space: pre' just makes everything magically look okay.

WovenTales2• 8 years ago

The trick with that is that it also prevents wrapping except on new lines in the source. Looking at the potential values, I'd recommend pre-wrap instead, which at least allows avoiding horizontal scrolling, at the cost of requiring you to write the entire contents in a single line of markup. Annoyingly, it doesn't seem like there's a way to avoid multiple spaces being collapsed without also giving special meaning to keeping the source less than 120 characters (or whatever other measure) wide.

combatentropy• 8 years ago

The original book and its ilk are akin to programmer code style guides: whether to indent four spaces or two, put the brace on the same line as the if-statement or below it, etc. Just as a non-programmer is likely to stare at you, lost, that you would care about whether to use two spaces or four, so we are likely to look at professional typesetters when they wax philosophic about their preferences. But just like all those code preferences, these typographic tidbits have a subtle effect, making a printed page look more professional, elegant, easy on the eyes, etc.

As some have pointed out, however, you have to be careful when translating rules from page to screen. For example, Jakob Nielsen was probably right when he said you just leave links alone, let them be blue and underlined. Typophiles especially hate to underline words. They will go through all sorts of acrobatics to decorate links any other way (bottom borders that don't touch the descender thingies on the letters g and y and so forth) or even background images of a line. Thankfully Chrome at least as started to support underlines that by default cross under those descenders.

Typophiles also don't care for colored text much and will likely try to color their links black if they could get away with it. Colored text reminds them of children with crayons or their mother making a flyer. Serious type is understated, like a little black dress.

I myself am a typophile and come from a background in studying fonts and all that before I got into web design. I have slowly come around to be more like Jakob Nielsen, and I prefer those low-brow unstyled sites by professors and old open-source projects over most "designed" sites these days. But I still prefer a nice serif over sans-serif, and a max-width of about 50em, thank you.

contoraria• 8 years ago

Coloring is not the domain of typesetting, just as coloring, inking and, indeed, lettering in comics are different disciplines.

On another note, typographic layout is often concerned with long texts, take TeX for example, but that's not today's web.

I try to stay under 140 characters per paragraph to limit myself. Feels like Knuth optimizing page breaks.

Mikhail_Edoshin• 8 years ago

As a typofile I'd say we could prefix links with a symbol and then indicate them with color on hover :) What I'd police would be free-form links; links are good when it's a name or some other term ([Hermann Zapf], [Monotype]) not just [random words] that [happen] to be [a link to something]. Also, colored text is good when colors are sparse. Think of black with red accents.

The Elements of Typographic Style Applied to the Web (2005)

Related Stories