Hacker News new | past | comments | ask | show | jobs | submit login
The Elements of Typographic Style Applied to the Web (2005) (webtypography.net)
152 points by tosh on April 24, 2018 | hide | past | favorite | 35 comments



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.


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


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.


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.


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


> If there’s any book where the author would control the printing, it’s this one.

I agree. My point is that the final, bound form is probably not available for approval. The author sees and approves pages before they are bound. He probably did not have a bound paperback in his hands until the first print run. Only then could you judge how the choice of center margin did not work with the other choices.

He may have had approval over the method of paperback binding, but a number of variables are conspiring to make the final spine stiff enough that the pages kind of disappear into the binding. Some of those were the variables the author apparently approved - the paper choice, the page dimensions, the margins.

I will add that the layout really looks like a hardback layout. I think that was forefront in the author's mind.


The hardback theory makes sense


The book is versioned like a software product (I have versions 4.0 and 3 point something), so I’d be surprised if it was a binding error or the author didn’t have control.

I think you’re right that it’s about it being the correct ratio and is intended to be broken in. The copy I had as a design student certainly was.


> Robert Bringhurst didn't have final say

He could have taken the book to a different publisher!


The number of publishers interested in technical works on typesetting is pretty small.


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.


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.


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.


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.


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.


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

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


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


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

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


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


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


The site is also pretty crappy on mobile too.


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


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


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.


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.


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.


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

Genius, that guy.


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.


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


Thanks, we'll add the year above.


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.


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


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.


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


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

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




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: