For those of you who are unfamiliar with grids in terms of design, grids are an excellent tool for giving structure and form to a layout, be it in print or in web. This blog is an example of a gridded design. Note how the whole length of the site is divided into six major columns with the navigation buttons, the article alignments, etc… all falling in line with the grid. Khoi Vinh and Mark Boulton have excellent pieces on this subject.
Chances are if you haven’t read those articles or haven’t taken a class in information design or a course similar to that, you won’t understand anything that will follow. Of course, you’re welcome to read on, but I strongly suggest you check out the recommended reading.
Today I will be discussing how to align a grid to a baseline. More specifically, aligning a grid row to a baseline.
I don’t know if this topic has been discussed before, but I’m pretty sure my equation is unique. So if anybody else has produced the same equation, rest assured, I developed this independently. What I’ll show you today is how to turn this:
Baseline at 15 pt, margins at 3 picas, and much horror.
into this:
Much better. Calculations resulted in upper and lower margins of 3 picas, 7.5 pts. (Added: Columns. Don't mind them.)
Using this equation:
B*N*(A+1) – B = P-r (eq.1)
Where:
B = The gutter size as well as the leading/line-height (pretty much, the baseline
N = The number of row divisions you’d like
P = The total page height
r = The “remainder”, or the sum of both the top and bottom margins (if the top and bottom margins are equal, than r = 2m, given that m is the margin height)
A = The number of baseline-heights contained inside a single row. (Obtained via trial-and-error) Must be an integer. Usually ranges from 3 to 8.
The “A” variable may need some explaining, but perhaps it’d be better if I helped you visualize the equation in its entirety.
Let’s expand the first term into:
N*(B*A+B) (eq.2)
Think of B*A as the total row height, and B as the gutter. N is the number of rows. So if you add the total row height and the gutter, then multiply it by the number of rows, you get a series of rows with an extra gutter at the end. This is what the second term does: it subtracts that extra gutter.
This leaves us with the total “printable” page: the whole page minus all the margins. So we equate that to “P-r”.
Now look at B*A. This implies that the row height is a multiple of the gutter. All’s well and good, right? But it’s not that simple. Because A must be an integer, there’s no fixed way to find out how many baseline-heights will fit inside a row for a certain number of rows. The only way is to go through trial-and-error.
Contrary to what you may think, this can actually work to your advantage. If you look at eq.1, your B, N and P are fixed values. The only “unknowns” are r and A. This gives you a flexibility in determining how big you want your margin to be and then balance the row-height, or vice versa. What does this imply? It means that when you’re doing your calculations, you can either start off by setting a minimum margin and then calculate for A and then round off to an integer, or you can start off by setting a cell height and then see if the r value is positive or negative.
So that’s pretty much it. I hope this has been useful to you, and please don’t hesitate to ask questions.
I kinda skipped over the math bit but I looking at the second grid diagram.
*is more of a visual person*
:D
Yay for grids!
lol It’s really simple math. No logarithms or differentials or anything. It’s just arithmetic. :P
I knoez but I’d rather do it by instinct / by looking / by feeling :P ahahahaha!
HIPPIE CODING!
Wonderful visualization, elegant formulas, simple equations! Truly a work of a brilliant genius!
*ehem*
Anyway, though I can’t blame you for this since you probably lack time to do so but I think it would be better if you could visually show what each variable measures (like engineering diagrams).
And I don’t think that “expand” in “Let’s expand the first term into” is the proper word, I think it should be “distribute”.
Here’s a programming exercise: Make a Flash/Flex app that simulates your equation. That is, given the parameters, it will show the paper with the grids drawn. Bonus points if placeholder texts could be added and snapped to the grids for preview.
Haha! Err thanks for the hopefully not sarcastic comment. XD
I want to do it too, but i’ll do it over the weekend. (Or, if I finish my computing homework early, tonight)
I will make the necessary semantic corrections. :))
And I’d like to do it in flex, but I’m still far behind on that. Maybe you’d like to give it a try? (And no, I am SO not doing this in C.)
Well, it’s not a sarcasm, more like a hyperbole :P.
Good luck on your journey on becoming a Real Programmer™. I’ll be waiting for you at the end of your pilgrimage….
Flex? Well, ever since I reinstalled my OS…. I didn’t bother to install Flex back…. <_<
Actually, I had something similar to what Wil said in mind.
This would be pretty cool (and useful) app, although I was thinking of something that had sliders and would dynamically update the preview thing.
Tara, gawa tayo. XD