Ask HN: Why hasn't a vertical rhythm CSS reset caught on? | Hacker News Reader

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

3 pointsrobenkleene3 comments

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?

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.

These are all great points.

The way I look at, there are three options:

1. Just take the browsers default spacing (no reset)

2. Use a CSS reset that sets everything to zero (then apply your own spacing later)

3. Use a vertical rhythm CSS reset

It seems to me that the vertical rhythm CSS reset is the best of these three options because it provides the nicest spacing for the least amount of work.

Specifically addressing your (very valid) concerns, the idea of doing this as a reset, is you can just use style with vertical rhythm when they work, and override them in the problematic areas. There doesn't seem to be much of a downside to me? But perhaps that's the answer to my original question: Given that in some areas it needs to be overridden, perhaps the upside of adding an extra step isn't enough?

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

Reply on news.ycombinator.com