A styling system for HTML and rendered markdown, from blog posts to streaming chat. One CSS file you own. There is no component to import; add the .typeset class to a container and everything inside it is styled.
Add typeset to a container and every element inside it is styled. Headings, paragraphs, lists, tables, code, and inline elements all derive their spacing from the same three values, so rendered markdown needs no per-element classes.
Typeset styles everything inside the container, so rendered markdown needs no per-element classes. Headings, lists, tables, and code all derive their spacing from three values.
Everything else follows from those three.
Inline elements come along for free: bold, italic, links, and inline code.
Three controls carry the whole system. --typeset-size sets the base text size, --typeset-leading sets the line height, and --typeset-flow sets the space between blocks. Heading sizes, list indents, the gap under a heading, and the space around a rule all derive from them. Override them on the container for a one-off, or in a preset class for a whole context.
Two ems between blocks, line height at 1.9.
Long-form reading benefits from the extra air.
Three quarters of an em between blocks, line height at 1.5.
Denser panels and chat surfaces read better this way.
A preset is a small class that flips the three variables. Three ship with the app: typeset is the default ladder (16px on phones, 18px from sm), typeset-sm is the compact one for dialogs and cards, and typeset-fixed keeps one size at every viewport. They live in main.css next to the format-html block, so adding your own is a matter of one rule.
Sixteen pixels on phones, eighteen from the sm breakpoint.
Fourteen pixels with a tighter flow. Use it inside dialogs and cards.
Stays at the same size on every viewport. Use it when a pane must not grow.
--typeset-size defaults to 1em, so the surrounding layout decides the scale. Drop the same markup into a chat bubble and it follows the smaller type around it; drop it into an article and it scales up with the page. On small screens it takes a small bump for readability.
Inside a bubble the text follows the smaller type around it.
No override needed.
Inside an article it scales up with the page instead.
format-html is the legacy container class used by every CMS surface across pmone, pmone-events, and levenium. The vendored typeset.css aliases its container selector to :is(.typeset, .format-html), so the two share one implementation. format-html adds three things on top: a 42rem measure, full-bleed images, and tables that scroll on their own. It sits in @layer components, so a call-site utility such as max-w-none always wins.
This container is what every CMS surface uses. It reads the same as typeset but adds the article measure and the wide-table treatment.
Call-site utilities win over it, so max-w-none on the same element widens it without a fight.
Upstream Typeset expects a typeset-scroll wrapper around wide tables. Database-authored HTML has no such wrapper, so format-html emulates it on the table itself: display block, width max-content, and its own horizontal scrollbar. A plain typeset container keeps the native table layout, which is what the live editor wants.
Tables inside format-html scroll on their own so a wide one never widens the page. Plain typeset containers keep the native table layout instead.
| Region | Sessions | Signups | Conversion |
|---|---|---|---|
| North | 12,480 | 318 | 2.5% |
| South | 9,240 | 402 | 4.3% |
Block code takes the muted surface, the mono family, and the radius from your theme. Inline code gets a smaller pill on the same surface, scoped to :not(pre) > code so nested code inside a block is left alone. Syntax-highlighted output keeps its own token colours in both light and dark.
Block code takes the muted surface and the mono family from your theme. Inline code gets a smaller pill on the same surface.
export default defineNuxtConfig({
css: ["~/assets/css/main.css"]
})Highlighted output keeps its own token colours in both themes.
Add not-typeset (or data-not-typeset) to any subtree that should keep its own styling. The opt-out covers the element and everything under it, so a card grid or an embedded widget can sit inside an article without inheriting document typography.
Anything inside the container inherits the document styles.
The paragraph after the opt-out picks the rhythm back up.
| Prop | Type | Default | Description |
|---|---|---|---|
typeset | class | — | Turns the styles on. Everything inside the container is styled. |
format-html | class | — | Legacy alias for the same styles, plus a 42rem measure, full-bleed images, and scrolling tables. |
typeset-sm | class | — | Compact preset: 14px with a 1em flow. Replaces the old prose-sm. |
typeset-fixed | class | — | Keeps one size at every viewport. Replaces the old prose-base. |
not-typeset | class | — | Opts a subtree out. data-not-typeset works the same way. Replaces the old not-prose. |
typeset-scroll | class | — | Upstream wrapper that makes a wide child scroll. format-html emulates it on tables, so you rarely need it. |
| Prop | Type | Default | Description |
|---|---|---|---|
--typeset-size | length | 1rem | Base text size. 1em in upstream; the app pins 1rem and steps up at sm via --typeset-size-lg. |
--typeset-size-lg | length | calc(var(--typeset-size) * 1.125) | Size from the sm breakpoint up. App-specific: upstream ships the inverse ladder. |
--typeset-leading | number | 1.75 | Line height of body text. |
--typeset-flow | length | 1.25em | Space between blocks. Headings and rules derive their spacing from it. |
--typeset-heading-weight | number | 600 | App-specific escape hatch. Set it to 500 to restore the lighter headings the typography plugin used to produce. |
--typeset-font-body | font stack | inherit | Body family. Leave it alone and it follows your app. |
--typeset-font-heading | font stack | inherit | Heading family. Pinned to inherit on purpose: upstream defaults to var(--font-heading), which is a generic sans in pmone-events and levenium. |
--typeset-font-mono | font stack | var(--font-mono) | Family for code and pre. |
--typeset-muted | color | var(--color-muted-foreground) | Captions, markers, and footnotes. Derived, rarely set by hand. |
--typeset-rule | color | var(--color-border) | Rules, table borders, and the blockquote edge. |
Keyboard shortcuts and ARIA behavior.