1

I've been playing around with design grids, and have liked the consistency of baseline grid systems where all the baselines and elements land on the baseline grid. This is easy to implement for me, since I just move elements onto the grid.

I also like the spacing consistency of an 8pt grid that uses multiples of 8 to space elements and determine line heights/font sizes.

However, I'm stuck on how these two work together. I know they're closely related, but I don't know how to make them work. Here are some picture examples:

Baseline grid overview

Here is a photo where I have two text elements on an 8pt grid. The font sizes and line height are divisible by 8, and the baseline lands on the grid. Perfect, right? Here's what confuses me. The space between the two text elements is not divisible by 8.

Spacing between two text elements

According to the 8pt grid system, shouldn't this spacing be divisible by 8? What am I missing here?

Improve this question
0

1 Answer 1

Reset to default
2

That's because the size of a typeface goes from above the top of the ascender to below the bottom of the descender. By matching the baseline of the letter to the grid, when measuring you are omitting the distance between ascenders and descenders.

enter image description here

In other words, if you want to obtain a separation distance between paragraphs that is a multiple of 8, you must make the body of the letter coincide with the grid, not the baseline:

enter image description here

Improve this answer
1
  • 1
    well, I finally understood. While I knew this was the answer, ascenders and descenders usually are shorter and there's still a space. Never considered the pipe delimiter!
    – Devin
    Commented Aug 20, 2023 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.