Picky Style: Vertical Cadence & Line-height
Picky Style is my series of short articles about the rationale behind the little decisions I have to make to put a design together and provide a good user experience.
In my last Picky Style, I talked a bit about how I designed paragraph margins. This time, I want to talk about the other vertical text measure, line-height. On Evergreen’s website, I chose a vertical cadence of 15px. That means, in an ideal world, all elements would align at increments of fifteen pixels down the page. Why fifteen? To be quite honest, it’s a fairly arbitrary value. It seemed big enough to be significant, but small enough to be flexible. But that’s only the beginning.
The standard desktop text size is set at 18px, but that doesn’t particularly matter since the vertical height of text is attributed to its line-height. In this design, 15px would be too small. The lines would be smaller than the size of the text, and the ascenders and descenders (and possibly more) would overlap, which can get pretty ugly.
Double it at 30px? That makes things easy, but no, that line-height would now be too big. The space between the lines become too great, and the lines then get too far apart. With larger displays, this becomes even more uncomfortable to read as the length of lines of text increases.
So how do I maintain a 15px cadence if 15px is too small and 30px is too big? The inglorious answer is that I fudged a bit. I decided 25px is a good value. That’s 15 + (15 × 0.66̅). With this number, not every line ends up at a 15px increment, but at least every three lines does.
You might wonder: since I can fudge numbers, couldn’t I set any arbitrary number? After all, a 5px vertical cadence would be even more flexible than 15px. Likewise, a 1px line-height will align with the vertical cadence every 15 lines. You wouldn’t be wrong. But as with so many design decisions, this was the choice that I made and it works well enough most of the time. Over everything else, the text needs to read well. The lines should be appropriately spaced. If that means having to fudge line-height a bit, that’s fine with me.
Perhaps next time I’ll determine the optimal line-height for my text before I decide on a vertical cadence. That might make the cadence a little bit easier to work with. In any situation, though, you will have to make tough choices, if not with your common building blocks, at least around the edges. If those choices can be reconciled with the system, that makes it all the better!