Editorial vs Swiss Style
Both are typographic, both use a single accent, both refuse decoration. They disagree about what a page should constrain: the reader's line, or the page's columns.
Short answer: Editorial controls line length — a 17-character headline and a 46-character standfirst. Swiss controls column position — a headline across nine of twelve columns, with the standfirst starting at column seven, deliberately overlapping.
What actually separates them
These two are the closest pair in the gallery in spirit and the furthest apart in method. Editorial is a single column with hard limits on how wide any text may run; Swiss is a twelve-column grid where the interest comes from where blocks start and how far they span.
That means they fail differently. Editorial collapses when content refuses to be narrow — a wide table, a code block, a four-up card row. Swiss collapses when the grid is dropped at a narrow breakpoint and everything simply stacks, because the asymmetry was the only idea the layout had.
Decision table
A filled dot marks the side that handles the dimension more convincingly. It is a judgement, not a rule — several rows are genuinely a tie.
| Dimension | Editorial / Magazine | Swiss Style / International Typographic Style |
|---|---|---|
| Layout constraint | Line length: 17ch headline, 46ch standfirst, 32ch card copy | Column position: 1/span 9 headline, 7/span 5 standfirst |
| Typeface | ● Serif display against sans body | Helvetica, one family throughout |
| Grid | Single column, collapsed by default | ● Twelve columns, used asymmetrically |
| Accent | One colour on links and rules | One red, appearing twice on the page |
| Labels | Small caps, no tracking | ● Uppercase at 0.1em tracking |
| Density | Generous vertical space, few elements per screen | ● Tighter rows, more content above the fold |
The CSS that changes
These are the declarations that make the difference visible. Everything else — font sizes, spacing, section order — is shared, because both pages use the same markup.
| Property | Editorial / Magazine | Swiss Style / International Typographic Style |
|---|---|---|
| Headline | max-width: 17ch |
grid-column: 1 / span 9 |
| Standfirst | max-width: 46ch |
grid-column: 7 / span 5 |
| Type | serif headings, sans body |
Helvetica for everything |
| Labels | font-variant: small-caps |
text-transform: uppercase; letter-spacing: .1em |
When each one wins
Editorial / Magazine wins when
- The page is read rather than scanned — an essay, a case study, a long product story
- The content is text-first and there is little data to lay out
- You want a warm, unhurried voice and the site has few competing elements
Swiss Style / International Typographic Style wins when
- The page must carry several kinds of content on one screen — numbers, cards, a list, a quote
- You want the layout itself to look designed without adding colour or decoration
- The brand is institutional, technical or financial, where Helvetica reads as competence
Steering a model to one or the other
Ask for a measure for editorial and column spans for Swiss — not the other way round. A model told to build an editorial page without a measure will produce the browser default of roughly 140 characters, and a model told to build Swiss without column spans will produce a single centred column that looks like a blog. Both styles are decided by one line of constraint, and it is a different line in each case.