Prose
Source: src/styles/parts/prose.scs.
Long-form reading — an article, a documentation page, rendered markdown — is a different job from the interface, so it gets a different typeface: the serif carries a two thousand word page in a way the ui face does not. The measure is capped near 68 characters, because that is what the eye tracks without effort.
One class does all of it. Everything below is inside a single <article class="prose">,
with no other class anywhere.
.prose > * + *: the space is between blocks, never on them,
so the first child never pushes the container open.The whole thing
The first paragraph of a piece carries it: slightly larger, slightly quieter, and set on its own rhythm — no class, just being first.
An ordinary paragraph. The measure stops near 68 characters whatever the column does, because a line the eye has to hunt back across is a line that gets re-read. Links are underlined here, unlike in the interface, where underlining every link would make a toolbar unreadable.
A section
Headings take the display face and open more space above them than below, so a section reads as belonging to what follows it rather than to what it ends.
A subsection
Three levels are styled: h2, h3 and h4. Below that, a piece
is asking for a different structure rather than a fourth heading.
A pull quote is a statement, so it is set as one: larger, tighter, heavier, with the brand rule beside it.
Lists keep the serif and a tighter step between items:
- an item of a list inside prose;
- a second one, long enough to wrap and show the indent the marker leaves;
- a third.
- Numbered, when the order is the point.
- Otherwise a bulleted list says the same thing with less noise.
Inline code steps down a little so it sits on the serif's x-height, and a block keeps
the mono face at the interface size:
@import "styles.scs" as self;
| Element | Face |
|---|---|
| Body | serif |
| Headings | display |
| Tables, captions, callouts | interface |
Sources — a figure without its source is an assertion, and this is where the source goes.
What is styled
| Selector | What it does |
|---|---|
.prose | the serif face, the large step, the loose leading, the 68ch measure |
.prose > * + * | the space between blocks — 1.15em |
.prose > p:first-child | the lede: larger and quieter, with no class |
.prose h2, h3, h4 | the display face, tight leading, more space above than below |
.prose a | underlined, offset by three pixels |
.prose ul, ol, li | a tighter step between items, a quiet marker |
.prose blockquote | the pull quote: larger, tighter, heavier |
.prose figure, figcaption | rounded image, caption in the interface face |
.prose code, pre, table | back to the mono and interface faces at interface sizes |
.prose .callout | the interface face, so a note reads as an aside |
.prose .sources | the footnote block at the end of a piece |
Below 720px the whole thing steps down: the body to the interface size, the headings and the pull quote with it.
Where it is used
.prose is the body of an article in the editorial template — see
Editorial sections and the
article demo — and it is what
<mmo-markdown>
should be wrapped in when the markdown is a document rather than a fragment of interface.