Grid and Margins

Your margin table is a sum somebody already did

Most brand books answer "how far from the edge?" with a table. A4, 18mm. A3, 25mm. A0, 50mm. The table works right up until somebody makes something that is not on it, and then the person making it guesses.

Look at the numbers for a moment. They are usually not arbitrary. Somebody divided the page by roughly the same number every time, wrote the answers down, and threw the division away. The table is the answer sheet. The rule was the sum.

Sidenote asks for the sum. Every rule in the design layer is stored as a relationship rather than as a measurement, because a measurement is only true at one size.

What the form asks for

You give a proportion. The size of the thing being made supplies the rest.

All three look like your brand, because all three came from one decision. Nothing has to be re-decided when somebody needs a format you never listed.

The field takes anything from a tenth of a per cent to fifty. Past half the short side there is no content left, which is where the ceiling comes from.

Which side the percentage is of

There are two answers and the product will not choose between them, because the choice changes the result on anything that is not roughly square.

The short side. On a page in portrait the short side is the width, so the margin is a proportion of how wide the page is and stays put as the page gets taller. Pick this if you want a poster and a page to feel related. A page that scrolls has no height to compare against, so its short side is simply its width.

The width. The margin follows how wide the thing is, whichever way round it is.

Neither is selected when you arrive, and that is on purpose. The rule saves with your name and the date against it, and a value nobody looked at should not carry a person's name. The Rule button stays dead until you have answered, and the line beside it names what is still to decide.

Whether the margin lands on your spacing steps

Under the margin is a second question with two answers: does the margin round to the nearest step of your spacing scale, or is it the exact percentage? This is a preference about where a margin may land rather than a fact about your brand, which is why it is asked rather than read off your scale.

Rounding is the useful half. Five per cent of a page might come to 45. If your brand works in steps of 8, 16, 24, 32, 48 and 64, then 45 sits between two of them and belongs to neither, and after a few artefacts your spacing has quietly stopped being a system. Rounding sends 45 to 48, the step nearest it. When a value falls exactly between two steps it goes up, because a cramped margin on a small artefact looks wrong faster than a generous one.

Say "the exact percentage" and the margin is the arithmetic rounded to a whole pixel, and nothing else touches it.

If your brand has no spacing steps yet, the form says so under the question rather than rounding to something it invented. That line stands while the question is open and while the answer is yes, and goes once you have said the margin is the exact percentage, at which point the absence has no bearing on the rule.

The unit your spacing is built out of

A spacing scale is a set of multiples of something. That something is the unit, and it is the one thing on this form the product works out for you.

If your smallest spacing step divides every other step exactly, that step is the unit. It arrives already in the field, with a line saying it came from your spacing scale. Steps of 8, 16, 24 and 32 give you 8. Steps of 4, 8, 12 and 16 give you 4.

If your steps do not work that way, there is nothing to read and the product does not invent one. Steps of 6, 8 and 16 have no unit, because 8 is not a whole number of 6s. Neither do 4, 6 and 9. A scale that happens to include a 1 has none either: everything is a whole number of 1s, so the claim would rule nothing out. In all of those the field is empty and the save waits for you, like every other question on the form.

The unit is asked of your spacing steps and not of every measurement your brand names. A 20px icon and a 44px tap target are dimensions your brand publishes, not steps of a rhythm, and neither has anything to say about your grid.

It is a ruling, and everyone building with your brand acts on it: everything they make sits on multiples of it. The line under the field lists the first four multiples so you can see what you are asking for. It does not move either picture, and that is correct rather than broken. Your margin is a share of the page and your gutter is a share of the margin, so the drawings answer to the margin and never to the unit.

Type over it and it becomes yours. The line stops crediting your scale for a number you changed.

The floor, and the one case that needs it

"Add a floor" exists for one case: something small enough that the proportion stops working. Two per cent of a business card is a hairline. A floor says the margin never drops below one of your own spacing steps, whatever the arithmetic produces.

You pick the step from a list of the ones your brand already has, so a floor can only ever be a measurement your brand publishes. Most brands never need one, which is why it is a link rather than a field.

Columns, and why "not how we work" is a real answer

Under the margin, the form asks whether your brand works in columns. "Not how we work" is a real answer, not a way of skipping the question.

That is worth saying plainly, because twelve columns has become the thing everybody assumes. Your brand may have a spatial system that is not a column grid at all: a margin and a few permitted positions for the mark, a single centre axis, a mark whose height sets the inset of every text frame. None of those is a column count, and none of them is vague.

If you say no, the product records that you decided it, and everyone building with your brand is told this brand does not lay out on columns. If you say nothing, they are told nothing, and a grid gets invented. Those are different outcomes, which is why the question stays until you answer it.

If you do work in columns, you give a count and a gutter. The count takes anything from 1 to 24, and one is a real ruling: a brand that lays everything out in a single measure has decided that. Six shortcuts sit beside the field and none of them is selected for you.

The gutter is stated as a proportion of the margin rather than of the page. Anchored to the margin it survives a format change for free, because the margin already does. Two shortcuts sit beside it, half the margin and the full margin, and anything in between is typed, because there is no name for it.

The gutter is not rounded a second time. Your margin has already landed where you said it should land, and moving half of it to the nearest step would push the gutter off the ratio you stated, which is the one thing the rule says.

The columns question is always inside the form. On the row it appears in a strip underneath, once the margin itself is ruled.

The two pictures are the rule, not a preview

The two artefacts at the top of the form are not a preview. They are the rule.

One number would put you back where the table was, true at one size. Two sizes, moving together as you type, is the only way to see whether the number you chose is the number you meant. Each is drawn at its own shape, and its caption names the size and what the margin comes to there. The margin drawn is the value that will actually be used, rounding included, so the picture cannot disagree with its own caption.

Both stay blank until the margin, its basis and its rounding are all answered. An artefact drawn on a basis nobody chose would be choosing one.

A ruled column set replaces the page's contents rather than sitting behind them, and it is drawn on the page only. A card is not divided into six.

Before you have ruled anything, the row draws the same artefact twice, once as it is and once with a margin, dashed and faded. That is a comparison, not a value already sitting there.

When your brand cannot carry the rule you set

Three things can go wrong after the rule is saved, and the row says so rather than staying quiet.

Your unit is not what your spacing is built out of

You put everything on an 8px grid and one of your spacing steps is 12. Somebody holding to the grid cannot use that step, and somebody who uses it is off the grid. One brand produces two spacings that never line up, and nothing says which was meant. The finding names the sizes that miss, so you are not left to redo the arithmetic. Move the steps, or set the unit to a size the scale is actually built out of.

The margin is set to round and there is nothing to round to

Every margin comes out as a plain percentage of whatever is being made, rounded to the nearest pixel, landing on no step of anything, so no two things you produce share a measurement. Give the brand its spacing steps, or set the margin to the exact percentage.

Your floor names a step your brand does not have

Then the floor can never apply, at any size. A small artefact drops below the minimum you set and nothing stops it. Add the step, or floor the margin at one the scale already has.

In all three, the part of the rule that cannot hold is dropped rather than hedged. What reaches the people building with your brand is an instruction they can act on, and a caveat inside an instruction is worse than silence, because the reader has to guess which half to follow. If your unit is contradicted, the sentence starts at the margin instead and says nothing about a grid. If your rounding has nothing to round to, that clause goes and the percentage stays. Nothing is annotated, nothing is apologised for, and the finding on the row is where you are told why.

Fitting a rule to a margin table you already have

Sidenote will not read your table for you and there is no plan for it to. This is arithmetic you do once, by hand, and it usually takes a minute.

Take one row of your table and divide the long side by the margin. Do it again on a second row, and a third. A table that came from a division gives you close to the same answer every time.

That is one rule, written down three times: the long side divided by roughly 24. Now express it the way the form asks. One twenty-fourth is 4.2 per cent of the long side. If your pages are portrait and the short side is about seven tenths of the long side, the same margin is about 6 per cent of the short side, which is the number you type if you pick the short side.

If the numbers do not agree across rows, your table was never one rule. The honest move is to pick the format you care most about, rule the proportion from that one, and look at what it gives you on the others.

If you have nothing written down

Then you are deciding rather than transcribing, and there are only three decisions.

Start with the margin. Type a number, watch the two pictures, and change it until both look like things you would actually make. That is the whole method, and it is why the pictures sit at the top of the form rather than at the bottom.

Then pick what it is a percentage of. If nearly everything you make is roughly the same shape, the two answers barely differ and either is fine. If you make wide things and tall things, read the banner table again, because that is where the choice bites.

Then answer the rounding. If you already have a spacing scale, round to it: it is the cheapest way to keep everything you make in one system. If you do not, say the exact percentage now and come back when you do.

Columns can wait. "Not how we work" is a complete answer if you have never thought in columns, and it is better than silence, because silence gets a grid invented for you.

The other rules

The same idea runs through the other two rules on this card. Clear space is a multiple of your mark's own height rather than a measurement in millimetres, and type hierarchy is a ratio between your sizes rather than a list of them. Brand components covers the card underneath, where the parts a screen is built from get described.