I've heard of 'vertical rhythm' but 'baseline rhythm' sounds kinda funky.
I have been reading blog posts about implementing vertical rhythm in CSS for years but have never seen it implemented on any big sites. Why is that? Are people just putting it in the "not important, too hard" basket?
It's just a lot of work, and its a relatively new concept in the world of front-end development.
There's not a simple, widely accepted way to do it, so picking/coding an entirely new solution becomes a bit of a time-sink for something that a lot of teams don't consider a high priority (which it should be!)
At my studio, we've used a similar solution for some pretty massive, content-heavy sites. It ends up working pretty well if all your front-end devs are on board.
Those sites are:
Same here. Both our landing pages and the app make use of baseline rhythm—you can hit
^Gto peek the grid.
It’s a concept that works very well if all designers and front-end engineers are onboard. Development-wise (as outlined in the post), a proper implementation might be tricky, but having done it right surely pays off later on. In our case, new screens get coded faster with fewer inconsistencies between the design and what appears in the browser.
Personally, I like this design treatment, because it makes my decision-making process easier. When I move elements in Sketch, I often have 2 choices to pick from—instead of 12 or more.
Everything you've outlined there is the perfect reason to use a baseline grid. Saves so much time with spacing etc and communication between dev/design is so much easier.
Nice to see more examples in the wild! (debug works great)
Glad I could help!