2020.destroytoday.com

Line-height

While I’m tweaking typography, I figured I’d take the opportunity to further improve readability with more vertically-spaced type. Prior to adding a max-width, I didn’t immediately recognize the sub-par leading because there was so much else “wrong” with the readability, but as soon as I capped the width of the paragraphs, the tight leading stood out like a sore thumb.

By default, line-height is set to normal, which is roughly 1.2. This gives a 16px font a line-height of ~19.2—pretty tight for body copy. Before doing any research, like I did with the max-width, I tried increasing the line-height a tenth until it felt right, which was 1.5. This felt spacious enough, and resulted in a 24px line-height, which satisfies my bias towards base-8 numbers.

To back up my intuition, I did a quick search, and found that the answers vary, but typically land between 1.3 to 1.5. I also asked my studio mate, Frank, who specializes in type. He said, “It looks like you’re happy with 1.5, so go with that.” Forever wise, that Frank. The change meant updating single value, but the result makes the world of difference. Slowly but surely, the site is starting to look real.