[Library] Editorial

Catalogue accessStandard

Open letter

A statement set as a letter: a centred eyebrow, headline and short rule open it, the body runs left-aligned at a generous size and line height down one narrow measure, and it closes with a sign-off set in italic at display size. States no colour and no font of its own.

View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A statement set as a letter. A centred eyebrow, headline and short rule open it; the body runs left-aligned at a generous size down one narrow measure; it closes with a sign-off set in italic at display size and a dated line beneath. core/group, core/paragraph, core/heading and core/separator.

The signature moment

Centred head, ragged body

The only centred composition in the editorial section, and it is centred exactly as far as a letter is: the heading block is symmetrical, the short rule under it is core's default 100px separator sitting on the centre line, and then the body turns left-aligned, because a centred paragraph is a thing nobody can read. The switch from symmetry to a ragged right edge is what makes it read as a letter rather than an announcement. The sign-off is the other half of the signature: a name at up to 36px in the theme's italic, weight 400, which is the closest core markup gets to a signature without a font.

What it inherits from your theme

  • Typeface, including the italic. None stated. The sign-off uses fontStyle: italic, so it takes your theme's italic where the face has one and the browser's synthesised slant where it does not; in a serif theme it is the closest thing to a signature this catalogue can make.
  • Palette. base ground, contrast text, two-rung chains. The heading carries its colour explicitly.
  • The rule. Your separator style, at core's default short width.
  • Spacing rhythm. Core spacing presets.

What it decides for itself

  • The measure: 36rem.
  • Body proportion: clamp(1.125rem, 1.55vw, 1.3125rem) on 1.8.
  • The sign-off: clamp(1.625rem, 2.8vw, 2.25rem), italic, weight 400, -0.02em, line-height 1.2.
  • The eyebrow and the dateline: max(0.875rem, 14px), uppercase, tracked.

What you change first

  1. The headline. One sentence, said plainly.
  2. The body. Three paragraphs is a letter; six is an essay. Copy a paragraph to add one.
  3. The sign-off. A name or names. Keep it to one line at 390, about 20 characters.
  4. The dateline. Where and when; keep it at or above 14px.
How the widths work73 words

One measure, 36rem, the band's contentSize. Nothing is wider. The body is clamp(1.125rem, 1.55vw, 1.3125rem) on a 1.8 line height, larger and looser than the other editorial bodies because a letter is short and is meant to be read slowly; at 36rem and 19px that is 60 to 65 characters.

The short rule is a core/separator with no is-style-wide, which core and both stock themes render at 100px, centred. It states no colour.

What happens at 39032 words

The measure fills the width. The headline floors at 32px on 1.05 and centres over three or four lines. The sign-off floors at 26px. There are no links, so no tap targets.

Contrast27 words

Every pair is contrast on base. The headline and the sign-off are large text at 3:1; the body, the eyebrow and the dateline are held to 4.5:1.

Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(1.625rem, 2.8vw, 2.25rem)
Back to the library