Hacker News Reader

Comment by tomatsu | Hacker News Reader

I still think that vertical rhythm is snake oil.

Yes, it does look neater if you have a striped background and the lines of text align with that. However, you won't use a striped background. There is nothing else those lines of text align with unless you stick the text into multiple columns, which you probably won't do since it's annoying (zigzag scrolling) and pointless (there is no height limit on websites).

I think it's more important to pick distinct headline sizes which still look good when they wrap around. If they don't perfectly align with some imaginary stripe pattern which no one is imaging, then so be it.

View on HN

I agree. I bought the "Bible" Bringhurst's Elements of Typographic Style and while I found it very interesting, I wasn't that convinced it applied to the web.

Vertical rhythm, which is mentioned in the book, is mentioned because when you print on paper pages you want the lines to overlap on the front and back of the page (so they don't bleed through making it harder to read), and so when the one page right next to the other one aren't misaligned.

I don't really think those apply to the web so much.

That said, it's all too easy in CSS to end up with wonky padding/margin if you don't have a consistent rule about whether to apply it to the top or bottom and by how much. So it's possible to end up with headlines up against body text or big gaps before the first paragraph, etc. I think that's worth fixing.

> if you don't have a consistent rule about whether to apply it to the top or bottom and by how much.

I recommend to use only top margins and to apply them to every element which isn't the first child (`whatever:not(:first-child)`).

This way there is no extraneous spacing at the very top or very bottom, which means the only spacing around the content is the padding of the container.

It's the same idea as the "lobotomized owl" selector (`* + *`). It's just more explicit.

Eh, I've seen a few examples of pages with good vertical rhythm and it's pretty incredible. I think the key is (1) it obviously works with certain types of content better than others (articles, etc), and (2) rigidly adhering to the rhythm is literally impossible merely due to flexible images, so vertical rhythm is best applied as a guideline rather than a rule.

It would be great if you could share some examples!

Reply on news.ycombinator.com