Typography
Long text, set to be read: it styles plain HTML by element, and punctuation hangs in the margin.
Report an issue with TypographyExample
Why two faces are enough
Every extra typeface is another voice in the room. Two is a conversation.
The grotesque carries everything the interface says: labels, buttons, the names of things. The italic serif carries everything you say back. Nothing else is needed to tell the two apart, and nothing else is added. In the stylesheet, the whole rule is one line: .ot-yours sets the expression, in italic. Read the full contract.
The space isn’t empty. It’s waiting for the reader.
What this rules out
- Icons that need a legend.
- A third face for “personality”.
- Colour that means nothing.
What it asks of us
- Write every label so it can stand alone.
- Set the hierarchy with size and weight first.
- Leave the space empty when in doubt.
In the stylesheet
.ot-yours {
font-family: var(--ot-expression);
font-style: italic;
}| Token | Sets | Figure |
|---|---|---|
--ot-hairline | Rules | 1px |
--ot-stroke | Emphasis lines | 2px |
On leaving space
A page is mostly paper. The type takes a small part of it, and the rest is the room the reader breathes in. Set the margins first, before a single word, and the words will know where to stand.
The old compositors had a rule for it: indent or space, never both. An ordered page needs little else, only the steady measure of its lines and the space kept between them.
What is left out is part of the design. It is the part the reader never notices, and the part they would miss.
Two faces, one accent, and a great deal of paper: that is the whole of the system.
On leaving space
A page is mostly paper. The type takes a small part of it, and the rest is the room the reader breathes in. Set the margins first, before a single word, and the words will know where to stand.
The old compositors had a rule for it: indent or space, never both. An ordered page needs little else, only the steady measure of its lines and the space kept between them.
What is left out is part of the design. It is the part the reader never notices, and the part they would miss.
Two faces, one accent, and a great deal of paper: that is the whole of the system.
A page is mostly paper, and the type takes a small part of it.
Set the margins first, and the words will know where to stand.
A page is mostly paper, and the type takes a small part of it.
Set the margins first, and the words will know where to stand.
A page is mostly paper, and the type takes a small part of it.
Set the margins first, and the words will know where to stand.
Install
Run it in a project that has the shadcn CLI set up. It brings the 0nlyType base along.
npx shadcn@latest add https://Usage
import { Prose, ProseLead, type ProseProps } from "@/components/ui/typography"function Passage({ variant }: { variant: ProseProps["variant"] }) {return (<Prose variant={variant}><h3>On leaving space</h3><p>A page is mostly paper. The type takes a small part of it, and the rest is the room the reader breathes in. Setthe margins first, before a single word, and the words will know where to stand.</p><p>The old compositors had a rule for it: indent or space, never both. An ordered page needs little else, only thesteady measure of its lines and the space kept between them.</p><p>What is left out is part of the design. It is the part the reader never notices, and the part they would miss.</p><hr /><p>Two faces, one accent, and a great deal of paper: that is the whole of the system.</p></Prose>)}export default function Example() {return (<div className="grid gap-y-16"><Swiss />{(["book", "run-on"] as const).map((v) => (<div key={v} className="grid gap-y-4"><span className="ot-label">{v}</span><Passage variant={v} /></div>))}</div>)}Contract
- Underneath: native.
- Anatomy:
<article class="ot-prose">wrapping plain HTML: headings,p,.ot-prose-lead,blockquote, lists,code. - Text-size
em,iand block quotations use the expression reading grade from base. Nested italics do not multiply the scale again. Italics inside display headings keep their display settings. - swiss (the default,
data-variant="swiss"): set for reading at--ot-measure. Headings step by the dynamics; quotes are in the expression; quote marks and list dashes hang in the margin so the edge stays true (hanging-punctuationwhere supported); numbered lists step in instead, a number being too wide to hang, so the numbers stand on the edge. A nested list steps in by its dash, so its dash hangs under its parent's words, and list items take half a paragraph's pause (0.5em) between them. Code is the voice, condensed. - book: the page of a book, by the compositor's rule "indent or space, never both" (Tschichold's Penguin rules, Bringhurst). Paragraphs follow on with no space between them, each indented an em and a half, and the first after a heading or a break flush; they are justified and hyphenated, with old-style figures where the face has them. The opening line after a heading is set in spaced capitals (
::first-line, so it re-sets itself at every width). A break (hr) is a dinkus of three spaced dots instead of a rule. Quotes are indented both sides at body size. - run-on: the scribe's paragraph. A passage's paragraphs run on as one block, and where each begins a pilcrow (¶, the expression face, ink, decorative to screen readers) stands in the line: the silence between paragraphs is kept as one mark. The lead and anything that isn't a paragraph stay blocks. For short passages; long reading wants swiss or book.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
asChild | boolean | false | Set the child element instead of rendering an article. |
ProseLead | p props | An opening paragraph at the lead size, in ink. | |
variant | "swiss" | "book" | "run-on" | "swiss" | swiss: space between paragraphs and punctuation hung in the margin. book: a book's page; paragraphs follow on without a space, each indented, justified and hyphenated, the opening line in spaced capitals, old-style figures, and a break is three dots instead of a rule. run-on: a passage's paragraphs run on as one block, a pilcrow standing where each begins. |
Craft
Where its move comes from
| Component | Reference | Move |
|---|---|---|
| Prose | Swiss typesetting | Hanging punctuation keeps the edge true |
| Book prose | The book page: "indent or space, never both" | Paragraphs indented, not spaced; the opening line in capitals; a dinkus for a break |
| Run-on prose | The scribe's pilcrow | Paragraphs run on as one block, a ¶ where each begins |