New Theme with Vertical Rhythm

I’ve spruced up the theme a little bit, and I’m trying a new-to-me concept: vertical rhythm. It’s like a 12-column layout but for up-and-down.

The idea is that you take your base font size × your line height (in my case, 16px × 1.5 = 24px), and that becomes your “baseline.” You now adjust everything else so that it lands vertically at a multiple of this baseline.

So, for example, my <h2> elements have a font size of 45px with a line height of 1.0666 to land on a 48px boundary.

Resources:

• I learned from Zell Liew’s introduction, Why is Vertical Rhythm an Important Typography Practice? and his follow-up piece that describes tweaking whitespace between associated elements, Were We Wrong About Vertical Rhythm All Along?.
• I went down the road of using ShevyJS as an input to my Theme UI theme, but I got bothered that some of its sizes ended up on half-baseline boundaries (like 36px). I ended up writing my font sizes, spaces, and margins by hand.
• I found more tips at the Typecast 4 Simple Steps to Vertical Rhythm, including more guidance on how to break the strict baseline (like combining 3 heading lines into 2 baseline multiples).
• The Modular Scale calculator shows you font sizes increasing at a variety of ratios. I picked 1.414: “Augmented Fourth / Diminished Fifth.”
• During development I frequently turned on Basehold.it, an automatic, CSS-based overlay that shows your chosen baseline repeated down the page.