Weight is not area, and centre is not the middle

Two shapes of the same size can pull differently

A 200-pixel square of pale grey and a 200-pixel square of near-black occupy identical area and exert wildly different pull. That much is obvious. What is less obvious is that a 60-pixel square of near-black can outweigh the 200-pixel pale one, and that a dense paragraph of small text can outweigh a large photograph.

Visual weight is roughly the product of three things: how much area a mark covers, how far it sits from its background in lightness, and how much detail it contains per unit of area. A small, dark, busy element is heavy. A large, pale, empty one is light.

This matters because balance in a layout is a comparison of weights, not of sizes, and because designers routinely try to balance a photograph against a block of text by matching their dimensions, which is the wrong quantity.

Estimating weight without guessing

The blur test gives you a direct read. Blur the layout heavily — 3% of the width rather than 1% — until nothing but masses remain, and then squint. The blobs that remain darkest and largest are the heavy ones.

For a numeric version, most editors will tell you the mean value of a selection. In GIMP, select a region and open Windows > Dockable Dialogs > Histogram, which reports the mean. A region with a mean of 60 out of 255 is heavy; a region with a mean of 235 is light. Multiply mean darkness by area and you have a rough weight you can compare across elements. This is cruder than the eye but it settles arguments.

A counter-intuitive consequence worth internalising: a dense paragraph of 14px text is a mid-grey mass, not a light one. Text at normal settings averages somewhere around 70 to 80% lightness when blurred — the black letters and the white gaps average out. That is why a column of body copy can hold its own against a photograph, and why increasing line spacing lightens a paragraph as surely as changing its colour does. Typographic colour, covered later in the type block, is exactly this property.

The optical centre

Put something in the exact vertical middle of a frame and it will look slightly low. This is consistent enough that typographers and framers have compensated for it for centuries: the optical centre sits a few per cent above the geometric one.

The practical numbers:

• For a title in a frame or on a title page, place the centre of the text block at about 45% of the height rather than 50%. On a 1000px frame, that is roughly 50 pixels higher than the mathematical centre.
• For traditional book pages, the margin at the bottom is set larger than the top — often by a third or more — for the same reason.
• For a single icon or glyph inside a circular or square button, the same principle applies vertically, and additionally the glyph's own optical centre rarely matches its bounding box.

Why it happens is not fully settled. The usual explanation is that we compensate for perspective and for the expectation that objects sit on a ground plane; whatever the cause, the effect is reliable and easy to test on yourself. Draw a dot at exactly half the height of a tall rectangle and it will look like it has sunk.

Optical centring of glyphs and shapes

Inside a button or an avatar, the mathematical centre of a bounding box is frequently wrong:

• A play triangle in a circular button looks off-centre when its bounding box is centred, because the triangle's mass is towards the flat left edge. Shift it right by roughly 5 to 8% of its width.
• Round letters such as o, e and c are drawn slightly taller than flat ones such as x and z, overshooting the baseline and the x-height by around 1 to 1.5%, so that they look the same size. This is the typeface designer compensating on your behalf.
• A single capital letter used as an avatar sits low if you centre it on its bounding box, because the box includes descender space the letter does not use.

The rule that covers all of these: centre the mass, not the box. Software centres the box because that is what it can compute. You are checking the mass, because that is what a reader sees.

When the tool and the eye disagree

They will disagree often, and the eye wins. This is not mysticism; it is that the alignment tool is solving a geometric problem and the reader is solving a perceptual one. The two coincide for simple rectangles and diverge for anything with uneven mass distribution — type, icons, photographs with a bright sky at the top, logos with a tail.

The workflow that survives this: align mathematically first, because it gets you to within a pixel or two for free, then look, then nudge. Record the nudge as a deliberate offset rather than leaving it as an untracked hand adjustment, so that the next person does not helpfully re-centre it and undo your work.