the grid and the diagonal

The poster for the school's 1923 exhibition, by the student Joost Schmidt, is a crowd of circles, bars and lettering thrown across a diagonal. Nothing in it is centered and nothing is upright, and it is perfectly balanced. Five years later Jan Tschichold, who had seen that exhibition and never recovered, wrote the book that gave the approach a name: the new typography.

Tschichold's argument was that symmetry is for things that are looked at and asymmetry is for things that are read. A reader enters a page at the top left and leaves at the bottom right, so the page should be built as a path, not a mirror. The eye is balanced by weight, not by reflection.

the lever

Think of a seesaw. A heavy child near the middle balances a light child at the far end. Weight times distance on one side equals weight times distance on the other. A page works the same way: a large dark block near the center is balanced by a small saturated one out at the edge.

That is the hero of the landing page. The headline is a heavy block of ink on the left; the panel of shapes is a dense red square on the right, and they level each other. It is also the mark. The big red circle on the left is balanced by the small yellow triangle on the right, with the blue square as the fulcrum.

the grid

Twelve columns, because twelve divides by two, three, four and six, so a page can be halves, thirds or quarters without changing the grid. Blocks snap to columns. One block is dominant. Everything shares a left edge. Blocks touch, with a rule between them, instead of floating in gaps; gaps belong inside groups, not between them.

Symmetry is avoided on the grid for the same reason Tschichold avoided it: a centered layout tells the eye that it has nowhere to go. A screen is a path. The dominant block is where you start, the red button is where you end, and the grid is the floor between them.

the diagonal

A diagonal bar on a poster creates motion. The eye slides along it, and the page feels like it is happening rather than sitting there. Schmidt, Bayer and Moholy-Nagy used it constantly, and so do our posters: the stairway's handrail, the bar across the photomontage, the vertical word on the primary forms poster.

In an interface the same diagonal is a lie. Nothing is moving, and tilted text is slower to read than level text. So the rule is a border, not a ban: posters and illustrations may tilt; the interface stays orthogonal. A card's picture may contain a diagonal. The card may not.

balancing a screen in three steps

1. Choose the dominant block, and make it one: the hero, the exercise card, the object's picture.
2. Put it off center on the grid: five columns on the left, or seven on the right, never six in the middle.
3. Counterweight with something small and saturated on the far side: a red button, a yellow tag, a blue disc. Then squint. Both halves should feel equally full, even though they are not equally covered.

Balance is a verb in this system. You do it to a page; the page does not come with it.