Dramatic type scale
Headlines can be ten times the size of body text. The contrast creates hierarchy without decoration.
How the craft of magazine layout, with its columns, pull quotes and dramatic type, gives web pages a voice and a reading rhythm.
Editorial design treats a page as a story. The designer decides what the reader sees first, where the eye rests and how long a line runs before it breaks. Type size shifts dramatically between headline and body, and white space frames the most important words.
Layout is a form of pacing. It tells readers when to slow down.
Read the kit Copy the promptEditorial design brings the craft of magazines and newspapers to screens. It uses dramatic type scale, columns and pacing to guide reading.
Headlines can be ten times the size of body text. The contrast creates hierarchy without decoration.
Text flows in columns separated by thin rules, and heavy rules open new sections.
Drop caps, decks, bylines and pull quotes help readers enter, skim and return to long text.
Images are cropped and placed with intent, often bleeding off edges or breaking the grid.
Editorial design grew up in print. The web inherited its tools once CSS could handle columns and serious typography.
Alexey Brodovitch becomes art director of Harper's Bazaar and turns magazine spreads into dynamic compositions of type, photography and white space.
Willy Fleckhaus designs the German magazine Twen with oversized images and a strict grid, influencing generations of art directors.
David Carson's layouts for Ray Gun break every rule of legibility and show that editorial design can be expressive.
The New York Times publishes Snow Fall, a long-form story with integrated media that sets a new standard for editorial web design.
Major browsers ship CSS Grid, making magazine-style layouts possible without hacks.
Editorial motion serves reading. Words reveal at reading pace and rules draw in to mark emphasis.
Design is the pace at which we read.
These three mockups are built only from the kit on this page. Swap the tokens and they change style with it.
News sites use editorial layouts for features and investigations.
Companies publish stories and case studies with magazine-style art direction.
Writers and studios use editorial type to make text the hero.
The tokens every component on this page is built from. Copy them as a starting point, then adjust with intent.
Black ink on white paper, one loud magenta for emphasis. Photography brings the rest of the color. Tap a swatch to copy its hex value.
:root{
--paper: #FFFFFF;
--newsprint: #F2F0EC;
--ink: #121212;
--magenta: #E4007C;
--stone: #D9D4CC;
--gray: #555555;
}A high-contrast display serif for headlines, a text serif for reading and a grotesque for labels, bylines and navigation.
Body text carries the explanation. Keep lines under about 75 characters so the eye can find the next line.
:root{
--font-d: "DM Serif Display",Georgia,serif;
--font-b: "Source Serif 4",Georgia,serif;
--font-m: ui-monospace,Menlo,monospace;
--fs-d: clamp(62px, 9vw, 155px);
--fs-1: 61.6px; --fs-2: 45.3px;
--fs-3: 33.3px; --fs-4: 24.5px;
--fs-body: 18px; --fs-sm: 13.2px;
}
h1,h2,h3,h4 {
font-family: var(--font-d);
font-weight: 400;
letter-spacing: -.01em;
text-transform: none;
line-height: 1;
}
/* fonts: DM Serif Display, Source Serif 4 and Libre Franklin */A classic multi-column grid where text can flow in CSS columns and headlines can span everything.
Equal cards, product tiles, feature lists.
<div class="row"><div class="col-4">4</div><div class="col-4">4</div><div class="col-4">4</div></div>Articles, documentation, settings pages.
<div class="row"><div class="col-8">8</div><div class="col-4">4</div></div>Heroes and feature sections with tension.
<div class="row"><div class="col-5">5</div><div class="col-7">7</div></div>Dense galleries and logo walls.
<div class="row"><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div><div class="col-3">3</div></div>Long text flows across columns with a rule between them.
Editorial columns let long text breathe on wide screens. The column-width property sets a minimum, so on phones everything collapses to a single readable column without media queries. Rules between columns add structure without weight.
Balance a long article with one pull quote per screen and generous margins.
/* .cols {columns: 3 240px; column-gap: 32px; column-rule: 1px solid #ddd} */
<div class="cols" style="font-size:.9rem"><p class="dropcap">Editorial columns let long text breathe on wide screens. The column-width property sets a minimum, so on phones everything collapses to a single readable column without media queries. Rules between columns add structure without weight.</p><p>Balance a long article with one pull quote per screen and generous margins.</p></div>.row {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 32px;
}
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
@media (max-width: 760px) {
.row { grid-template-columns: 1fr; }
.row > * { grid-column: auto; }
}No radius and no shadow. Rules of different weights do all the structuring.
:root {
--radius: 0px;
--radius-sm: 0px;
--bw: 1px;
--shadow: none;
--shadow-sm: none;
--gap: 32px;
--pad: 0px;
}Change three tokens and the whole page responds, because every component reads from them. Reset brings back the style defaults.
Move a control to see the token change.Every component below is plain HTML with class names from the kit. Copy the full kit CSS once, then paste any snippet.
/* Editorial Design kit · Anti-Boring */
:root{
--bg:#FFFFFF;
--surface:#FFFFFF;
--surface2:#F2F0EC;
--fg:#121212;
--muted:#555555;
--accent:#E4007C;
--accent-fg:#FFFFFF;
--accent2:#121212;
--accent2-fg:#FFFFFF;
--border:#121212;
--bw:1px;
--radius:0px;
--radius-sm:0px;
--shadow:none;
--shadow-sm:none;
--font-d:"DM Serif Display",Georgia,serif;
--font-b:"Source Serif 4",Georgia,serif;
--font-m:ui-monospace,Menlo,monospace;
--h-weight:400;
--h-track:-.01em;
--h-case:none;
--h-style:normal;
--h-lh:1;
--gap:32px;
--pad:0px;
--focus:rgba(228,0,124,.3);
--ok:#1E6B3E;
--warn:#8A5A00;
--danger:#B3001B;
--info:#121212;
--field-bg:var(--surface);
--field-shadow:none;
--media:linear-gradient(120deg,#121212 0 40%,#E4007C 40% 44%,#D9D4CC 44%);
--code-bg:#121212;
--code-fg:#F2F0EC;
--btn-case:uppercase;
--btn-track:.1em;
--btn-weight:700;
--badge-radius:999px;
--maxw:1160px;
--fs-sm:13.2px;
--fs-body:18px;
--fs-4:24.5px;
--fs-3:33.3px;
--fs-2:45.3px;
--fs-1:61.6px;
--fs-d:clamp(62px, 9vw, 155px);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:400 var(--fs-body)/1.6 var(--font-b);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-d);font-weight:var(--h-weight);letter-spacing:var(--h-track);text-transform:var(--h-case);font-style:var(--h-style);line-height:var(--h-lh);margin:0 0 .4em}
h1{font-size:var(--fs-1)} h2{font-size:var(--fs-2)} h3{font-size:var(--fs-3)} h4{font-size:var(--fs-4)}
p{margin:0 0 1em}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
code,pre,kbd{font-family:var(--font-m)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:var(--btn-weight) 1rem/1 var(--font-b);text-transform:var(--btn-case);letter-spacing:var(--btn-track);padding:.85em 1.4em;border:var(--bw) solid var(--border);border-radius:var(--radius);background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm);text-decoration:none;cursor:pointer;transition:transform .12s,box-shadow .12s,background-color .12s,color .12s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-2{background:var(--accent2);color:var(--accent2-fg)}
.btn-ghost{background:transparent;color:var(--fg);box-shadow:none}
.btn-sm{font-size:.85rem;padding:.6em 1em}
.btn-lg{font-size:1.15rem;padding:1em 1.7em}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
/* forms */
.field{display:grid;gap:.4em;margin-bottom:1.1em}
.label{font-weight:600;font-size:.95rem}
.help{font-size:.85rem;color:var(--muted)}
.input,.select,.textarea{width:100%;font:1rem/1.4 var(--font-b);color:var(--fg);padding:.75em .9em;background:var(--field-bg);border:var(--bw) solid var(--border);border-radius:var(--radius-sm);box-shadow:var(--field-shadow);appearance:none}
.select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat;padding-right:2.4em}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--field-shadow),0 0 0 3px var(--focus)}
.is-error .input{border-color:var(--danger)} .is-error .help{color:var(--danger)}
.choice{display:flex;align-items:center;gap:.6em;margin:.35em 0;cursor:pointer}
.check,.radio{appearance:none;width:1.25em;height:1.25em;margin:0;flex:none;border:var(--bw) solid var(--border);background:var(--field-bg);box-shadow:var(--field-shadow);display:grid;place-items:center;cursor:pointer}
.check{border-radius:calc(var(--radius-sm)/2)} .radio{border-radius:50%}
.check::after{content:"";width:.55em;height:.3em;border-left:2.5px solid var(--accent-fg);border-bottom:2.5px solid var(--accent-fg);transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.radio::after{content:"";width:.5em;height:.5em;border-radius:50%;background:var(--accent-fg);opacity:0}
.check:checked,.radio:checked{background:var(--accent);border-color:var(--border)}
.check:checked::after,.radio:checked::after{opacity:1}
.switch{appearance:none;width:2.8em;height:1.6em;margin:0;flex:none;border-radius:999px;border:var(--bw) solid var(--border);background:var(--surface2);position:relative;cursor:pointer;transition:background .15s;box-shadow:var(--field-shadow)}
.switch::before{content:"";position:absolute;top:50%;left:.18em;width:1.1em;height:1.1em;border-radius:50%;background:var(--fg);transform:translateY(-50%);transition:left .15s}
.switch:checked{background:var(--accent)}
.switch:checked::before{left:calc(100% - 1.28em);background:var(--accent-fg)}
.range{width:100%;accent-color:var(--accent)}
/* surfaces */
.card{background:var(--surface);color:var(--fg);border:var(--bw) solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--pad);position:relative}
.card-media{aspect-ratio:16/9;border-radius:var(--radius-sm);background:var(--media);margin-bottom:1em}
.badge{display:inline-block;font:600 .75rem/1 var(--font-b);padding:.45em .75em;border-radius:var(--badge-radius);background:var(--accent2);color:var(--accent2-fg);border:var(--bw) solid var(--border)}
.alert{padding:1em 1.2em;border:var(--bw) solid var(--border);border-left:6px solid var(--c,var(--info));border-radius:var(--radius-sm);background:var(--surface);margin-bottom:.8em}
.alert b{color:var(--c,var(--info))}
.alert-ok{--c:var(--ok)} .alert-warn{--c:var(--warn)} .alert-danger{--c:var(--danger)}
.progress{height:.8em;border-radius:999px;background:var(--surface2);border:var(--bw) solid var(--border);overflow:hidden}
.progress i{display:block;height:100%;background:var(--accent)}
/* navigation */
.tabs{display:flex;gap:.25em;border-bottom:var(--bw) solid var(--border);flex-wrap:wrap}
.tab{font:600 .95rem var(--font-b);padding:.7em 1em;background:none;border:0;border-bottom:3px solid transparent;color:var(--muted);cursor:pointer;margin-bottom:calc(var(--bw) * -1)}
.tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--accent)}
.crumbs{display:flex;gap:.5em;flex-wrap:wrap;font-size:.9rem;color:var(--muted);list-style:none;padding:0;margin:0}
.crumbs li+li::before{content:"/";margin-right:.5em;opacity:.6}
.pager{display:flex;gap:.4em;list-style:none;padding:0;margin:0;flex-wrap:wrap}
.pager a{display:grid;place-items:center;min-width:2.4em;height:2.4em;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);text-decoration:none;background:var(--surface)}
.pager a[aria-current]{background:var(--accent);color:var(--accent-fg)}
/* table */
.table-wrap{overflow-x:auto;border:var(--bw) solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:460px}
.table th,.table td{text-align:left;padding:.75em 1em;border-bottom:1px solid color-mix(in srgb,var(--border) 30%,transparent)}
.table th{font-family:var(--font-d);font-weight:var(--h-weight)}
/* grid */
.row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-5{grid-column:span 5}.col-6{grid-column:span 6}.col-7{grid-column:span 7}.col-8{grid-column:span 8}.col-12{grid-column:span 12}
@media (max-width:760px){.row{grid-template-columns:minmax(0,1fr);gap:min(var(--gap),16px)}.row>*{grid-column:auto!important;grid-row:auto!important}}
/* signature */
.btn{font-family:"Libre Franklin",sans-serif;font-size:.8rem}
.btn-ghost{border:0;border-bottom:2px solid var(--fg);padding-left:0;padding-right:0}
.card{border:0;border-top:3px solid var(--fg);padding-top:16px;background:transparent}
.card-media{margin-bottom:.8em}
.badge{font-family:"Libre Franklin",sans-serif;text-transform:uppercase;letter-spacing:.12em;border:0;background:transparent;color:var(--accent);padding:0;font-weight:700}
.label{font-family:"Libre Franklin",sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
.input,.select,.textarea{border:0;border-bottom:1px solid var(--fg);padding-left:0;font-size:1.1rem}
.input:focus,.select:focus,.textarea:focus{box-shadow:none;border-bottom:2px solid var(--accent)}
.textarea{border:1px solid var(--fg);padding-left:.8em}
.alert{border:0;border-top:1px solid var(--fg);border-bottom:1px solid var(--fg);padding-left:0;font-style:italic}
.alert b{font-style:normal;font-family:"Libre Franklin",sans-serif;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em;margin-right:.4em}
.tab{font-family:"Libre Franklin",sans-serif;text-transform:uppercase;font-size:.75rem;letter-spacing:.12em}
.table{font-size:1rem}
.table th{font-family:"Libre Franklin",sans-serif;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;border-bottom:2px solid var(--fg)}
.table-wrap{border:0;border-top:3px solid var(--fg)}
.pager a{border:0;font-family:"Libre Franklin",sans-serif}
.pager a[aria-current]{background:transparent;color:var(--accent);border-bottom:2px solid var(--accent)}
.dropcap::first-letter{float:left;font:400 5.2em/.8 var(--font-d);margin:.06em .08em 0 0;color:var(--accent)}
.cols{columns:3 240px;column-gap:var(--gap);column-rule:1px solid #ddd}
.pull{font:italic 400 var(--fs-3)/1.15 var(--font-d);border-top:3px solid var(--accent);border-bottom:1px solid var(--fg);padding:16px 0;margin:24px 0}
/* dark theme: add class="alt" to <html> */
html.alt{
--bg:#121212;
--surface:#121212;
--surface2:#1C1C1C;
--fg:#F2F0EC;
--muted:#B5B5B5;
--border:#F2F0EC;
--accent2:#F2F0EC;
--accent2-fg:#121212;
--code-bg:#000;
}
html.alt .stage{background:#121212}html.alt .demo{border-color:#444!important}Three emphasis levels, three sizes and a disabled state. Keep one primary button per view.
<div class="demo-row">
<button class="btn">Primary</button>
<button class="btn btn-2">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn" disabled>Disabled</button>
</div>
<div class="demo-row" style="margin-top:14px">
<button class="btn btn-sm">Small</button>
<button class="btn">Default</button>
<button class="btn btn-lg">Large</button>
</div>Text fields, choices and toggles share the same border, radius and focus ring, so a form reads as one family.
<form class="formgrid" onsubmit="return false">
<div>
<div class="field">
<label class="label" for="f-name">Full name</label>
<input class="input" id="f-name" placeholder="Ada Lovelace">
<span class="help">As it appears on your ID.</span>
</div>
<div class="field is-error">
<label class="label" for="f-mail">Email</label>
<input class="input" id="f-mail" type="email" value="ada@">
<span class="help">Enter a complete email address.</span>
</div>
<div class="field">
<label class="label" for="f-plan">Plan</label>
<select class="select" id="f-plan"><option>Starter</option><option>Studio</option><option>Team</option></select>
</div>
</div>
<div>
<div class="field">
<label class="label" for="f-msg">Message</label>
<textarea class="textarea" id="f-msg" placeholder="Tell us about your project"></textarea>
</div>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Interests</legend>
<label class="choice"><input type="checkbox" class="check" checked> Typography</label>
<label class="choice"><input type="checkbox" class="check"> Motion</label>
</fieldset>
<fieldset class="field" style="border:0;padding:0;margin:0 0 1.1em">
<legend class="label">Billing</legend>
<label class="choice"><input type="radio" name="bill" class="radio" checked> Monthly</label>
<label class="choice"><input type="radio" name="bill" class="radio"> Yearly</label>
</fieldset>
<label class="choice"><input type="checkbox" class="switch" checked> Email me updates</label>
<div class="field" style="margin-top:1em">
<label class="label" for="f-range">Budget</label>
<input class="range" id="f-range" type="range" value="60">
</div>
<button class="btn">Send request</button>
</div>
</form>A container for one idea. Media sits on top, then a badge, title, short text and one action.
<div class="auto">
<article class="card">
<div class="card-media"></div>
<span class="badge">New</span>
<h4 style="margin-top:.6em">Card title</h4>
<p>Short supporting text that explains what this card is about.</p>
<a class="btn btn-sm" href="#">Read more</a>
</article>
<article class="card">
<div class="card-media" style="filter:hue-rotate(40deg)"></div>
<span class="badge">Guide</span>
<h4 style="margin-top:.6em">Second card</h4>
<p>Cards in a row share height and spacing, so the grid stays calm.</p>
<a class="btn btn-sm btn-2" href="#">Open</a>
</article>
</div>Alerts, badges and progress tell people what just happened and what to do next.
<div class="alert"><b>Info.</b> Your draft saves every 30 seconds.</div>
<div class="alert alert-ok"><b>Saved.</b> Changes are live on your site.</div>
<div class="alert alert-warn"><b>Check this.</b> Two images are missing alt text.</div>
<div class="alert alert-danger"><b>Upload failed.</b> Files must be under 10 MB. Try a smaller file.</div>
<div class="demo-row" style="margin-top:14px">
<span class="badge">Default</span>
<span class="badge" style="background:var(--accent);color:var(--accent-fg)">Accent</span>
</div>
<div style="margin-top:18px"><div class="progress" role="progressbar" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100" aria-label="Upload progress"><i style="width:64%"></i></div></div>Tables scroll sideways on small screens instead of squashing columns.
| Project | Owner | Status | Due |
|---|---|---|---|
| Homepage | Rūta | Review | 12 Oct |
| Checkout | Tomas | Draft | 19 Oct |
| Onboarding | Ieva | Live | 2 Oct |
<div class="table-wrap">
<table class="table">
<thead><tr><th>Project</th><th>Owner</th><th>Status</th><th>Due</th></tr></thead>
<tbody>
<tr><td>Homepage</td><td>Rūta</td><td><span class="badge">Review</span></td><td>12 Oct</td></tr>
<tr><td>Checkout</td><td>Tomas</td><td><span class="badge">Draft</span></td><td>19 Oct</td></tr>
<tr><td>Onboarding</td><td>Ieva</td><td><span class="badge">Live</span></td><td>2 Oct</td></tr>
</tbody>
</table>
</div>A ready prompt for AI design and coding tools. It names exact tokens and bans the usual defaults, so the output keeps this style's point of view.
Design a responsive landing page for an online culture magazine in an authentic Editorial Design style.
Palette: Paper #FFFFFF, Newsprint #F2F0EC, Ink #121212, Magenta #E4007C, Stone #D9D4CC, Gray #555555.
Typography: DM Serif Display for headlines (up to 10rem, tight leading), Source Serif 4 for body at 18px, Libre Franklin uppercase with 0.12em tracking for labels and bylines.
Layout: Masthead row, an enormous headline, an italic deck and byline, then a two-part spread: tall art-directed image on the left, text with a magenta drop cap and a pull quote on the right.
Signature details: Rules of different weights (3px, 1px, double) instead of boxes, CSS columns with column rules, one magenta accent, generous white space.
Components: Uppercase grotesque buttons, underline-only text fields, cards defined by a heavy top rule, italic alerts between rules.
Motion: Words reveal at reading pace, rules draw in under emphasis.
Avoid: rounded cards, shadows, tiny body text, more than two serif families, stock gradients.
Do not fall back on generic AI defaults: no centered hero with a gradient blob, no identical rounded cards with soft grey shadows, no purple-to-blue gradients, no emoji icons, unless this style explicitly calls for them.
Accessibility: body text contrast of at least 4.5:1, visible keyboard focus on every control, labels on all form fields, and respect prefers-reduced-motion.
Deliver one self-contained HTML file with CSS variables for every color, font, radius and shadow token.Where this style usually goes wrong, and how to keep it honest.
Multi-column text on screen fails if readers must scroll up to read the next column. Keep column blocks short.
Three serifs fighting each other. Pick one display and one text face.
Magazine print sizes are too small for screens. Body text should be 17 to 20 pixels.
Drop caps and pull quotes only work on real long-form content.