It’s unfortunate that “art” and “science” are often viewed as opposite ends of a spectrum, as if they were diametrically opposed things.

It leads to thinking like this:

I’m an engineer, not a designer — so I can’t make pretty UIs.

But here’s the thing, design (art) and engineering (science) aren’t orthogonal. They overlap. There’s a lot of science in art.

Art, and by extension design, fundamentally relies on how our eyes perceive objects in space. And that’s governed by physics.

Physics has laws.

Teaching the underlying laws that govern perspective, lighting and shadow is how college art courses consistently take people from drawing stick figures to rendering photorealistic images of basic shapes (spheres, cubes, cones etc) in about a week.

Design is no different.

You can produce decent designs by learning the underlying laws that govern what our eyes perceive as ‘good design’ and just obeying them.

You won’t reach greatness this way. Great designers break the laws all the time. But you don’t need to be great, decent is plenty good enough.

The simple trick

It’s easy. Just obey the most fundamental law of ‘good design’:

Use a grid. Then, align everything to it (including whitespace).

Humans love symmetry. Grids create symmetry. Obeying this law will instantly make the things your designs look ~10x better.

So, CSS grid all the things?

No, we’re not talking about columnar layouts with CSS grid here.

We’re talking about aligning everything: whitespace, typography, images etc to an implicit grid by using consistent spacing (margin, padding) and sizing (width, height) that are all cleanly divisible by a common base unit.

Using space and size values that are all divisible by a common base unit ensures that everything in our UI cleanly fits within a block of implicit grid cells. And our eyes love this.

This is especially important for making typography look good. And, this is often overlooked — aligning blocks of text to to a grid isn’t intuitive.

Creating an implicit grid

Let’s create an implicit grid, and start aligning things to it.

Grids are made of square cells

Screens are rectangular, but render images via square pixels. Thus it makes sense to construct grids using square cells.

But, what size squares?

Technically you can use any size grid cell you want. But, 4x4 px is a really good default choice.

Most screen resolutions are cleanly divisible by 4 — which avoids potential rendering issues with fractional pixels. And, 4px is bit of a goldilocks — it’s big enough to be noticeable and small enough to make little adjustments.

Aligning whitespace

Aligning whitespace to a grid makes a design feel good because it introduces a sense of consistency and rhythm to the design.

Doing this is pretty easy too.

First, need a handful of t-shirt sizes for whitespace, that are all cleanly divisible by our base unit (4px). Then, we just use them everywhere — for margin, padding, gap etc. This ensures that chunks of whitespace fit cleanly into blocks of grid cells.

In CSS, it’s useful to use rem as the spacing unit since it scales based on the user’s font size preferences. Most browsers set a default font size is 16px, thus 0.25rem == 4px.

Here’s an example:

:root {
   font-size: 16px;
   --xs-space: 0.5rem; /* 8px */
   --sm-space: 0.75rem; /* 12px */
   --md-space: 1rem; /* 16px */
   --lg-space: 1.5rem; /* 24px */
   --xl-space: 2rem; /* 32px */
}

Aligning containers

To align containers to our grid, we need their height and width (in px) to be cleanly divisible by 4 (e.g. 12, 16, 32, 64 etc).

Since our whitespace values (margins, padding etc) are also divisible by 4, things work just out. We wind up summing multiples of 4 together, which creates another multiple of 4. Thus when we add padding and/or margin to a container’s height or width, our container will still cleanly fit within a block of grid cells.

Let’s create an example using a card component:

:root  {
   --xs-max-container-width: 400px; /* divisible by 4 */
}

.card {
   max-width: var(--xs-max-container-width);
   margin: var(--md-space); /* 16px */
   padding: var(--md-space); /* 16px */
   border-radius: 4px; /* Also divisible by 4 */
   background-color: #222;
}

<div class="card">
   <span>Hello I'm a card.</span>
</div>

It looks like this:

Note how all the values are cleanly divisible by 4. Setting the margin and padding to equal each other isn’t required, but it creates a pleasing visual symmetry.

Aligning text

Aligning blocks of text to a grid makes your design feel good, but it’s something that’s often overlooked by “non-designers”. TL;DR:

1. font-size corresponds to the height of a single line of text.
2. nLines * font-size * line-height corresponds to the height of a block of text.

Thus, to align blocks of text to our grid, we need to ensure that font-size (in px) * line-height is a multiple of our base unit (4 in our case).

If we do this, our typography will automagically look pretty nice. And, this is easy to do in practice.

Example:

:root {
   font-size: 16px;

   --xs-text: 0.5rem; /* 8px */
   --sm-text: 0.75rem; /* 12px */
   --md-text: 1rem; /* 16px */
   --lg-text: 1.5rem; /* 24px */
   --xl-text: 2rem; /* 32px */
   --2xl-text: 3rem; /* 48px */
   --3xl-text: 3.5rem; /* 56px */
   }

   h1 {
      font-size: var(--2xl-text) /* 48px */;
      line-height: 1.25; 
      /* 48px * 1.25 = 60px, which is divisible by 4 */
   }

   h2 {
      font-size: var(--xl-text) /* 32px */;
      line-height: 1.25;
      /* 32px * 1.25 = 40px, which is divisible by 4 */
   }

   h3 {
      font-size: var(--lg-text) /* 24px */;
      line-height: 1.25;
      /* 24px * 1.25 = 30px, which is divisible by 4 */
   }

   p {
      font-size: var(--md-text) /* 16px */;
      line-height: 1.5;
      /* 16px * 1.5 = 24px, which is divisible by 4 */
   }

<h1>I'm aligned!</h1>
<h2>Me too! I'm aligned.</h2>
<h3>Ditto!</h3>
<p>Text that is aligned to the grid will look 'nice' to our eyes, as it creates consistency and rhythm in our design</p>
<p>And our eyes like that.</p>

Aligning elements in a container

Aligning elements in a flex (or grid) container has gotten a lot easier now that we have the gap property in CSS.

This allows us to turn margins ‘off’ of elements in our container and just use gap to space everything evenly in clean multiples of our base unit (4px).

Let’s see an example.

:root {
   font-size: 16px;

   --xs-space: 0.5rem; /* 8px */
   --sm-space: 0.75rem; /* 12px */
   --md-space: 1rem; /* 16px */
   --lg-space: 1.5rem; /* 24px */
   --xl-space: 2rem; /* 32px */

   --xs-text: 0.5rem; /* 8px */
   --sm-text: 0.75rem; /* 12px */
   --md-text: 1rem; /* 16px */
   --lg-text: 1.5rem; /* 24px */
   --xl-text: 2rem; /* 32px */
   --2xl-text: 3rem; /* 48px */
   --3xl-text: 3.5rem; /* 56px */
}

.landing-page {

   margin: var(--md-space);
   padding: var(--lg-space);
   gap: var(--md-space);
   display: flex;
   flex-direction: column;
   text-wrap: balance;

   h2 {
      margin: 0;
      font-size: var(--xl-text);
      line-height: 1.25;
   }

   .button-group {
      display: flex;
      margin: var(--md-space) 0 0 0;
      gap: var(--md-space);

      button {
         background: var(--primary-color);
         color: #fff;
         border: none;
         padding: var(--xs-space) var(--md-space);
         border-radius: var(--md-space);
      }
   }

}

<div class="landing-page">
   <h1>Get this awesome SaaS product</h1>
   <p>This is the greatest Saas product that there ever was. Buy it and get 10x better results.</p>

   <div class="button-group">
      <button>Get it</button>
      <button>Learn more</button>
   </div>
</div>

Wrapping up

Finally, you don’t need to build the grid yourself. You can. It’s gotten a lot easier with CSS variables, flexbox and grid. But, you don’t have to.

Most off the shelf design systems already provide CSS variables that are based off of an atomic grid unit for you out of the box. You just need to use them appropriately and pay special attention to how font-size and line-height interact.