For those who haven’t come across it already, earlier this year I made a fairly complete summary of my approach to designing online with a grid, presented in conjunction with Mark Boulton at the South by Southwest Interactive Festival in Austin, Texas. There’s one crucial idea buried in that slide show, though, that I felt was important enough to pull out into its own blog post, if only so that I can have a URL to which I can point people when I’m explaining it. Here it is…
Ain’t Grid Behavin’
In print, grids are fairly static, and it’s fairly straightforward to make decisions on how to use them based primarily on aesthetic concerns. As a result, most traditional grid practitioners will line up elements right on the grid lines, like so.
Notice how the letter “G” aligns nicely to the left edge of the area, and with the thick rule above. Like I said, that’s aesthetically unimpeachable and pleasing, in part because its tight left-alignment emphatically reinforces the grid.
In digital media, though, we must, as always, make some compromises for the added factor of the way elements behave. Which is to say that, unlike the printed page, the components of a design — photos, illustrations, shapes, flourishes and type — can transform, change state, move, transform etc.
This makes working with grids just a little more nuanced than simply lining things up. Put simply, what it means is that rather than fully left-aligning an element with the grid, some padding is required so that the element is nudged away from the grid-line a little. Note in the example below how the text has shifted a minor amount to the right. Most people wouldn’t notice it, but it’s a significant change to those who look for it.
If you just blindly follow that advice — inset all your text a little bit from the grid line — from here on out, you can stop reading right here and rest assured that you’re benefitting from the majority of my wisdom on this relatively minor matter. But as with all design, the devil is in the details, and knowing why can be helpful. For those so disposed, here’s some further elaboration.
A Menu of Delightful Delicacies
Consider this simple layout, where the elements line up on the grid lines (shown in light blue). Everything looks orderly.
Things get a little tricky, though, when behavior is added to the mix. Suppose we incorporate some rudimentary interactivity into this layout, making certain elements clickable. Right away, it requires some elements to be inset from the grid lines a bit. If we didn’t nudge “Tacos,” “Lasagna” and “French Fries” over just a bit, their left edges would abut the highlight boxes, which is visually unpleasant.
Following that logic a bit further, suppose that the highlights don’t appear until the user rolls over the element, so that the off-state is virtually identical from non-clickable items. (This is horrible usability practice, for sure, but let’s just go along with it for the sake of argument.) What results is alignment that seems off, or inconsistent.
This is an essentially undesirable effect because it begins to subvert the purpose of using a grid altogether: providing a consistent logic for the placement of elements in a layout. When the placement of individual elements begins to shift based on unapparent or hidden behaviors, the layout can seem unreliable, unpredictable or less than professional.
So if we assume some minimal amount of inset on all elements, it will produce a visual uniformity in the spacing, which immediately makes the grid seem reliable again. Here I’ve tinted back the highlighting a bit so that that spacing uniformity can be more easily perceived between clickable and non-clickable elements. Note that the instructional text at the bottom has also been inset just a bit, to left-align with “Grilled Cheese” and “Lasagna.”
For most grid-based designs, of course, you’d probably be able to get away with insetting and not insetting elements on an ad hoc basis, making minor adjustments like these as necessary. To some extent, that’s even what we do at NYTimes.com (though it was a practice established before I got there).
When I can, I try to practice what I preach though. One day we’ll overhaul our grid usage at NYTimes.com, and I’ll put these ideas into place. Until then, if you look carefully at Subtraction.com, you’ll see that all elements are in fact inset, and that none of them align flush with the grid line. (Take a closer look at this page to see the grid superimposed on the layout.)
This practice probably exhibits an unhealthy focus on minutiae, I’m sure. Obsessive compulsive disorder aside, attention to details matter in most meaningful design. The way I see it, there are two levels of benefits to grid usage: the first is the superficial imparting of order, in which a grid helps the entirety of a layout fall together with enhanced cohesion. You use a grid when you want things to look tidy.
For me, though, I prefer the second, more subtle level, in which the grid is a crucial tool in a larger order. The grid helps extend the logic of an overarching solution to the most tactical levels, subtly communicating to the audience that they are experiencing a considered environment, where information, its presentation and its behavior are logical, consistent and reliable. In that context, insetting elements in this matter becomes critical. To be sure, it’s a level of detail that will be missed by most people — Subtraction.com has been ripped off a few times, and this is usually one critical detail that plagiarizers forget to appropriate — but that shouldn’t matter to a designer. If the designer knows it’s there and if the designer believes it’s important, then it’s important.
Thanks for this elaboration. I’m forever wrestling with the desire for balance in my designs and the need to be flexible within a grid.
Does your insetting tend to relate proportionally to the size of the gutter or the line-height or do you just eyeball it?
I love these behind-the-curtain posts so I vote that you keep this kind of nitpicking coming!
I think another nice feature of working this way is that it ensures more comfortable whitespace between elements, particularly text, while allowing the horizontal rules to maintain a tighter relationship. At the top of this page, for instance, the long rule over the body of the article is quite close to the shorter rule over the sidebar. However, the body text and the sidebar text are given more room to breathe with the additional ‘nudge’ between them.
It’s this level of detail that keeps me aspiring to be an actual web designer one day. I second the call to keep posting things of this nature. Love it.
Any suggestions on ways to calculate that inset or is it something that needs to be eyeballed?
Sorry I probably should have finished reading the first post.
No problem. Just to reiterate: I do eyeball it. I try my best to space it so that it’s properly framing the text within the element, meaning the top, left and right spacing is all equal while the bottom spacing is a bit taller. But yes, those details aren’t so much mathematical as they are intuitive.
There’s a good section on this idea in MЧller-Brockmann; however, if I remember correctly, he breaks it down into 3 possible solutions: one, make the type flush left against the background edge and lose legibility. two, outset the background so it extends beyond the grid and into the gutter (while keeping the type grid aligned). three, changing the color of the type instead of creating emphasis by changing the background. He was working against the limitations of set type, but the principles still apply. Universally insetting the typography seems a simple way of achieving goal #2.
This is one of the most succinct, descriptive pieces on technique I’ve read in some time. You’ve encapsulated perfectly that fine line designers walk between (often a self-imposed) chaos and order. This “unhealthy focus on minutiae” is what truly defines the great designer — and the great communicator. Thank you.
Great post, working with grids is definitely a skill which you have to build, but once developed it will make life so much better!
I still don’t understand why you are insetting the text
If we didn’t nudge “Tacos,” “Lasagna” and “French Fries” over just a bit, their left edges would abut the highlight boxes, which is visually unpleasant.
Why would only these elements be touching the highlight boxes and not the others?
Also I thought I saw in “Grid Systems” that whenever Brockmann reversed out the type in white on orange or what have you he did not inset the copy.
I also see that you don’t inset your structural images (Mr. President’s picture) but you do inset article images (this post). So I guess it begs the question, why inset the article images?
Thanks Khoi, as always an insightful and helpful article, I look forward to your reply.
@Takeshi: The issue in your first question initially tripped me up as well as I read the article. In the example Khoi has set up, not all elements are clickable, and therefore not all of them will be highlighted.
Because these two sets of elements will likely be classed differently in CSS, it would be easy to only nudge those elements to which the highlight applies, and to leave the others aligning with the grid, but that would leave the inconsistency which is unpleasant.
@Khoi: it’s nice to have an article explain why I do something that I do instinctively. Now, when I nudge things, instead of thinking to myself “It just looks better that way!” I’ve got the logic behind it. Thanks!
So, what about adding a little padding to the grid cells?
Wouldn’t this work better?
Khoi, great article.
My question isn’t so much the logic, but the means to code it. Currently, I’m aligning text to the grid, while extending highlighting into the gutter (a solution I decided upon after my own fit of o.c.d.), but there have been times when I wish I had simply inset the text.
My question is in the CSS: would you use the “padding” or “margin” property, and at what level (div or the actual p tag), and how do you deal with the obtuse Internet Explorer interpretation of box theory? Is there a method to the madness, or is it your basic tweak-and-check to make sure all the alignment is still intact?
That was my most frustrating thing at one point; having a clean grid setup, and then having IE break that with different calculations for the “box”.
I’m sure this is a basic detail, and browsing your CSS, I’m pretty sure you’re not insetting the actual p tags, but at the div or containing element level… am I right?
Otherwise, great article. Thanks again for the insight.
Khoi, I’ve always love your thoughts on grids but I must disagree with you on this. I’ve been using grids for sometime now and I really don’t see the advantage of having to pad certain elements. I think that can throw a grid totally off. This situation you focused on in this post is pretty specific and I think it can easily be solved if considered when creating the grid and when designing. Don’t get more wrong, I’m not saying everything has to be on a grid line but it does seem like you are suggesting that it is “wrong” to lay elements right on the grid line. I don’t think it is.
Keep on truckin’!
You mean, Obsessive Compulsive Personality Disorder here, I believe. The ‘perfectionist’ disease, rather than the ‘hand-washing’ disease.
@Antonio and liked-minded people: I guess you can make it a judgment call if it doesn’t matter to you that text that flows freely won’t vertically align with text that’s in a table or an image.
As I tried Khoi’s solution, I found that giving the outer columns a margin (in addition to the inner gutters) works for me too, as it prevents the container of my centered layout from suffocating the rightmost column on the right edge. Now I don’t have to nudge the elements in the rightmost column from both the left and the right.
Khoi, I appreciate all the posts on the use of the grid and will definitely send you a link once the site is up.
As designer working both on print and web projects, I’ve just got a little question to raise here : what’s new about all this ? Everyone that has already based a design on a grid has obviously found that out by himself… even for print, when you got that kind of elements and some of them have a colored background (even if there’s no following over state, alright)you will avoid copy to border the “boxes” too tightly. Even in print, you happen to need “padding”. And once you use it, for consistency’s sake, you usually will make a principle of it.
Am I the only one here feeling that way ?
Khoi, Very nice. A useful post for a print and grid geek like myself. Thanks and keep these coming.
Khoi great article. I definitely agree with the padding of elements. Like how you mentioned it provides a good whitespace and it allows the reader not to feel “cluttered”. As all developers should know whitespace can make or break a web site. If everything is edged against each other it looks tacky, but with proper spacing of the elements (or just the element’s content) it makes it a more enjoyable interaction. Great Post!
Also as a note, sometimes padding can be good depending on the situation and other times margin, but at some points it is best to set the position to relative and modify the left, right, top, and bottom properties. In the end tho go with what looks good to you. Most designers are really picky about their stuff and if it looks pleasing to you and your satisfied I find that other people like it as well.
Thank you! Your remarks have been sent to Khoi.