Folio
6

Layout and hierarchy

Grids, the order a reader sees things in, and the elements that sit around the text.

Grid

Also: column grid, layout grid

A set of invisible columns, with fixed gaps between them, that every page of a publication is built on. Text and pictures start and stop on its lines, so pages that look different still belong together.

Low water

37

The same five things. On the grid, every edge lands on a column, so the page looks planned and the next page can match it.

NotTable: rows and columns of information, printed with the page. A grid is never printed; only what sits on it is.

SayBuild Lowtide on a 12-column grid, so features can run in two, three or four columns and still line up from page to page.

Modular grid

Also: modules, fields

A grid with rows as well as columns, which divide the page into equal boxes called modules. A picture or a box fills one module or several, so things line up across the page as well as down it.

Small breads

milk rolls

bagels

pitta

brioche

rye

focaccia

39

Rows cut the columns into boxes called modules. Each loaf fills one, so the photos line up across the page as well as down it, however they were shot.

NotColumn grid: columns only: things line up down the page but can start at any height.

SaySet the Bread on Sundays index on a modular grid of three columns and four rows, one loaf and its name per module.

Baseline grid

Evenly spaced lines down the page, one for each line of body text, that every line of text sits on. Headings, breaks and the spaces around them are sized in whole lines, so lines stay level across a spread and back to back through the paper.

The kettle took an age on the old stove, and Nell stood over it with her hands in her sleeves, watching the street lamps go out one by one. She had meant to leave in the autumn. Then the first frost came, and the second, and each morning there was a reason to stay one more week: the cat, the stove, a letter that might still arrive.

By February she had stopped pretending. She bought a second blanket and a better lamp.

* * *

The letter came on a Tuesday, in a hand she knew at once, and she left it unopened on the table until the light had gone.

The scene break takes exactly two lines of space, so every line after it sits level with a line on the facing page.

NotLeading: the distance from one line of text to the next. The baseline grid is that distance repeated down the whole page.

SaySet A Winter of Small Hours on a 13 pt baseline grid, and make each scene break, its asterisk and space together, exactly two lines deep.

Alignment

Placing things so their edges, or their centres, fall on one shared line. When a picture, a heading and the text all start at the same left edge the page looks planned; a few points out, it looks like an accident.

Lowtide · Places

Holm Point

41

Lined up on one left edge, four separate things read as one column. A few points out, they look like a mistake.

NotText alignment: how the lines inside a paragraph sit: flush left, centred, justified. That is alignment within text; this is alignment between things.

SayOn the Lowtide places pages, align the kicker, the headline, the photo and the text on one left edge.

White space

Also: negative space

The empty parts of a page: the margins, the gaps between things, the room around a heading. It isn’t wasted paper. It shows what belongs together and where to look first.

Lowtide · Places

Salt marsh

The page with space holds less and reads better: the headline stands out, the photo has an edge, and the eye knows where to start.

NotBlank page: a whole page left empty on purpose. White space is the empty part of a page that has things on it.

SayThe Lowtide openers feel crowded: drop the second photo and give the headline more white space.

Hierarchy

Also: visual hierarchy

The order in which a reader notices things on a page, set by size, weight, colour and space. A clear hierarchy tells a reader what the story is, who wrote it and where it starts, before they read a word.

Lowtide · Features

The last ferry to Holm

Words by Maren Lusk · Photographs by Ade Okafor

For forty years one boat has carried the island’s post, its doctor and its children. Next spring a bridge opens.

The crossing

Ruth Abbott starts the engine at ten to six, before the gulls are up. Her first passenger is always the baker.

Same words, same order. Size, weight and space tell the eye what to read first and what can wait, before it reads a word.

NotContrast: one way of making hierarchy: two things made clearly different. Hierarchy is the order all the contrasts on a page add up to.

SayThe Lowtide feature pages feel flat: make the headline clearly bigger than the section heads, and keep the byline small and quiet.

Proximity

Also: grouping

Things set close together read as one group, and space between groups keeps them apart. It is the cheapest way to organise a page: no lines, boxes or colours needed.

Sunday loaf

500 g strong white flour

10 g salt

7 g fast-action dried yeast

350 ml warm water

1Mix everything into a rough dough.

2Knead for ten minutes, until smooth.

3Cover and leave to rise for an hour.

4Shape, then bake at 220°C for 30 minutes.

Nothing moves but the space. Packed close, the ingredients read as one shopping list; the gap after them says the method starts.

NotAlignment: which links things by a shared edge. Proximity links them by the distance between them.

SayIn Bread on Sundays, set the ingredients close together as one block, and leave a clear gap before the method.

Heading levels

Also: A-heads and B-heads, H1 and H2 on the web

The ranks of headings inside the text, named by letter: an A-head opens a section, B-heads divide it, C-heads divide those. Each level keeps one style through the whole book.

The tides

Reading a tide table

Most days have two high tides and two low ones, a little over six hours apart. The table gives the time and height of each.

Springs and neaps. The biggest tides, springs, follow a new or full moon; the smallest, neaps, fall in between.
Walking out on the sand

Set off an hour before low water, and turn back as soon as it has passed.

The A-head opens a section: the biggest heading inside the text, used least often.

NotRunning head: which labels the page from its top margin. Heading levels sit in the text and start its sections.

SayIn the Lowtide guide pages, use three heading levels: A-heads for each topic, B-heads for its parts, and run-in C-heads for short notes.

Standfirst

Also: dek, intro

The short paragraph between a headline and the text, set larger than the text, that says what the article is about. Magazines use one on every feature, to win the reader who is only flicking through.

Lowtide · Features

The last ferry to Holm

For forty years one boat has carried the island’s post, its doctor and its children. Next spring a bridge opens.

Ruth Abbott starts the engine at ten to six, before the gulls are up. Her first passenger is always the baker, with forty loaves in crates and a flask of tea he never offers anyone.

The crossing takes eleven minutes on a calm day and twice that in a westerly. Ruth has made it, by her own count, more than sixty thousand times.

Between the headline and the text, a sentence or two in larger type says what the article is about, so a reader can decide to read on.

NotLede: or lead: the first paragraph of the article itself. The standfirst sits above the text, apart from it.

SayGive every Lowtide feature a two-line standfirst under the headline that says who the story is about.

Pull quote

Also: pull-out quote, pullout

A short line copied from the text and set large within it, to catch the eye of someone turning pages. It repeats words from the article; it never adds new ones.

Ruth Abbott has run the ferry to Holm for nineteen years. She knows which mornings the fog will sit in the sound and which passengers will run for the slipway. ‘You learn an island from the wheelhouse,’ she says. ‘People think I just go back and forth, but no two crossings are the same.’ She starts at ten to six, when the water is flat and the first passengers are the baker and the postman. By eight the boat is full of children on their way to school. The afternoon is quieter, then the tide turns and the evening run is the roughest of the day. She has never once been bored, she says, though she has been soaked more times than she can count.

The pull quote repeats words already in the article (marked), set large to catch a reader turning the page. It adds no new information.

NotBlock quote: a long quotation from someone else, set apart once, in its place in the text. A pull quote repeats the article’s own words.

SayAdd one pull quote to the ferry feature, using Ruth’s line about no two crossings being the same.

Box

Also: boxed text, sidebar, panel

Extra material set apart from the main text in a frame or a tint: a fact, a tip, a note on a word. Readers can skip it without losing the thread of the text.

Before you start

Bread asks three things of you: time, warmth and a little patience. All three are easier to find on a Sunday than on any other day, which is why this book is named after one.

Read the whole recipe before you begin. Most loaves that go wrong were rushed while they were rising, not spoiled in the oven.

Taken out of the text and boxed, the tip no longer interrupts the advice around it, and a reader can take it or leave it.

NotCallout: which screen designers often use for a box like this. In print, a callout is a label pointing at part of a picture.

SayPut the baker’s notes in tinted boxes beside the recipe, never in the middle of a step.

Caption

The words set with a picture that say what it shows and why it is there. In non-fiction it often starts with a figure number, so the text can send the reader to it.

Fig. 4.2 A safety bicycle of the 1890s: two wheels of the same size, and a chain driving the back one.

Alone, it is a bicycle on a hill. The caption says which bicycle and why it matters, and gives the text a number to point to.

NotCredit line: which names who took or owns the picture. The caption is for the reader; the credit is for the owner.

SayIn A Short History of the Bicycle, number every caption by chapter (Fig. 4.2), and refer to the figures by number in the text.

Callout

Also: label, leader line (the line itself)

A label on a picture or diagram, joined to the part it names by a thin line called a leader line. Technical drawings, field guides and exploded diagrams are built on them.

1saddle2handlebars3front wheel4pedal5chain

Each callout is a label joined to its part by a thin line, so the eye never leaves the drawing. A key makes the reader look away to match numbers.

NotPull quote: text repeated from an article. Screen designers also say callout for a highlighted box; in print it means a pointing label.

SayLabel the safety bicycle with callouts down both sides, not a numbered key, and keep the leader lines from crossing.

Rule

Also: line, hairline (the thinnest rule)

A printed line across or down the page: under a heading, between columns, above the footnotes. Its weight is measured in points, and it is as much a design choice as a typeface.

In this issue

heavy rule

The last ferry to Holm6

hairline

Salt marsh18

A year of tides30

Mending nets42

Letters54

A heavy rule closes off the heading; hairlines between the features lead the eye across to the page numbers.

NotBorder: rules on all four sides of something, which make it a box.

SayIn the Lowtide contents, use a 2 pt rule under the heading and hairlines between the features.

Next7Pictures