The first screen of a long read: a ruled strip of metadata, a headline set as large as the band allows, a standfirst, a byline, and the first two paragraphs at a strict measure, the first of them opening with a drop cap. Everything is a core/group, core/paragraph, core/heading or core/separator.
The signature moment
The strip against the headline
The section opens with the two smallest things in it, a pair of hairlines with three 13px uppercase labels between them, and the next thing the eye meets is a headline at up to 100px with -0.045em tracking on a 0.96 line height. Nothing sits between those two sizes. The collision is the design: the strip reads as the masthead of a publication and the headline as the thing it published. The drop cap that opens the body repeats the move one level down, a single letter at several lines' height against 18px prose.
The drop cap is core's own dropCap attribute and core's own styling for it (float: left, 8.4em, line-height: .68, font-weight: 100), so it takes the theme's face and, where the theme restyles .has-drop-cap, the theme's size. That is inheritance doing its job: in a face with no thin weight it falls back to regular, and the letter is still several lines tall.
What it inherits from your theme
- Typeface. No family is stated. The headline was drawn to hold at 0.96 in a serif face and a sans one; the drop cap is whatever your theme's first letter looks like at 8.4em.
- Palette.
baseground,contrasttext, both two-rung chains ending on a core default. The headline carries its colour explicitly. - Every rule. Three
core/separatorblocks stating no colour, so they arecurrentColorin the stock themes and a 2px rule in a theme that styles nothing. - Spacing rhythm. Core spacing presets throughout.
What it decides for itself
- The headline:
clamp(2.75rem, 7.2vw, 6.25rem), weight 700, -0.045em, line-height 0.96. This is the loudest type in the editorial section and it is meant to be. - The measures: 38rem for the standfirst, 34rem for the body, in
rem. - The strip: three labels at
max(0.8125rem, 13px), 0.2em tracking, between two wide rules withspacing|20above and below. Labels under 30 characters are incidental text and get the 12px floor, but the px guard keeps them at 13 whatever the root size does. - The byline:
max(0.875rem, 14px), because at its length it is read rather than glanced at.
What you change first
- The three labels in the strip. Kind of piece, reading time, issue or date. Keep each under about 20 characters so the strip stays one line on a desktop.
- The headline. Eight words or fewer.
- The standfirst. One or two sentences that could stand in for the piece.
- The body. The first paragraph keeps
dropCap; to add paragraphs, copy the second one, which carries the same measure and size without the cap. - The byline. Replace the placeholder and keep it at or above 14px.
How the widths work277 words
The band is 56rem wide, which is what the headline and the metadata strip span. Everything a visitor reads is narrower: the standfirst and byline sit in a nested core/group whose constrained layout has contentSize: 38rem and justifyContent: left, and the body paragraphs in another at 34rem. Core's layout CSS caps each child at the group's content size and, with left, pins it to the group's left edge instead of centring it, so the narrow blocks share the headline's left edge and release to full width wherever the band is narrower than they are. No vw sizes a box; the vw terms are inside clamp() and size type only, so characters per line holds when the root size changes.
Why not padding-right: max(0rem, 100% - 34rem) on the paragraph itself. That was the first draft, borrowed from content-columns, and it is wrong on a direct child of a constrained band: the paragraph is content-box, so its padding sits OUTSIDE the layout's max-width, the box grows to the band's full width and centring puts its left edge at the band's padding edge, 144px left of the headline at 1400. Measured on the rendered page: the standfirst at left: 50px, width: 1300px, the headline at left: 252px. The measure was right and the position was not, and nothing caught it, because what gets measured is a width. The trick is still sound inside a column, where nothing centres the block.
The metadata strip is a flex group with justifyContent: space-between and flexWrap: wrap, so the three labels sit at the edges and the centre on a desktop and wrap into a short stack on a phone without either overflowing.
What happens at 39093 words
The headline floors at 44px on 0.96, which is four to five lines for this length of copy; keep a replacement to about eight words or the opener becomes a wall of display type. The standfirst and body fill the width. The drop cap floats against three to four lines of body at 17px, which is what it does in print at the same measure. The strip wraps to a stack of three short labels between the same two rules. There are no links and no buttons, so no tap target to clear.
Contrast37 words
Every pair is your contrast on your base. The headline is large text and clears 3:1; the standfirst, body and labels are held to 4.5:1. The rules carry no text. No accent slug appears in any rung.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…