A framework for creating a predictable & harmonious spacing system

A framework for creating a predictable & harmonious spacing system

Type (line-height) is the first piece of the spacing system puzzle.

[…]

I then paired my base body font-size of 13px with even line-height values between 16px and 24px. At first, I paired it with 18px (a multiple of 6). If it had worked, it would have meant I was adopting a 6-point baseline grid aka multiples / factors of 6 spacing (aka spacing values like 2,3,6,12,18,24..). Then, I tried out 20px line-height. It worked perfectly well and that’s how it was clear to me that I was adopting the 4-point baseline grid aka multiples / factors of 4 spacing (aka spacing values like 2,4,8,12,16,20..).

[…]