Week 03 · Foundations

Grid composition

Decorated composition

Helvetica Is a Weapon

Same fictional concert, same three facts — hall, dates, price. One poster is built on a grid. One is decorated. Before you read a single word, which one already told you more?

Predict

Which poster gets a stranger to WHAT and WHEN fastest?

Experience

The Type Scale Table

Five roles. One page. Four numbers underneath it, and none of them are a color.

Every size below is base × ratio^n for a fixed exponent n per role — headline highest, caption lowest, body at n = 0. Move the ratio or the weight contrast and every size and every weight moves together, because that relationship, not any individual pixel value, is the actual design decision (dossier Part 2.5, Part 7). Watch the numbered badges: they mark the modelled order an eye is predicted to scan the five roles in, live.

The Type Scale Table

Four numbers. No color, no image.

Ship faster.

Built for teams that already move quickly.

Every release goes out the moment its tests pass, with a rollback one click away and a changelog nobody has to write by hand.

No credit card required.

Numbers mark modelled scan order — Headline first

Hierarchy steps: 5 of 5; distinct rendered sizes
Scan order: Headline → Deck → CTA → Body → Caption; matches document order
Line length: 72 ch; within 45–75
Reads itself: Yes

Scale ratio1.333

1.1251.618

Base size16px

Weight contrast+300

nonemaximum

Alignment

Scan order is modelled, not measured: each role’s rendered size is multiplied by a weight factor, a fixed color-signal bonus for the CTA’s accent and penalty for the caption’s muted tone, and — when alignment is centred — a penalty on the headline and deck alone, following the dossier’s own claim that centering “can flatten hierarchy.” “Reads itself” requires that modelled order to match the page’s own top-to-bottom document orderand the body copy’s line length to land in the 45–75 character window, a typographic convention the dossier’s variant files cite (character count itself is modelled against a fixed 600px reading column, not this lab’s own rendered width).

Concept

Five Rules, One Reason

Every one of the Swiss Style’s surface habits traces back to a single postwar problem: a small, four-language country and its export trade needed communication that didn’t depend on any one reader’s taste, or language.

The grid is the invisible skeleton: every column width, image placement and headline position derives from one mathematical system laid down before content arrives, so dozens of posters or screens can share a system without re-deriving it each time. Objective typography means a single sans-serif family carrying hierarchy through size and weight alone — Emil Ruder’s own position was that typography’s purpose was communication, which “did not exclude aesthetic effects” but drew a hard line against play that cost legibility. Photography over illustration follows the same logic: a photograph reads as evidence, an illustration as a point of view — which is why a real product screenshot still beats a decorative graphic in a hero image today.

Asymmetric hierarchy replaces borders and boxes with position on the grid itself, set flush-left by default — not only for the directional tension the Hook just demonstrated, but because the W3C’s WCAG 2.1 guidance (Success Criterion 1.4.8, an AAA-level, not baseline, criterion) specifically warns that justified text produces “rivers of white” that disrupt reading for people with cognitive or reading disabilities. And reduction is the discipline underneath all of it: remove anything that carries no information, because every non-informational element competes with the ones that do.

Design as the organisation of information that is semantically correct, syntactically consistent, and pragmatically understandable — visually powerful, intellectually elegant, and above all timeless.

Massimo Vignelli — verified, per his own definition on record

Vignelli and Bob Noorda applied exactly this discipline to New York’s subway wayfinding system in 1966 — a documented bridge from Swiss print discipline to systems still in daily use today.

Deconstruction

One Variable at a Time

Hold the base size and the weight contrast still. Move only the ratio.

At a Minor Second the five roles barely separate — the “scale” is a scale in name only. By the Golden Ratio the headline has compounded four steps of a 1.618 leap and the page is almost entirely headline. Somewhere in between sits the dossier’s own worked example, 1.25 (Part 7) — and the step this scrubber starts on, 1.333, a step further still.

Same page, one variable

Ship faster.

Built for teams that already move quickly.

Every release goes out the moment its tests pass, with a rollback one click away and a changelog nobody has to write by hand.

No credit card required.

Scale ratio

Minor 2ndGolden

Major 3rd — 1.250 — dossier Part 7's own example

Headline 39.1px · Deck 25px · Body 16px · 5 of 5 sizes distinct

Real World

One Hero, Rebuilt

The dossier’s own worked example (Part 10): the same landing-page hero, once decorated, once disciplined.

The decorated version centers everything, replaces evidence with an abstract gradient, and spends three accent colors on three different actions. The rebuild keeps one claim, one proof and one action — headline and CTA flush-left, a real product view (not decorative art) taking the remaining columns, one accent reserved for the single thing that converts.

Ship faster.
Deploy anywhere.

The platform built for modern teams — instant deploys, global edge, built-in analytics.

Ship faster.

One claim. One proof. One action — nothing else competes for the first glance.

real product view

The typeface pipeline behind this — Akzidenz-Grotesk (1898) to Helvetica and Univers (1957) to today’s system fonts — is documented. The resemblance between this rebuild and contemporary typography-driven landing pages (Linear- and Stripe-style developer marketing sites) is the dossier’s own labelled inference: a structural analogy, not a proven causal chain — no evidence there that CSS Grid or Tailwind’s spacing scale were built with Müller-Brockmann in mind (dossier Part 5).

Experiment

Remove Everything But Type

Strip a landing page down to see what the hierarchy alone can carry.

Four of the eight elements below are decoration: a photograph, a gradient wash, an icon row, a decorative shape. Four are the type roles themselves. Tap anything to remove it — the ledger reports exactly what survives.

Ship faster.

Built for teams that already move quickly.

Every release goes out the moment its tests pass, with a rollback one click away.

Tap any element above — hero image, icons, shape, or the type itself — to remove it.

0/8 removed

Challenge · Fix the tie

Open

Three lines, same size, same weight — nothing leads. Adjust size and boldness until exactly one clearly leads, one supports, and one goes quiet.

Ship faster.tied

Built for teams that already move quickly.tied

From $9/mo, cancel anytime.tied

Element A

Size22px

Element B

Size22px

Element C

Size22px

A gap has to clear about 15% in modelled prominence before it reads as a real tier, not a rounding error.

Insight

Hierarchy is a decision made before colour or image exists.

Every act on this page just computed a full, working hierarchy — a leader, a support, a quiet line — from two numbers: a ratio and a weight. No color was ever part of the calculation. That is Karl Gerstner’s “programme” made literal: a fixed, small rule set that generates the family of decisions a designer would otherwise re-make on every screen. An accent color can reinforce a hierarchy that already exists. It cannot manufacture one that a tied scale never decided.

Mental model

Whenever a layout feels flat and you reach for a new accent color to fix it,

look for tied type sizes and weights first — not a missing color,

because scale and weight are decided before color exists, and a tie at that layer cannot be repaired downstream.

TomorrowGrayscale a screen you own. If you can still tell what to read first, your hierarchy was never about color. If you can't, no accent will fix it — the scale and the weight have to move.

End of experience

← Back to the constellation

Helvetica Is a Weapon

The Type Scale Table

Five Rules, One Reason

One Variable at a Time

One Hero, Rebuilt

Remove Everything But Type

Where this idea goes next

Helvetica Is a Weapon

The Type Scale Table

Five Rules, One Reason

One Variable at a Time

One Hero, Rebuilt

Remove Everything But Type