Swiss / International Typographic Style in CSS: Grid, Type, White Space

What Swiss Design Actually Is (and Why It Maps So Well to CSS)

Swiss design — formally the International Typographic Style — came out of Zurich and Basel in the 1940s and 50s. Josef Müller-Brockmann, Armin Hofmann, Emil Ruder. The core idea is dead simple: let the grid do the work, let the type breathe, cut every decorative element that isn't doing a job. What's left is a layout that communicates without noise.

Here's the thing most developers miss — this style wasn't born from aesthetic preference. It was born from constraint. Print designers working at small shops needed systems that could reproduce consistently across media. Sound familiar? That's literally what CSS is for.

Honestly, Swiss design principles translate to CSS more naturally than any other historical style. The mathematical column grid becomes CSS Grid. The strict typographic hierarchy becomes a modular scale with clamp(). The aggressive white space becomes deliberate margin and padding tokens. You're not approximating the style — you're implementing the same underlying logic in a new medium.

Worth noting: most "minimalist" UI trends you see today are lazy Swiss design. They borrow the white space and lose the grid discipline underneath. Once you understand the real system, you'll spot the fakes immediately.

Building the Swiss Grid in CSS

The Swiss grid is a modular grid — columns AND rows, both equal, with consistent gutters. Müller-Brockmann wasn't using 12 columns arbitrarily; he was dividing the page into units that could be multiplied. In CSS Grid this is almost embarrassingly direct to replicate.

Start with a base unit. 8px is the standard in 2026, but the Swiss masters would have used something like 5mm in print. Pick one number and derive everything from it. Your column count, your gutter, your row height — all multiples of that base.

:root {
  --unit: 8px;
  --cols: 12;
  --gutter: calc(var(--unit) * 2); /* 16px */
  --col-width: calc((100% - (var(--cols) - 1) * var(--gutter)) / var(--cols));
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: var(--gutter);
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: calc(var(--unit) * 3);
}

That --col-width custom property is worth keeping around even if Grid makes it implicit. You'll use it when you need to calculate exactly how wide a 4-column span is for something outside the grid flow — a full-bleed image, a sidebar offset, a sticky element.

In practice, Swiss layouts almost always use an asymmetric column assignment. Not symmetric 6+6, but 3+9 or 2+10 — a narrow navigation/label column alongside a wide content column. This is the signature tension that makes the layouts feel decisive rather than timid. Try it: grid-column: 1 / 4 for your label, grid-column: 4 / -1 for your content. The imbalance reads as intentional immediately.

Typographic Scale the Swiss Way

Emil Ruder said typography has one duty above all — to convey information in writing. Not to decorate, not to express personality. Information. That constraint forces you to build a real hierarchy instead of picking font sizes by feel.

The Swiss approach uses a small number of sizes — often just 2 or 3 in a single composition — with contrast doing the work instead of variety. You're not stacking h1 through h6 with incrementally different sizes. You're using one large size, one body size, and one small size for labels. The gap between them is large and deliberate.

:root {
  /* Modular scale ratio 1.414 — the augmented fourth */
  --text-xs:   0.707rem;  /* ~11px */
  --text-sm:   1rem;      /* 16px base */
  --text-md:   1.414rem;  /* ~23px */
  --text-lg:   2rem;      /* 32px */
  --text-xl:   2.827rem;  /* ~45px */
  --text-2xl:  4rem;      /* 64px */

  --leading-tight:  1.1;
  --leading-body:   1.5;
  --leading-loose:  1.8;
}

h1 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p {
  font-size: var(--text-sm);
  line-height: var(--leading-body);
  max-width: 65ch; /* the Swiss 'measure' — never let lines run wider */
}

.label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: var(--leading-tight);
}

That max-width: 65ch on paragraphs is non-negotiable. The Swiss designers obsessed over the measure — the width of a line of text. Too wide and the eye loses its place. Ruder wrote about this in detail in *Typographie* (1967). The ch unit makes it font-relative, which is exactly what you want. See typography-scale-css and fluid-typography-clamp for more on building the scale itself.

Quick aside: the Swiss favored Akzidenz-Grotesk and later Helvetica not because of brand identity, but because neutral sans-serifs get out of the way of the content. For web, Inter or DM Sans gets you the same neutrality without the licensing headache. If you're using a display typeface for a heading, pair it with something invisible for body text — don't fight yourself.

White Space Is Not Empty Space

Every junior dev who discovers Swiss design thinks white space means 'add more padding.' That's wrong. White space in Swiss typography is active. It creates implied structure, directs the eye, and signals hierarchy without a single extra element. The space between sections is as designed as the type.

The way to think about it: every white space value should be derivable from your base unit. Not margin-top: 37px because it looked right. margin-top: calc(var(--unit) * 5) — 40px — because it's five units and the section above it uses three, so the relationship is meaningful.

:root {
  --space-1:  calc(var(--unit) * 1);   /* 8px */
  --space-2:  calc(var(--unit) * 2);   /* 16px */
  --space-3:  calc(var(--unit) * 3);   /* 24px */
  --space-4:  calc(var(--unit) * 4);   /* 32px */
  --space-6:  calc(var(--unit) * 6);   /* 48px */
  --space-8:  calc(var(--unit) * 8);   /* 64px */
  --space-12: calc(var(--unit) * 12);  /* 96px */
  --space-16: calc(var(--unit) * 16);  /* 128px */
}

.section {
  padding-block: var(--space-16);
}

.section + .section {
  border-top: 1px solid currentColor;
  margin-top: 0; /* the padding handles it — no double-stacking */
}

.heading-group {
  margin-bottom: var(--space-8);
}

That border-top: 1px solid currentColor trick is very Swiss. A single hairline separates content areas without introducing a second color or a decorative element. It's structural, not stylistic. Inherit the color so it works on any background.

Look, the hardest part of Swiss white space in UI is resisting the urge to fill it. You'll have a stakeholder who says the page 'feels empty.' That reaction means the white space is working — it's creating tension. The content that does exist has more weight because it's surrounded by nothing. That's the whole point. If everything is equally prominent, nothing is.

Color in Swiss Design: One Accent, Maximum Two

Original Swiss design was often black and white with a single accent — frequently red. Not because red is special, but because limitation forces discipline. When you only have one color to work with, every use of it becomes a decision. Compare that to a UI with twelve brand colors where nothing stands out because everything is colored.

For CSS this means a strict token set. One neutral scale, one accent, maybe one semantic state color. That's it. The glassmorphism components page uses a similar discipline — the frosted surface effect only works because the content behind it is carefully controlled.

:root {
  /* Neutral scale */
  --color-black:    #0a0a0a;
  --color-900:      #1a1a1a;
  --color-700:      #444;
  --color-400:      #999;
  --color-100:      #f2f2f2;
  --color-white:    #ffffff;

  /* Single accent */
  --color-accent:   #d42b2b; /* Swiss red */

  /* Assignments */
  --fg:             var(--color-black);
  --bg:             var(--color-white);
  --fg-muted:       var(--color-700);
  --border:         var(--color-900);
}

The accent goes on exactly three things: the primary interactive element (your main CTA), the active/selected state in navigation, and optionally a decorative rule above a major heading. Three uses. If you're tempted to add a fourth, ask what you're removing from the first three.

Worth noting: Swiss poster work did use full color when the brief called for it — think Müller-Brockmann's concert posters. The rule isn't 'no color,' it's 'no color without a job.' If you need to express a visual style with more color saturation, styles like neumorphism or aurora might be a better fit for your project than strict Swiss. Know which system you're in.

Responsive Swiss: Keeping the System Intact on Small Screens

Here's where a lot of Swiss-inspired UIs fall apart. The grid collapses, the type scale flattens, and suddenly you're looking at a generic mobile layout with none of the Swiss character. The fix is to scale the system, not abandon it.

On small screens, reduce to a 4-column grid. Keep the gutter proportional. Use clamp() to keep the type scale alive without a forest of breakpoints. The key property to protect is the measure — 65ch on desktop becomes 55ch on mobile, not unrestricted.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(8, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

h1 {
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

p {
  max-width: min(65ch, 100%);
}

The min(65ch, 100%) is a small trick that prevents the measure constraint from causing horizontal overflow on tiny viewports. It's one of those things that just saves you a bug report.

One more thing — the asymmetric column assignments that make Swiss layouts distinctive need to adapt at mobile. A 2+10 layout collapses to a stacked 4+4 (full bleed on mobile). Use CSS Grid's named lines or grid-column: span 4 at mobile breakpoints and reset to the asymmetric assignment at desktop. Don't fight the responsive model; work inside it. The grid discipline you've built into your tokens carries through even when the visual expression changes.

Putting It Together: A Swiss-Style Article Layout

Let's make this concrete. An article page is the perfect testbed for Swiss principles — you have a clear content hierarchy, you need controlled measure, and the temptation to add decorative elements is always there waiting to ruin it.

.article-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gutter);
  padding-block-start: var(--space-16);
}

.article-eyebrow {
  grid-column: 1 / 4;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  /* Aligns the label baseline with the h1 */
  padding-block-start: 0.6em;
}

.article-title {
  grid-column: 4 / -1;
  font-size: clamp(2.5rem, 4vw + 1rem, 4rem);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  font-weight: 700;
}

.article-meta {
  grid-column: 1 / 4;
  font-size: var(--text-xs);
  color: var(--fg-muted);
  padding-block-start: var(--space-2);
}

.article-body {
  grid-column: 4 / 10; /* 6-column content area */
  margin-block-start: var(--space-8);
}

.article-body p + p {
  margin-block-start: var(--space-4);
}

.article-aside {
  grid-column: 11 / -1;
  margin-block-start: var(--space-8);
  font-size: var(--text-xs);
  color: var(--fg-muted);
  border-top: 2px solid var(--color-black);
  padding-block-start: var(--space-2);
}

That eyebrow-title split — label in column 1-3, heading in column 4-12 — is a direct Swiss move. The label column is narrow enough to feel like a structural annotation rather than a competing heading. The title dominates the remaining space without fighting for it.

You can generate the accent color and supporting tones using the gradient generator to make sure your reds or blues sit correctly in the value range your neutrals expect. Swiss design isn't about which red — it's about whether that red is lighter or darker than your body text. Get the value relationships right and the hue almost doesn't matter.

For the component-level stuff — cards, buttons, form inputs built inside this grid system — browse components at Empire UI. Most of them already respect an 8px base unit under the hood, so snapping them into a Swiss grid doesn't require restyling from scratch.

FAQ

Read next