
The Elements of Typographic Style Applied to the Web (2005) - tosh
http://webtypography.net/
======
amluto
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.

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

~~~
sampl
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...](http://booksville.blogspot.com/2009/12/how-to-break-in-new-
book.html?m=1)

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

~~~
sampl
The hardback theory makes sense

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

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

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

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

[http://theworldsgreatestbook.com/book-design-
part-3/](http://theworldsgreatestbook.com/book-design-part-3/)

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

------
crazysmoove
Also good: Practical Typography
([https://practicaltypography.com/](https://practicaltypography.com/)) by
Matthew Butterick

~~~
tome
I first came across that author via his other book/site
[https://typographyforlawyers.com/](https://typographyforlawyers.com/)

------
chipotle_coyote
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](http://book.webtypography.net) and it looks
markedly more modern and responsive.

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

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

------
mrybczyn
Damn, I thought another post in
[https://typesetinthefuture.com/](https://typesetinthefuture.com/) was being
linked.

Genius, that guy.

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

------
harrylove
From 2005. Also posted several times before.
[https://news.ycombinator.com/from?site=webtypography.net](https://news.ycombinator.com/from?site=webtypography.net)

~~~
dang
Thanks, we'll add the year above.

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

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

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

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

[https://news.ycombinator.com/item?id=16913397](https://news.ycombinator.com/item?id=16913397)

