E — Editorial · GRAYNODE A

The style

Made for the turn of the page.

Robert Bringhurst puts a comfortable line at 45 to 75 characters, with 66 the ideal. The essay here is set to that.

Editorial design comes from the magazine, where an art director sets words and pictures for a reader who turns pages. Its unit is the spread, two facing pages seen as one. Its beat is the turn: an issue is a run of spreads, some loud and some quiet, and someone decides the order.

Alexey Brodovitch, art director of Harper’s Bazaar from 1934 to 1958, set the terms. He treated each spread as one composition of photograph, Bodoni and white space, cropped pictures hard and off centre, and paced an issue like a piece of music, changing size and weight from one spread to the next.

A screen has no page to turn, but the rest carries over. Text sits on a measure of 45 to 75 characters. Every piece keeps the same order: kicker, headline, standfirst, body, and a caption under each picture. Pictures are cropped for what they say. And the page is paced, a loud opener against long, quiet reading, with room left for a picture to land.

In use

FORMA Journal, issue 07.

The studio’s online journal, read in a desktop browser. Browse the issue by section, open a piece and read it at your own size, save it for later, and look the work up in the project index.

The contentsIssue 07, Courtyards. Every piece with its kicker, headline, standfirst and reading time, filtered by section: Living, Gathering or Retreat.
The readerOne piece on a measure: a drop cap, a pull quote, a captioned figure, and sidenotes that light up beside their mark. Three text sizes, and a place to save it.
The project indexThe studio’s work as a plain table of project, place, year and status, sorted by whichever column you ask.

F / FORMAJournalIssue 07 · Courtyards · Autumn 2026

Issue 07 · Autumn 2026

Courtyards

Six pieces on the open room at the middle of a house: who it is for, where the sun falls in it, and what it is made of.

Edited by Inês Moura

In this issue

Living · House study

A private world organised around light, open air, and a moment of stillness.

2 min read

Living · Drawing
Ninety centimetres of roof, worked out from the latitude, keep the summer out of the courtyard house and let the winter all the way in.
2 min read
Gathering · Neighbourhood
An inviting shared space that makes connection feel natural.
2 min read
Gathering · Conversation
Clara Vidal and Rui Almeida, who founded FORMA, on why a room starts with where people sit, and the bench they keep on drawing.
2 min read
Retreat · House study
A restrained material palette that lets daily rituals take centre stage.
2 min read
Retreat · Material
Stone, lime, oak and water. Why the studio holds every house to four materials, and what the limit gives back.
2 min read

See the FORMA site

The kit

Every part, every state.

The parts the journal is built from: one deep-green button, fields on a hairline, kickers and captions in the grotesk, and square corners throughout. Rows of states hold still for comparison; everything else works.

Button

One green button to a view, a rule round the type for the rest, and focus a 3px green ring set clear of the part

Text field

Email, for the letterOne letter a season, when the issue is out.

Select

Read an issueAutumn 2026. Six pieces, out now.

Switch, checkbox, radio

Email me when issue 08 is out

Print the sidenotes with the piece

Your copyOnline onlyPrint and online

Radius 0: a box, a radio and a switch are all square

Slider

Leading, for 18px type18 / 28

The rooms sit on three sides of it, one room deep, so every room has the court on one side and a garden wall on the other.

Progress

Segments and tabs

The courtyard house2 min

Where the sun falls2 min

List rows

- The courtyard housep. 4 · 2 min
- Four materials, and no morep. 12 · 2 min

Icons at 16 in captions, 20 in rows, 24 beside headlinesRule weights: 1px sage between rows, 1px ink to open a section, 2px green for the one chosen

Card and loading

Living · House study

A private world organised around light, open air, and a moment of stillness.

Words by Inês Moura2 min read

Kicker, headline, standfirst, byline: the order of every storyThe headline is the one control, and the whole card is its target; it opens on the first paragraphSpacing steps in quarters of the baseline: 7, 14, 21, 28, 42, 56, 84, 112The skeleton holds still; it doesn’t shimmer

Toast

Stays five seconds, and waits while you point at it or tab to it

Modal

A sheet on a veil of the ink. Escape or the × keeps the list

Steps

Done:Brief
Done:Draft
03Edit
04Proof
05Press

Step 3 of 5. Read twice: once for sense, once for length.

Badges and avatars

Inês MouraEditor
Tomás FariaWriter, drawings
Marta LoboWriter, materials

Signature

Pace the issue.

A flatplan is the whole issue on one sheet, sixteen pages laid out as spreads, so an editor can see its pace before anything is made. Each spread is loud or quiet. Move them about, by drag or with the keys; the line beneath draws the rhythm, and a note says when three loud ones run together or the text runs on without a breath.

The flatplan: issue 07, sixteen pages

Page 1, the cover. It stays put.
Page 16, the back page. It stays put.

The pace is good: no three loud or three quiet spreads run together

Opener “The courtyard house”, pages 4–5

Drag a spread to move it, or choose one and move it with Earlier and Later. With the keys, Space or Enter picks up the spread in focus, ← and → move it, Space or Enter puts it down, and Esc puts it back where it was.

At sizeOpener, loudThe courtyard housePages 4–5The photograph across both pages, with the headline set over it on a panel of green.

Tokens

The system, in numbers.

Ten colours with their contrast, one serif in two optical sizes and its italic, a grotesk for the small print, a measure, a 28px baseline and the space it divides into, and three speeds. Copy them as custom properties, with the standfirst, the drop cap and the caption.

Colour, with contrast against paper

--paper #eff0eaPaper: the page and its margins
--sheet #f8f8f4Sheet: the cover, frames, fields
--wash #e3e6ddWash: wells and tracks
--rule #a7b3a2Sage rule: hairlines, never type
--ink #25372cInk: headlines and text, 11.0:1
--ink-2 #55625aSecond ink: captions and folios, 5.6:1
--green #263b2dDeep green: buttons, the band, chosen, 10.5:1
--pale #edf2e7Pale: type on green, 10.6:1
--mark #dde5cfMark: a lit sidenote, ink on it 9.7:1
--proof #9a3b26Proof red: corrections and errors, 6.1:1

Type

The courtyard houseNewsreader 400, opsz 72 · headlines
A private world organised around light.Newsreader 400, opsz 18 · text, 18 / 28
Open air, and a moment of stillness.Newsreader italic · standfirsts
LivingSchibsted Grotesk 600 · kickers
The courtyard at four in the afternoon.Schibsted Grotesk 400 · captions
FORMA Journal · Issue 07 · 12Schibsted Grotesk, tabular figures · folios

Measure and leading

Role	Size / leading	Line
Headline	40–64 / 1.06	Two or three lines, never more
Standfirst	21 / 28	About 50 characters
Text	18 / 28	66 characters, never past 75
Sidenote	14 / 21	About 35 characters
Caption	13 / 21	The width of its picture

Sizes in pixels. Text and standfirst share the 28px baseline; captions and sidenotes sit on three quarters of it.

Space, in quarters of the baseline

7px · ¼ line
14px · ½ line
21px · ¾ line
28px · 1 line
42px · 1½ lines
56px · 2 lines
84px · 3 lines
112px · 4 lines

Motion

Turn600msOne spread giving way to the next
Settle900msThe cover and pictures finding their crop
Mark180msA sidenote lighting up by its mark

:root {
  /* Paper and ink */
  --paper: #eff0ea;
  --sheet: #f8f8f4;
  --wash: #e3e6dd;
  --rule: #a7b3a2; /* lines only, never type */
  --ink: #25372c;
  --ink-2: #55625a;

  /* FORMA green, and what sits with it */
  --green: #263b2d;
  --pale: #edf2e7;
  --mark: #dde5cf;
  --proof: #9a3b26;

  /* Type */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --measure: 27.5em; /* about 66 characters of text */

  /* A 28px baseline, spaced in quarters */
  --baseline: 28px;
  --space-1: 7px;
  --space-2: 14px;
  --space-3: 21px;
  --space-4: 28px;
  --space-5: 42px;
  --space-6: 56px;
  --space-7: 84px;
  --space-8: 112px;

  /* Edges: hairlines and square corners */
  --hairline: 1px solid var(--rule);
  --radius: 0;

  /* Motion */
  --turn: 600ms cubic-bezier(0.65, 0, 0.35, 1);
  --settle: 900ms cubic-bezier(0.16, 1, 0.3, 1);
  --mark-in: 180ms ease-out;
}

/* The italic sentence between headline and text */
.standfirst {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 21px;
  line-height: var(--baseline);
  max-width: 20em; /* about 50 characters */
}

/* A drop cap three lines deep, sunk into the text */
.dropcap::first-letter {
  -webkit-initial-letter: 3;
  initial-letter: 3;
  margin-right: 0.12em;
  font-variation-settings: 'opsz' 72;
  color: var(--green);
}
@supports not ((initial-letter: 1) or (-webkit-initial-letter: 1)) {
  .dropcap::first-letter {
    float: left;
    margin: 0.06em 0.1em 0 0;
    font-size: 3.5em;
    line-height: 0.8;
  }
}

/* Every picture says what it is, underneath */
.caption {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 21px;
  color: var(--ink-2);
}

Do

Set text on a measure: 45 to 75 characters a line, wherever the window happens to end.
Give every piece the same order. Kicker, headline, standfirst, body, caption; readers learn it once.
Crop each picture for what it has to say, then say what it is underneath.
Pace the page. One loud opener, then quiet reading, then a picture given room to breathe.
Divide with hairlines and margins, not boxes. Let the grid show; hide the furniture.

Don’t

Don’t set everything loud
Four headlines at one size make no headline at all. Let one speak up and the rest stay quiet.
Don’t drop pictures in as they come
A photograph fitted to its box, with nothing under it, says nothing. Crop it on purpose and caption it.
Don’t run lines past the measure
At 120 characters the eye loses its way back to the next line. Keep the column narrow and the margin wide.

In the wild

Where the style shows up outside this page.

Harper’s Bazaar
Alexey Brodovitch · 1934–1958Each spread one composition of photograph, Bodoni and white space, and each issue paced like music.
twen
Willy Fleckhaus · 1959–1971Black covers, a twelve-column grid, and black-and-white photographs cropped tight or blown up across the spread.
Snow Fall: The Avalanche at Tunnel Creek
John Branch, The New York Times · 2012A long read with video, maps and graphics set into the scroll; it won the 2013 Pulitzer for feature writing.
Kinfolk
Nathan Williams, Katie Searle-Williams, Doug and Paige Bischoff · 2011Daylight photographs held in wide white margins, and room left empty on purpose: the quiet end of the form.

E — Editorial

Made for the turn of the page.

FORMA Journal, issue 07.

The courtyard house

Where the sun falls

The neighbourhood room

Draw the table first

The quiet residence

Four materials, and no more