All interface styles
System & typographic
Free

Editorial / Magazine

Print typesetting brought to the screen: a serif reading measure, standfirsts and pull quotes, and layout that changes with the content.

Also called: magazine layout, print-inspired, long-form, publication

Editorial / Magazine specimen

The measure is deliberately narrower than the panel. Note how the label, the card text and the data row use three distinct type roles — size, weight and family all move — while staying inside the same reading column.

Every style in this collection renders the same markup — one navigation row, one headline and action, one labelled input, a selected and an unselected control, a card with a status and a data row, and a secondary action. Colour and type come from the active design kit; the style decides the rendering.

What you see

The perceptual fingerprint, in the order you notice it.

  • A narrow measure for body text with wide margins either side
  • Display type at a much larger scale than anything around it
  • Standfirsts, bylines, captions and pull quotes as distinct type roles
  • Rules and drop caps marking the start of a piece
  • Images that break the measure deliberately, full-bleed or hung in the margin

Best for

  • Long-form content, essays, case studies and research writing
  • Brands whose credibility rests on what they have written
  • Pages where reading time, not click-through, is the goal

Avoid when

  • The page is a product surface with controls; editorial type roles have nothing to say about a form
  • Content is short and fragmentary — the structure has nothing to hold
  • The kit's display face has no usable weight range; editorial lives on type contrast

Accessibility

Where this style tends to fail an audit, and what fixes it.

  • Measure is an accessibility feature, not a taste one: 60–75 characters, and it must survive 200% zoom without becoming 30.
  • Drop caps must be marked `aria-hidden` on the duplicated glyph or built with `::first-letter`, or the first word is announced twice.
  • Pull quotes are decorative repetitions of body text. Take them out of the reading order rather than making a screen reader hear the sentence twice.

Built for

The site archetypes this render grammar suits. Each opens the catalog on that lane.

Matching design kits

A style is a render grammar. A design kit supplies the colour, type and personality it paints.

Reading-first editorial systems — magazine hierarchy, serif voice, archives, hairline grids, pull-quotes, drop-caps.

Implementation bundle

What an agent needs in order to actually build Editorial / Magazine on top of your design kit — surface rules, per-component behaviour, responsive behaviour, fallbacks and QA.

Surface rules

The declarations that make the render grammar, stated as CSS.

  • Body measure: `max-width: 68ch` on the prose container, with `hanging-punctuation: first` and `text-wrap: pretty` where supported.
  • Two families from the kit: `--font-heading` for display and `--font-sans`/serif for body. The contrast between them is the style.
  • Display type at `clamp(2.5rem, 6vw, 4.5rem)` with `line-height: 1.05` and `letter-spacing: -0.02em`; body at 1.125rem/1.65.
  • Rules are `1px solid hsl(var(--border))`, used only to open a section or close an article — never as a box.
  • Radius 0 on media and containers; print has no rounded corners and the borrowed authority is the point.

Component rules

Nav, action, input, selection, card and status, one rule each.

  • Nav is a masthead: title left, sections right, one hairline rule under the whole bar.
  • Headline gets a standfirst below it at 1.25rem in `--muted-foreground`, then the primary action as a text link with a heavy underline.
  • Inputs sit in a bordered 'subscribe' block that deliberately breaks the measure, with the label above and helper text below.
  • Selected chip: `--foreground` fill with `--background` text in small caps. Unselected: outlined, same small caps, no fill.
  • Cards are article stubs — kicker, headline, one line of deck, then a byline-and-metadata data row separated by a hairline.
  • Status renders as a dateline-style text string ('Updated 12 min ago'), not as a coloured pill.

Responsive rules

What has to change as the viewport narrows for the style to survive.

  • Measure is `min(68ch, 100%)`, so the column narrows rather than overflowing; margins collapse before the text does.
  • Display type floor is 32px at 320px — the `clamp()` lower bound matters more here than the upper one.
  • Margin-hung captions and pull quotes move inline above the paragraph they annotate; they never become a floating overlay.

Fallbacks

The degraded paths: unsupported effects, weak shadows, reduced motion.

  • Without `text-wrap: balance` support, cap headlines with an explicit `max-width` in `ch` so they break in a controlled place.
  • If the kit supplies no distinct heading family, create the contrast with weight and size instead of importing a face — the kit owns typography.
  • `prefers-reduced-motion`: remove any scroll-linked reveal on the article body; reading must not depend on animation completing.

QA checks

What to verify before shipping an interface in this style.

  • Body measure is 60–75 characters at desktop and does not exceed it at any breakpoint.
  • Zoom to 200%: the measure narrows and no text is clipped or horizontally scrollable.
  • A screen reader passes through the article once — no duplicated drop cap, no repeated pull-quote sentence.
  • Every type role (kicker, headline, standfirst, body, caption, byline) is visually distinct without colour.

Agent tags

The vocabulary a coding agent can match this style on.

  • reading-measure
  • display-serif
  • pull-quote
  • type-roles
  • long-form