1010 lines
33 KiB
HTML
1010 lines
33 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Haus der Form — Ordnung: Swiss Design 1950–1980</title>
|
||
<meta name="description" content="Ordnung — Swiss graphic design 1950–1980. 212 posters, 47 books, one argument. 12 September 2026 – 10 January 2027, Galerie 2, Haus der Form, Basel.">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ============================================================
|
||
HAUS DER FORM — Ordnung: Swiss Design 1950–1980
|
||
Style: Swiss / International Typographic (aesthetics.md §3)
|
||
Palette: white surface, pure black ink, one red accent
|
||
Typography: Archivo (display + text) + IBM Plex Mono (meta)
|
||
JavaScript: none — HTML and CSS only
|
||
============================================================ */
|
||
|
||
:root {
|
||
--surface: #FFFFFF;
|
||
--ink: #000000;
|
||
--accent: #D62828;
|
||
|
||
--font-display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
--font-text: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||
--font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
|
||
|
||
--text-xs: 0.6875rem;
|
||
--text-sm: 0.8125rem;
|
||
--text-base: 1rem;
|
||
--text-md: 1.125rem;
|
||
--text-lg: 1.375rem;
|
||
--text-xl: 1.75rem;
|
||
--text-2xl: 2.25rem;
|
||
--text-3xl: 3rem;
|
||
|
||
--lead-tight: 1.05;
|
||
--lead-snug: 1.2;
|
||
--lead-normal: 1.5;
|
||
|
||
--track-tightest: -0.04em;
|
||
--track-tight: -0.02em;
|
||
--track-wide: 0.06em;
|
||
--track-widest: 0.12em;
|
||
|
||
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
|
||
--sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
|
||
--sp-9: 96px; --sp-10: 128px;
|
||
|
||
--pad-inline: clamp(20px, 5vw, 64px);
|
||
--rule: 1px solid var(--ink);
|
||
--rule-strong: 2px solid var(--ink);
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
|
||
html { -webkit-text-size-adjust: 100%; }
|
||
|
||
body {
|
||
margin: 0;
|
||
font-family: var(--font-text);
|
||
font-size: var(--text-base);
|
||
line-height: var(--lead-normal);
|
||
color: var(--ink);
|
||
background: var(--surface);
|
||
font-feature-settings: 'kern' 1, 'liga' 1;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
text-rendering: optimizeLegibility;
|
||
}
|
||
|
||
::selection { background: var(--accent); color: var(--surface); }
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
border-bottom: 1px solid var(--ink);
|
||
padding-bottom: 1px;
|
||
transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease;
|
||
}
|
||
a:hover { color: var(--accent); border-color: var(--accent); }
|
||
a:focus-visible {
|
||
outline: 2px solid var(--accent);
|
||
outline-offset: 3px;
|
||
border-bottom-color: transparent;
|
||
}
|
||
|
||
.mono { font-family: var(--font-mono); }
|
||
|
||
.sr-only {
|
||
position: absolute; width: 1px; height: 1px; padding: 0;
|
||
margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
|
||
white-space: nowrap; border: 0;
|
||
}
|
||
|
||
.skip-link {
|
||
position: absolute; left: var(--sp-4); top: var(--sp-4);
|
||
transform: translateY(-200%);
|
||
background: var(--ink); color: var(--surface);
|
||
padding: var(--sp-3) var(--sp-4);
|
||
font-family: var(--font-mono); font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide); text-transform: uppercase;
|
||
border-bottom: 0; z-index: 10;
|
||
}
|
||
.skip-link:focus { transform: none; }
|
||
.skip-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
|
||
|
||
/* ----- Masthead --------------------------------------------------- */
|
||
|
||
.topbar {
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
gap: var(--sp-5);
|
||
align-items: center;
|
||
padding: var(--sp-4) var(--pad-inline);
|
||
border-bottom: var(--rule-strong);
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--sp-3);
|
||
border-bottom: 0;
|
||
}
|
||
.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
|
||
|
||
.brand__mark {
|
||
width: 30px; height: 30px;
|
||
background: var(--accent);
|
||
color: var(--surface);
|
||
display: grid; place-items: center;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
letter-spacing: 0;
|
||
}
|
||
.brand__name {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-base);
|
||
font-weight: 700;
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
line-height: 1.1;
|
||
}
|
||
.brand__sub {
|
||
display: block;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 400;
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.topbar__place {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
text-align: center;
|
||
}
|
||
|
||
.topbar__date {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
text-align: right;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
/* ----- Primary navigation ------------------------------------------ */
|
||
|
||
.primary {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: var(--sp-6);
|
||
padding: var(--sp-3) var(--pad-inline);
|
||
border-bottom: var(--rule);
|
||
}
|
||
.primary a {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
border-bottom: 0;
|
||
padding: var(--sp-2) 0;
|
||
}
|
||
.primary a span { color: var(--accent); margin-right: var(--sp-2); }
|
||
.primary a:hover { color: var(--accent); }
|
||
.primary a:focus-visible { outline-offset: -2px; }
|
||
|
||
/* ----- Hero --------------------------------------------------------- */
|
||
|
||
.hero {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
|
||
column-gap: clamp(32px, 6vw, 96px);
|
||
padding: var(--sp-9) var(--pad-inline) var(--sp-8);
|
||
align-items: start;
|
||
}
|
||
|
||
.hero__meta {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
margin: 0 0 var(--sp-5);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.hero__meta span { color: var(--accent); }
|
||
|
||
.hero__title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2.75rem, 6vw, 4.5rem);
|
||
font-weight: 700;
|
||
letter-spacing: var(--track-tightest);
|
||
line-height: 1;
|
||
margin: 0 0 var(--sp-4);
|
||
max-width: 12ch;
|
||
}
|
||
|
||
.hero__sub {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-tight);
|
||
line-height: 1.2;
|
||
margin: 0 0 var(--sp-6);
|
||
max-width: 24ch;
|
||
}
|
||
|
||
.hero__lede {
|
||
font-size: var(--text-md);
|
||
line-height: 1.5;
|
||
max-width: 42ch;
|
||
margin: 0;
|
||
}
|
||
|
||
/* Index column */
|
||
.hero__index {
|
||
border-left: var(--rule);
|
||
padding-left: clamp(24px, 3vw, 48px);
|
||
display: grid;
|
||
gap: var(--sp-2);
|
||
align-self: stretch;
|
||
}
|
||
.hero__index h2 {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-widest);
|
||
text-transform: uppercase;
|
||
margin: 0 0 var(--sp-3);
|
||
}
|
||
.hero__index ol { list-style: none; margin: 0; padding: 0; }
|
||
.hero__index li + li { border-top: var(--rule); }
|
||
.hero__index a {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
gap: var(--sp-3);
|
||
border-bottom: 0;
|
||
padding: var(--sp-3) 0;
|
||
font-size: var(--text-base);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-tight);
|
||
}
|
||
.hero__index a span {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
color: var(--accent);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.hero__index a::after {
|
||
content: '↓';
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--ink);
|
||
}
|
||
.hero__index a:hover { color: var(--accent); }
|
||
.hero__index a:hover::after { color: var(--accent); }
|
||
|
||
/* Giant numerals — type as image */
|
||
.dates {
|
||
border-top: var(--rule-strong);
|
||
border-bottom: var(--rule);
|
||
padding: var(--sp-5) var(--pad-inline) var(--sp-4);
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: var(--sp-5);
|
||
overflow: hidden;
|
||
}
|
||
.dates__range {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(3.5rem, 14vw, 12rem);
|
||
font-weight: 700;
|
||
letter-spacing: -0.05em;
|
||
line-height: 0.9;
|
||
white-space: nowrap;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.dates__range em {
|
||
font-style: normal;
|
||
color: var(--accent);
|
||
font-weight: 500;
|
||
padding: 0 0.08em;
|
||
}
|
||
.dates__cap {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
text-align: right;
|
||
line-height: 1.7;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
/* ----- Sections (meta-column pattern) ------------------------------- */
|
||
|
||
.section {
|
||
display: grid;
|
||
grid-template-columns: 200px minmax(0, 1fr);
|
||
column-gap: clamp(32px, 5vw, 80px);
|
||
padding: var(--sp-9) var(--pad-inline);
|
||
border-top: var(--rule);
|
||
}
|
||
.section--first { border-top: 0; }
|
||
|
||
.section__no {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
color: var(--accent);
|
||
display: block;
|
||
margin-bottom: var(--sp-2);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.section__label {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-widest);
|
||
text-transform: uppercase;
|
||
display: block;
|
||
}
|
||
.section__note {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
margin-top: var(--sp-5);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/* §01 statement */
|
||
.statement {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(1.5rem, 3.2vw, 2.5rem);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-tight);
|
||
line-height: 1.2;
|
||
max-width: 26ch;
|
||
margin: 0 0 var(--sp-6);
|
||
}
|
||
.statement em {
|
||
font-style: normal;
|
||
color: var(--accent);
|
||
}
|
||
.statement-body {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||
column-gap: clamp(32px, 5vw, 64px);
|
||
max-width: 76ch;
|
||
}
|
||
.statement-body p {
|
||
font-size: var(--text-md);
|
||
line-height: 1.55;
|
||
margin: 0;
|
||
}
|
||
.statement-body p + p { margin-top: 0; }
|
||
.statement-body strong { font-weight: 600; }
|
||
|
||
/* ----- §02 catalogue table ------------------------------------------ */
|
||
|
||
.catalogue {
|
||
width: 100%;
|
||
border-collapse: collapse;
|
||
font-size: var(--text-sm);
|
||
}
|
||
.catalogue caption { text-align: left; margin-bottom: 0; }
|
||
.catalogue th {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
text-align: left;
|
||
padding: 0 var(--sp-3) var(--sp-3) 0;
|
||
border-bottom: var(--rule-strong);
|
||
white-space: nowrap;
|
||
}
|
||
.catalogue td {
|
||
padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
|
||
border-bottom: var(--rule);
|
||
vertical-align: baseline;
|
||
transition: background-color 120ms ease, color 120ms ease;
|
||
}
|
||
.catalogue .num {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
white-space: nowrap;
|
||
}
|
||
.catalogue .designer { font-weight: 600; letter-spacing: var(--track-tight); white-space: nowrap; }
|
||
.catalogue .work { min-width: 16ch; }
|
||
.catalogue .work em { font-style: italic; }
|
||
.catalogue .data {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
white-space: nowrap;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.catalogue tbody tr { transition: background-color 120ms ease, color 120ms ease; }
|
||
.catalogue tbody tr:hover { background: var(--ink); color: var(--surface); }
|
||
.catalogue tbody tr:hover .num { color: var(--accent); }
|
||
.catalogue tbody tr:hover td { border-bottom-color: var(--ink); }
|
||
.catalogue tbody tr:focus-within { background: var(--ink); color: var(--surface); }
|
||
.catalogue tbody tr:focus-within .num { color: var(--accent); }
|
||
.catalogue__foot {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
margin-top: var(--sp-4);
|
||
}
|
||
|
||
/* ----- §03 programme ------------------------------------------------- */
|
||
|
||
.programme { list-style: none; margin: 0; padding: 0; }
|
||
.programme li {
|
||
display: grid;
|
||
grid-template-columns: 130px minmax(0, 1fr) 110px 140px;
|
||
column-gap: var(--sp-4);
|
||
align-items: baseline;
|
||
padding: var(--sp-4) 0;
|
||
border-bottom: var(--rule);
|
||
transition: padding-left 140ms ease;
|
||
}
|
||
.programme li:first-child { border-top: var(--rule-strong); }
|
||
.programme li:hover { padding-left: var(--sp-3); }
|
||
.programme li:hover .programme__title { color: var(--accent); }
|
||
|
||
.programme__date {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.programme__title {
|
||
font-size: var(--text-md);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-tight);
|
||
transition: color 140ms ease;
|
||
}
|
||
.programme__title small {
|
||
display: block;
|
||
font-weight: 400;
|
||
font-size: var(--text-sm);
|
||
letter-spacing: 0;
|
||
margin-top: var(--sp-1);
|
||
}
|
||
.programme__type {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
}
|
||
.programme__status {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
text-align: right;
|
||
}
|
||
.programme__status--open a { color: var(--ink); }
|
||
.programme__status--open a:hover { color: var(--accent); }
|
||
.programme__status--sold { color: var(--accent); }
|
||
|
||
/* ----- §04 visit ------------------------------------------------------ */
|
||
|
||
.visit {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 3fr);
|
||
column-gap: clamp(32px, 5vw, 64px);
|
||
}
|
||
|
||
.hours { border-collapse: collapse; font-size: var(--text-sm); }
|
||
.hours td {
|
||
padding: var(--sp-2) 0;
|
||
border-bottom: var(--rule);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
.hours td:last-child { text-align: right; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--track-wide); }
|
||
.hours tr:first-child td { border-top: var(--rule-strong); }
|
||
.hours .closed { color: var(--accent); }
|
||
|
||
.visit h3 {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-widest);
|
||
text-transform: uppercase;
|
||
margin: 0 0 var(--sp-3);
|
||
}
|
||
.visit p { margin: 0 0 var(--sp-3); font-size: var(--text-sm); }
|
||
.visit dl { margin: 0; font-size: var(--text-sm); }
|
||
.visit dt {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
padding-top: var(--sp-2);
|
||
}
|
||
.visit dd { margin: var(--sp-1) 0 var(--sp-3); font-variant-numeric: tabular-nums; }
|
||
|
||
/* Map — CSS grid artifact */
|
||
.map {
|
||
aspect-ratio: 1 / 1;
|
||
border: var(--rule);
|
||
position: relative;
|
||
background-image:
|
||
linear-gradient(to right, var(--ink) 1px, transparent 1px),
|
||
linear-gradient(to bottom, var(--ink) 1px, transparent 1px);
|
||
background-size: 25% 25%;
|
||
margin-top: var(--sp-2);
|
||
}
|
||
.map::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%; top: 50%;
|
||
width: 12.5%; aspect-ratio: 1 / 1;
|
||
background: var(--accent);
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.map figcaption {
|
||
position: absolute;
|
||
left: var(--sp-2); bottom: var(--sp-2);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
text-transform: uppercase;
|
||
background: var(--surface);
|
||
padding: 2px var(--sp-2) 2px var(--sp-2);
|
||
}
|
||
|
||
/* ----- Colophon ------------------------------------------------------- */
|
||
|
||
.colophon {
|
||
border-top: var(--rule-strong);
|
||
margin-top: var(--sp-9);
|
||
padding: var(--sp-6) var(--pad-inline) var(--sp-7);
|
||
display: grid;
|
||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||
column-gap: clamp(24px, 4vw, 48px);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
letter-spacing: var(--track-wide);
|
||
line-height: 1.8;
|
||
}
|
||
.colophon h2 {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
font-weight: 500;
|
||
letter-spacing: var(--track-widest);
|
||
text-transform: uppercase;
|
||
margin: 0 0 var(--sp-2);
|
||
}
|
||
.colophon p { margin: 0; }
|
||
.colophon a { border-bottom-color: var(--ink); }
|
||
.colophon__claim {
|
||
grid-column: 1 / -1;
|
||
margin-top: var(--sp-6);
|
||
padding-top: var(--sp-4);
|
||
border-top: var(--rule);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: var(--sp-4);
|
||
text-transform: uppercase;
|
||
}
|
||
.colophon__claim span:last-child { color: var(--accent); }
|
||
|
||
/* ----- Responsive ------------------------------------------------------ */
|
||
|
||
@media (max-width: 900px) {
|
||
.hero { grid-template-columns: 1fr; }
|
||
.hero__index {
|
||
border-left: 0;
|
||
padding-left: 0;
|
||
border-top: var(--rule);
|
||
padding-top: var(--sp-5);
|
||
}
|
||
.statement-body { grid-template-columns: 1fr; row-gap: var(--sp-4); }
|
||
.visit { grid-template-columns: 1fr 1fr; }
|
||
.visit__find { grid-column: 1 / -1; }
|
||
.colophon { grid-template-columns: 1fr 1fr; row-gap: var(--sp-5); }
|
||
.colophon__claim { grid-column: 1 / -1; }
|
||
}
|
||
|
||
@media (max-width: 720px) {
|
||
.topbar { grid-template-columns: auto 1fr; }
|
||
.topbar__date { display: none; }
|
||
.section { grid-template-columns: 1fr; row-gap: var(--sp-5); }
|
||
.section__note { margin-top: 0; }
|
||
.dates__cap { display: none; }
|
||
.dates { justify-content: flex-start; }
|
||
.statement-body { max-width: 100%; }
|
||
.visit { grid-template-columns: 1fr; }
|
||
.colophon { grid-template-columns: 1fr; }
|
||
|
||
.catalogue th:nth-child(5),
|
||
.catalogue td:nth-child(5),
|
||
.catalogue th:nth-child(6),
|
||
.catalogue td:nth-child(6) { display: none; }
|
||
|
||
.programme li { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
|
||
.programme__date { grid-column: 1 / -1; }
|
||
.programme__type { display: none; }
|
||
.programme__status { text-align: left; grid-column: 2; grid-row: 2; }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.01ms !important;
|
||
scroll-behavior: auto !important;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<a class="skip-link" href="#main">Skip to content</a>
|
||
|
||
<!-- ====== MASTHEAD ============================================ -->
|
||
<header role="banner">
|
||
<div class="topbar">
|
||
<a class="brand" href="#main" aria-label="Haus der Form — home">
|
||
<span class="brand__mark" aria-hidden="true">HdF</span>
|
||
<span class="brand__name">Haus der Form
|
||
<span class="brand__sub">Museum für visuelle Gestaltung</span>
|
||
</span>
|
||
</a>
|
||
<p class="topbar__place">Rittergasse 11 · CH-4051 Basel</p>
|
||
<p class="topbar__date">MMXXVI · № 214</p>
|
||
</div>
|
||
|
||
<nav class="primary" aria-label="Primary">
|
||
<a href="#exhibition"><span>01</span>Exhibition</a>
|
||
<a href="#catalogue"><span>02</span>Catalogue</a>
|
||
<a href="#programme"><span>03</span>Programme</a>
|
||
<a href="#visit"><span>04</span>Visit</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main id="main">
|
||
|
||
<!-- ====== HERO ================================================ -->
|
||
<section class="hero" aria-label="Ordnung — exhibition introduction">
|
||
<div>
|
||
<p class="hero__meta">
|
||
<span>12 Sep 2026 — 10 Jan 2027</span> · Galerie 2 · Tue–Sun, 10–18
|
||
</p>
|
||
<h1 class="hero__title">Ordnung.</h1>
|
||
<p class="hero__sub">
|
||
Swiss graphic design, 1950–1980. The argument, the posters, the books.
|
||
</p>
|
||
<p class="hero__lede">
|
||
212 posters, 47 books and journals, 14 years of the journal
|
||
<em>Neue Grafik</em> — one proposition: that order is not the
|
||
enemy of expression, but its precondition.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="hero__index">
|
||
<h2>Index</h2>
|
||
<ol>
|
||
<li>
|
||
<a href="#exhibition">The Proposition <span>01</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#catalogue">Catalogue <span>02</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#programme">Programme <span>03</span></a>
|
||
</li>
|
||
<li>
|
||
<a href="#visit">Visit <span>04</span></a>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== GIANT DATES — type as image ========================== -->
|
||
<div class="dates" role="img" aria-label="Exhibition period: 1950 to 1980">
|
||
<p class="dates__range" aria-hidden="true" style="margin:0">1950<em>→</em>1980</p>
|
||
<p class="dates__cap" aria-hidden="true">
|
||
Thirty years.<br>
|
||
Two cities.<br>
|
||
One grid.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- ====== §01 THE PROPOSITION ================================= -->
|
||
<section class="section section--first" id="exhibition" aria-labelledby="exhibition-heading">
|
||
<div class="section__head">
|
||
<span class="section__no">§ 01</span>
|
||
<span class="section__label" id="exhibition-heading">The Proposition</span>
|
||
<p class="section__note">
|
||
Wall text, 340 cm<br>
|
||
Galerie 2, east wall<br>
|
||
Set in Archivo Medium
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<p class="statement">
|
||
The grid divides space. The designer decides what it
|
||
carries. Typography can be <em>loud enough</em> to replace
|
||
illustration — order strict enough to replace decoration.
|
||
</p>
|
||
<div class="statement-body">
|
||
<p>
|
||
Between 1950 and 1980, Basel and Zurich turned a teaching
|
||
method into an international language. Josef Müller-Brockmann
|
||
aligned a Beethoven poster to a grid and Concert Hall
|
||
audiences noticed the poster before the concert. Emil Ruder
|
||
set the measure of a page the way a composer sets tempo.
|
||
</p>
|
||
<p>
|
||
<strong>Ordnung</strong> assembles the evidence: the posters
|
||
that argued, the journals that codified, the teaching
|
||
materials that spread the method from the Allgemeine
|
||
Gewerbeschule to design schools on four continents — and the
|
||
concrete paintings that proved the same rules without a
|
||
single letter.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== §02 CATALOGUE ======================================= -->
|
||
<section class="section" id="catalogue" aria-labelledby="catalogue-heading">
|
||
<div class="section__head">
|
||
<span class="section__no">§ 02</span>
|
||
<span class="section__label" id="catalogue-heading">Catalogue</span>
|
||
<p class="section__note">
|
||
Selected works<br>
|
||
8 of 212<br>
|
||
Full index: 288 pp<br>
|
||
CHF 48
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<table class="catalogue">
|
||
<caption class="sr-only">Selected works from the exhibition catalogue</caption>
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">No.</th>
|
||
<th scope="col">Designer</th>
|
||
<th scope="col">Work</th>
|
||
<th scope="col">Year</th>
|
||
<th scope="col">Technique</th>
|
||
<th scope="col">Format</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td class="num">KAT 001</td>
|
||
<td class="designer">Josef Müller-Brockmann</td>
|
||
<td class="work"><em>Beethoven</em> — Tonhalle-Gesellschaft, Zürich</td>
|
||
<td class="data">1955</td>
|
||
<td class="data">Silkscreen</td>
|
||
<td class="data">128 × 90.5 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 002</td>
|
||
<td class="designer">Josef Müller-Brockmann</td>
|
||
<td class="work"><em>Musica Viva</em> — concert series, 24 posters</td>
|
||
<td class="data">1958–72</td>
|
||
<td class="data">Lithograph</td>
|
||
<td class="data">90 × 64 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 003</td>
|
||
<td class="designer">Armin Hofmann</td>
|
||
<td class="work"><em>Giselle</em> — Stadttheater Basel</td>
|
||
<td class="data">1961</td>
|
||
<td class="data">Lithograph</td>
|
||
<td class="data">90 × 128 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 004</td>
|
||
<td class="designer">Hans Neuburg & Carlo Vivarelli</td>
|
||
<td class="work"><em>Neue Grafik</em> — journal, issues 1–46</td>
|
||
<td class="data">1958–65</td>
|
||
<td class="data">Letterpress</td>
|
||
<td class="data">32 × 24 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 005</td>
|
||
<td class="designer">Richard Paul Lohse</td>
|
||
<td class="work">18 vertikale systematische Farbreihen mit Diagonalen</td>
|
||
<td class="data">1962–68</td>
|
||
<td class="data">Oil on canvas</td>
|
||
<td class="data">100 × 81 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 006</td>
|
||
<td class="designer">Verena Loewensberg</td>
|
||
<td class="work">Ohne Titel (Rhythmus in Rot)</td>
|
||
<td class="data">1968</td>
|
||
<td class="data">Oil on canvas</td>
|
||
<td class="data">80 × 80 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 007</td>
|
||
<td class="designer">Emil Ruder</td>
|
||
<td class="work"><em>Typographie — eine Gestaltungslehre</em></td>
|
||
<td class="data">1967</td>
|
||
<td class="data">Book, 274 pp</td>
|
||
<td class="data">23 × 16 cm</td>
|
||
</tr>
|
||
<tr>
|
||
<td class="num">KAT 008</td>
|
||
<td class="designer">Karl Gerstner</td>
|
||
<td class="work"><em>Designing Programmes</em></td>
|
||
<td class="data">1964</td>
|
||
<td class="data">Book, 118 pp</td>
|
||
<td class="data">24 × 17 cm</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p class="catalogue__foot">
|
||
Full catalogue: <em>Ordnung — Swiss Design 1950–1980</em>, ed. Katrin Widmer, Haus der Form / Verlag Form, 2026
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ====== §03 PROGRAMME ======================================= -->
|
||
<section class="section" id="programme" aria-labelledby="programme-heading">
|
||
<div class="section__head">
|
||
<span class="section__no">§ 03</span>
|
||
<span class="section__label" id="programme-heading">Programme</span>
|
||
<p class="section__note">
|
||
German unless marked<br>
|
||
Register at the desk<br>
|
||
or <a href="mailto:programm@hausderform.ch">programm@hausderform.ch</a>
|
||
</p>
|
||
</div>
|
||
|
||
<ul class="programme">
|
||
<li>
|
||
<span class="programme__date">12 Sep 2026, 18:00</span>
|
||
<span class="programme__title">
|
||
Opening — the curators introduce the argument
|
||
<small>45 min, Galerie 2, followed by apéro</small>
|
||
</span>
|
||
<span class="programme__type">Lecture</span>
|
||
<span class="programme__status programme__status--open"><a href="#visit">Free</a></span>
|
||
</li>
|
||
<li>
|
||
<span class="programme__date">04 Oct 2026, 10:00</span>
|
||
<span class="programme__title">
|
||
One grid, four posters — workshop
|
||
<small>Materials included, limited to 14 places</small>
|
||
</span>
|
||
<span class="programme__type">Workshop</span>
|
||
<span class="programme__status programme__status--open"><a href="#visit">CHF 40 · Register</a></span>
|
||
</li>
|
||
<li>
|
||
<span class="programme__date">22 Oct 2026, 17:30</span>
|
||
<span class="programme__title">
|
||
Ruder's measure — guided tour (EN)
|
||
<small>Reading the exhibition through its typography</small>
|
||
</span>
|
||
<span class="programme__type">Tour</span>
|
||
<span class="programme__status programme__status--open"><a href="#visit">Included</a></span>
|
||
</li>
|
||
<li>
|
||
<span class="programme__date">07 Nov 2026, 19:00</span>
|
||
<span class="programme__title">
|
||
Order and its discontents — panel
|
||
<small>With guests from Zürich and Rotterdam</small>
|
||
</span>
|
||
<span class="programme__type">Panel</span>
|
||
<span class="programme__status programme__status--open"><a href="#visit">CHF 12</a></span>
|
||
</li>
|
||
<li>
|
||
<span class="programme__date">05 Dec 2026, 10:00</span>
|
||
<span class="programme__title">
|
||
Type as image — workshop for ages 12+
|
||
<small>No design experience required</small>
|
||
</span>
|
||
<span class="programme__type">Workshop</span>
|
||
<span class="programme__status programme__status--sold">Sold out</span>
|
||
</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- ====== §04 VISIT ============================================ -->
|
||
<section class="section" id="visit" aria-labelledby="visit-heading">
|
||
<div class="section__head">
|
||
<span class="section__no">§ 04</span>
|
||
<span class="section__label" id="visit-heading">Visit</span>
|
||
<p class="section__note">
|
||
Last entry 30 min<br>
|
||
before closing<br>
|
||
Coat check free
|
||
</p>
|
||
</div>
|
||
|
||
<div class="visit">
|
||
<div>
|
||
<h3>Hours</h3>
|
||
<table class="hours">
|
||
<caption class="sr-only">Opening hours</caption>
|
||
<tbody>
|
||
<tr><td>Tuesday — Friday</td><td>12:00 — 18:00</td></tr>
|
||
<tr><td>Saturday — Sunday</td><td>10:00 — 18:00</td></tr>
|
||
<tr><td>Monday</td><td class="closed">Closed</td></tr>
|
||
<tr><td>25 & 26 December</td><td class="closed">Closed</td></tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div>
|
||
<h3>Admission</h3>
|
||
<dl>
|
||
<dt>Standard</dt>
|
||
<dd>CHF 14</dd>
|
||
<dt>Reduced — students, AHV</dt>
|
||
<dd>CHF 8</dd>
|
||
<dt>Under 16, Basel pass</dt>
|
||
<dd>Free</dd>
|
||
<dt>Tuesdays</dt>
|
||
<dd>CHF 7 — supported by Kanton Basel-Stadt</dd>
|
||
</dl>
|
||
</div>
|
||
|
||
<div class="visit__find">
|
||
<h3>Finding us</h3>
|
||
<p>
|
||
Haus der Form, Rittergasse 11, CH-4051 Basel.<br>
|
||
Tram 3 or 8 to Rittergasse. Two minutes on foot from the river.
|
||
</p>
|
||
<figure class="map" aria-hidden="true">
|
||
<figcaption>Rittergasse 11 · 100 m grid</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
</main>
|
||
|
||
<!-- ====== COLOPHON ============================================== -->
|
||
<footer class="colophon" role="contentinfo">
|
||
<div>
|
||
<h2>Set in</h2>
|
||
<p>
|
||
Archivo (display & text)<br>
|
||
IBM Plex Mono (metadata)<br>
|
||
One red — #D62828
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h2>Venue</h2>
|
||
<p>
|
||
Haus der Form<br>
|
||
Rittergasse 11<br>
|
||
CH-4051 Basel
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h2>Organized by</h2>
|
||
<p>
|
||
Katrin Widmer, curator<br>
|
||
Jonas Blum, exhibition design<br>
|
||
Landesmuseum conservation studio
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<h2>Correspondence</h2>
|
||
<p>
|
||
<a href="mailto:ordnung@hausderform.ch">ordnung@hausderform.ch</a><br>
|
||
+41 61 000 21 40<br>
|
||
Press kit on request
|
||
</p>
|
||
</div>
|
||
<div class="colophon__claim">
|
||
<span>© 2026 Haus der Form, Basel</span>
|
||
<span>The grid divides space. You decide what it carries.</span>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|