8-Point Grid: Vertical Rhythm
Elliot Dahl

8-Point Grid isn’t practical

The 8pt system works nicely in static mockups (ie. Photoshop or Sketch), but when you design in code, it isn’t practical. The baseline only works perfectly if you have 16px/1.5 or 12px/1.5 (font-size/line-height) body type. Depending on what font you are using, you can’t always use those numbers. For example, 15px/1.65 wouldn’t work perfectly. And even if you do use those numbers, any kinds of figures (video, image, table, etc) would just throw off your baseline.

I base my vertical spacing on leading and my horizontal spacing on gutter. Assuming leading is 1.65 and gutter is 2rem*, 1 v-spacing unit would be 1.65rem and 1 h-spacing unit would be 2rem.

Vertical spacing sizes would be:

Large — $leading x2 = 3.3rem
Medium (base) — $leading x1 = 1.65rem
Small — $leading x0.5 = 0.825rem

Horizontal spacing sizes would be:

Large — $gutter x2 = 4rem
Medium (base) — $gutter x1 = 2rem
Small — $gutter x0.5 = 1rem

(I usually have sizes defined from XXLarge to XXSmall)

Some common padding would be:

padding: 0.825rem 2rem; // Squish
padding: 1.65rem 2rem; // Base
padding: 3.3rem 2rem; // Stretch

Does my type always fall on the baseline? Nope, but it sure does look hella nice, regardless of what kinds of content I mix into the article body. I am creating repetitions with the leading and the gutter.

Lining up everything perfectly to the baseline is a pipe dream in web design, especially in a scalable design system. For personal projects though, I wouldn’t mind pushing for pixel perfect.

*Rem would refer to the body font-size that ranges from a min of 14px to a max of 18px, and it scales responsively so it could equal to 15.392px at some screen size