A grid is like an underwear, you wear it but it’s not to be exposed.

Massimo Vignelli

The grid is one of the most essential tools in any designer’s toolbox. It ties the content together — providing rhythm and visual coherence. I’ll try to keep this one very beginner-friendly.

Grid From Typography

For this website, I’ll be using a method that I learned a long time ago: I’ll try to let the content itself shape the grid, not the other way around.

Iteration 1: Starting with the Baseline

I have set font sizes and line heights in the Type Scale Blues. The root font-size is 16px, and the corresponding line-height is 24px. Pretty usual. Let’s see that:

OK, now, for this kind of text to be actually readable, I’m aiming for every line to have somewhere between 55-75 characters. Let’s do 65:

A 24px line-height has already defined the horizontal grid, which will keep the vertical rhythm. Let’s make that visible:

Time to put up a vertical grid. Asking a few questions:

• How many columns? I don’t know, but let’s say that I’ll want to split it so I can have two boxes of content stacked vertically, or maybe three. I doubt that I’ll do four, it’ll be too small. In order to be able to split the content in 2 or 3 columns, I’ll need a minimum of 6-col grid, since it’s the smallest number divisible by both 2 and 3.
• Will it be centered? Although I find the current look interesting, yes, I’m going to center the content.
• What’s the gutter size going to be? Now, this is the key point of grid from typography. The baseline is 24px, so let’s set the gutters at 24px too.
• What about the column size? I’ll start with 24px too, and then add 24px on top of that. Keep adding until the total grid width comes close to the target line-length from earlier. Like this:

Now let me just adjust the size of the text-box to fit the grid nicely:

Iteration 2: Expanding the Grid

But wait, what if I wish to let the images break out of the text column? The width of 552px might be too small for some images to show detail. What if I wish to do 4 vertical boxes? Or 6? The content on this site isn’t purely textual.

Let’s turn those 6 columns into 12. No, that’s too wide. Well, for now, at least (1128px is perfectly fine for desktops). Time to subtract! Bring the columns down by 24px, and I’ve got something that feels right:

That’s it! Time to align the content and see how it goes:

Iteration 3: Fine-Tuning Spacing

Notice how the list items are too close together? And pulling them apart will make them too far away from each other? That’s totally fine, because I can split 24px/2 and get 12px — a more nuanced grid to work with, that won’t break anything. Maybe even better, I’ll split 24px/3 and get an 8px grid, which will still keep the existing vertical rhythm intact, giving me even more nuance for the content to work with.

If you’re a designer, you’ll know the 8px grid really well. It’s the most common grid to work with, so I feel comfortable where I am right now.

Here’s the content on its own, without the grid:

What about the mobile? Well, for now, I’m keeping everything in 1 column, and coding it mobile-first, so the grid will be used at larger viewport sizes only. When there’s a need for refinement, I’ll take a different approach.

Takeaways

• Setting the grid from typography has its advantages: when you set horizontal rhythm from the vertical one, spacing will be consistent in both directions, so if you size a square or a circle to a width of the columns, it’ll always get on the 24px baseline, as well.
• You can play with this further and split the base column unit, too. You may end up with something like 64px columns and 32px gutters (from 8), and it’ll still work.
• The grids are here to guide and help. Not to constrain. Breaking out from the grid is completely fine.

Ten days in — do I finally have a nice, minimal, functional website? Seems so. But still got a long way to go.