Bringhurst's The Elements of Typography (for the web) | Hacker News Reader

Bringhurst's The Elements of Typography (for the web)

webtypography.net

93 pointsniels_olson10 comments

> This website has been designed with liquid layout to afford readers this control. Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as medium is that readers are able to adjust their reading environment to suit their own needs.

I'd only suggest doing this if you're using a responsive multi-column [1] layout. Just because my window happens to be full-screen doesn't mean I want to read lines that are 120 or more characters long.

[1] https://developer.mozilla.org/en/CSS3_Columns

As HN clearly shows :P.

I actually love HN's design aesthetically, but it just doesn't work in a large browser window (even with significant zoom). Maybe I'll steal some ideas from this book and just make a custom style sheet for it.

I actually did that because it was bothering me. https://github.com/ralphsaunders/hacked-news

I like that. You don't mind if I fork it, do you? You didn't include a license.

D'oh, sorry about that. I've just stuck the BSD 2-Clause license on there, so feel free to fork away :).

After resizing the browser window (tiling window manager...), the starting positions of paragraphs can move quite far. This makes it difficult for me to orientate myself in the text.

Also, one must pay attention to indicate new paragraphs that happen to fall between columns. Without indenting each paragraph, I'm not sure how to make those clear.

max-width also works here.

>Relinquishing such control makes some designers quake in their boots, but the beauty and advantage of the Web as medium is that readers are able to adjust their reading environment to suit their own needs.

I've seen idiotic users use tiny fonts when reading (far smaller that those that are used in books and newspapers when seen from a comparable distance AND with the far worse glyphs that a low dpi screen offers), and others expand their browsers so that they get like 200 characters in each line. They might even "prefer" it and swear by it. It doesn't mean it's better for them or objectively more readable.

One result of this is destroying their reading comprehension, their tolerance for longer texts, and eye fatigue.

Fluid layouts are particularly error prone, looking bad (too narrow or too wide) in all except a few configurations.

Calgo cult individual preferences should take the back seat. With the exception for accessibility for those who need it, designers should target a specific, easy to read font size, line spacing, line width and contrast.

All the parts about avoiding px units for width, line-height, etc. are somewhat outdated with modern browsers. The default is now to "zoom" the pixel dimensions as well.

It's also much more practical to just use pixels. With relative units, nested elements that adjust the font size will quickly destroy any rhythm you were going for, unless you deliberately write extra CSS rules accounting for every possible nesting, with a bunch of annoying math involved.

Furthermore, if you're styling a web application rather than a document, relative units are just not going to work out. Most UI elements are of fixed dimensions, with fluid areas being the exception. Within a rigid UI, defining your type in px units is a preferable approach.

The author's bracing style is like nails on a chalkboard.

Reply on news.ycombinator.com