HACKER Q&A
📣 robenkleene

Why hasn't a vertical rhythm CSS reset caught on?


I submitted a link a couple of days ago of a CSS reset that positions your plain HTML elements onto a vertical grid (https://jhildenbiddle.github.io/vertical-rhythm-reset/), to create a vertical rhythm. Here's a link about how vertical rhythm works in general (https://zellwk.com/blog/why-vertical-rhythms/). (I'm not affiliated with either of these links in any way, I just like the concept.)

Implementing vertical rhythm with a CSS reset seems to me like an obviously correct thing to do. To give your raw textual HTML building block of paragraphs, headers, and lists a consistent spacing strategy. But the concept hasn't caught on, why not?

Vertical rhythm appeared on my radar around the same time as the general concept of graphic design grids (https://en.wikipedia.org/wiki/Grid_%28graphic_design%29) which have entirely taken over the in digital-product design. Why aren't vertical grids based on the line height more popular? Or are they popular and just not implemented with a CSS reset?


  👤 Lorenz-Kraft Accepted Answer ✓
I'm also using this as a base for my layouts and grids got obsolete since then.

As far as i see it, devs do not bother about these graphic details and just use what aligns more with what they get (from the design apartment) => avoiding mental switches for a "unusual" (aka graphic) area, because most often, a dev does not want to have a discussion with a graphic designer about "HOW" its best to implement graphic orientation (Grids vs Vertical Rhythm).

Nevertheless, i just see one major flaw with vertical rhythms: Line Height for Headlines (if they are multilines).

So for example: Base Font Size: 18px Line Height: 28px

Headline: 28px with 28px Line height? Looks packed. Using Lineheight 56px => Way to spacy. Using a 1/2 or 1/4 factor of the line height mostly aligns with graphic pleasing appearance, BUT THEN you will lose the vertical rhythm in some cases (1 row headline => off, 2 row headline => on, 3 row headline => off ... you get the schema).

For any further questions: Please feel to ask.


👤 blcarson
No idea, it makes total sense to me. Will definitely be trying this out on my next project.