One menu, four grids

What fits on a side traditional

Invented飽飽茶餐廳 Bau Bau Café is not a real café, and every price is made up. 飽 means full; 飽飽 is what you are after the 常餐. The dishes are the ordinary ones you would find in any cha chaan teng in Hong Kong, and they are drawn rather than photographed.

Show the sheet

Four goals, four grids

You are at Bau Bau with the laminated menu in front of you. Pick a goal, then do it on each sheet from A to D — the tabs are drawn as the grid they choose. If a dish is not on the front, turn the sheet over; that counts as a tap, as it costs you one at the table. A wrong item a real customer would plausibly pick counts against you, and says why.

What you are timing is you, once. Each grid's clock starts at your first touch on its sheet and stops when you find the thing. Nothing leaves this page.

How much fits on a side

The same twenty-seven dishes, the same type sizes and the same A4 sheet. Read off a render of each grid in the language chosen above — switch to 中 or EN and watch what moves to the front.

Measured, grid by grid

The four grids

Chinese already sits on a grid

Every Chinese character is drawn in the same square. Set a line of them and you have a row of modules before any designer has drawn a single column: 原稿紙, the squared paper Chinese is still taught on, is that grid made visible. A column that is a whole number of characters wide ends every line flush, with no stretching and no hyphens. English cannot do this — its words are all different widths and it may only break between them — which is why the same column that holds Chinese neatly leaves English ragged. Show the grid, switch the sheet to 中 and then to EN, and watch the intro.

飽飽自一九七二年起在深水埗開業

What this cannot tell you

One reader, once. The clocks show how a grid felt to you today, not how it performs; nothing here is a study.
Learning carries over. The second sheet you try is easier because you have already found the thing once, so the order you try them in is part of the result.
A menu is read differently from a page. People arrive knowing roughly what they want; most of the time is spent finding, not reading.
The four grids are built to be fair, not to be good. Every sheet uses the same type sizes; a real designer would shrink the type to make a grid fit, and that trade is exactly what this room holds still.
A screen is not a sheet. This is an A4 drawn at 96 pixels to the inch; printed, the type is the size it says, but on your screen it is only as big as your screen makes it.

A grid decides how much fits. This room prints one cha chaan teng menu on a laminated A4 sheet four times — as a manuscript, in columns, in modules and as a hierarchy — with the same dishes and the same type sizes on every sheet, and counts what lands on the front, what goes on the back, and how much of the paper is type.

The answers are not the ones the screen-trained eye expects. The column grid that looks crowded puts the whole menu on one side; the modular grid that looks generous needs both, and leaves half the back blank. Neither is wrong. A grid is a promise about the content, and a laminated sheet is where that promise gets paid for in paper.

AnatomyOne bilingual cha chaan teng menu — twenty-seven dishes, an intro and the notes every such menu carries — printed on a laminated A4 sheet four ways: manuscript (one text block between margins), column (three columns), modular (twelve columns, equal cards four to a row) and hierarchical (zones sized by importance). The same type sizes on every sheet, in points; margins and gutters in millimetres. Whatever does not fit the front goes on the back, and no grid is allowed a third side. Four goals run on every sheet, each with a clock and a tap count, and every count of what fits is read off the render.

Fit the grid to the content when

The items are unequal — long names, short names, a set with three lines of what it includes — and equal cells would cut some and pad others
The reader compares: prices down one line, times beside each section, the cheaper route through a set
The space is fixed, as a printed sheet is, and every millimetre a cell wastes is a dish on the back

Fit the content to the grid when

The items are genuinely equivalent and visual, and a picture does more work than the words
The content changes often and has to drop into place without anyone designing it again
There is room to spare — a scrolling screen, not a laminated sheet — and the regularity is worth the space it costs

States & accessEvery dish on the sheet is a real button, so the bench works from the keyboard; turning the sheet over is a button too. The grid overlay is decoration, hidden from screen readers. Both scripts carry their own language, and the sheet can be shown at actual size and panned on a phone, where the fitted A4 is too small to read.

Specimens飽飽茶餐廳 Bau Bau Café, an invented cha chaan teng in Sham Shui Po, set in Traditional Chinese, English and both. Every price is made up and every dish is drawn.

Principle at stakeVisual hierarchy — what a grid makes equal and what it lets stand out — held against the plain arithmetic of a sheet of paper.

SourcesMüller-Brockmann, J. (1981) Grid Systems in Graphic Design. Niederteufen: Niggli · Samara, T. (2002) Making and Breaking the Grid. Gloucester, MA: Rockport — for the manuscript, column, modular and hierarchical types · Bringhurst, R. (1992) The Elements of Typographic Style. Vancouver: Hartley & Marks — on 45 to 75 characters as a comfortable line · W3C (2020) Requirements for Chinese Text Layout, W3C Group Note · ISO 216, the A series of paper sizes · Publications Office of the European Union, Data visualisation guide: the grid.

See alsoPublished layout grids — sixty-seven grids as their publishers wrote them down · One app, four layouts, the same bench for priorities.

Why traditional: The four grid types are long-standing practice in print and on screen. The counts here are measurements of these four sheets, not of grids in general, and the clocks measure one reader, once.

The building

The desk