Typography

Serif supplies editorial headings and authored prose, sans-serif supports reading, and monospace serves interface text, metadata and code. A family alone does not define a typography role.

Monospace alone preserves mixed case; the .ui and .metadata roles apply their own case and tracking.

base.css declares every font face; each font is self-hosted through @dg/ui/fonts/* and no font service is contacted. Headings use Teodor, a variable font loaded from fonts/Teodor-Variable.woff2, then the system serif; its italics use the font's slant axis, capped at 10°. Reading text uses Roboto and interface text Roboto Mono, both variable Latin subsets; characters outside the subset fall back to Helvetica Neue and the system monospace.

<code style="font-family: var(--font-mono)">galleryName = "Distributed Gallery"</code>

All type sizes are calculated from --font-size-base, whose default is set slightly below the browser root size and follows it. Change this one length to scale every role; spacing does not follow it. Body text uses the base itself; every other role and heading level derives its own factor from it. A shared step is added only when several roles share a size.

To scale every role inside one element, add .typescale where its local --font-size-base is set; inherited role sizes do not otherwise follow a descendant's base. Use rem or px, or register --font-size-base as a <length> with @property for a container-relative base. Spacing is unchanged.

<section class="typescale" style="--font-size-base: 1.5rem">
  <h1>A larger presentation</h1>
  <p>All type roles follow the same base.</p>
  <p class="metadata">A proportionally sized reference</p>
</section>

Native h1–h6 headings and Heading use the serif family, set light and tight. Heading follows its semantic level unless its size is explicitly overridden.

H1 grows with the viewport between bounds proportional to the base where typed division is supported, with a proportional fallback elsewhere; H2–H6 are fixed multiples of the base. Choose heading levels for document hierarchy; an appearance override does not change that hierarchy.

The document default, inherited by every element that sets no other role: paragraphs, descriptions and reading text in the sans-serif family. It needs no class.

For a local body-size override, set --body-font-size and also resolve font-size: var(--body-font-size) on that scope so descendants inherit it.

The .prose class sets continuous authored writing, such as a presentation or a text about an artwork, in the serif family. Its size is slightly above the body size to offset the serif's smaller x-height. Interface descriptions and short reading text keep the body role.

Combine .prose with .formatted for structured HTML and with .constrained-width for the reading measure.

<div class="formatted prose constrained-width">
  <p>A text written by the artist about the work.</p>
</div>

The .ui class sets navigation, actions and interface labels in uppercase monospace. Components apply it to their controls; native label, legend and select take the same role without the class, as described in native forms.

Uppercase is applied through CSS without changing data. The role defines its own normal style, size, weight, rhythm and tracking and inherits its color.

<nav class="ui">Collection</nav>

The .metadata class sets dates, authors, sources and references in uppercase monospace with muted color. It is slightly smaller than interface text, with wider letter spacing. It does not require a UI parent.

Form help, validation errors and status feedback also use this role.

<p class="metadata">Collection · September 2026</p>

The .code class sets code blocks and literal data, such as token names and values, in monospace at a reduced size. Unlike the UI and metadata roles, it keeps the source casing and slightly tightens its tracking.

Every pre, code, kbd and samp element takes this role's family, weight and tracking, upright and in source casing, even inside .ui or .metadata. pre blocks also take its size and line height; .formatted adds a surface around them. Inline code, kbd and samp keep the size and line rhythm of their sentence.

<span class="code">--background: oklch(100% 0 0)</span>

Strong emphasis raises the weight of text inside any role and keeps its family, size, casing and color. It marks importance and the keys of structured content, not interactive states: a heavier current or hovered item would change width and move its neighbors.

Every strong, b, th and dt element takes this weight, inside or outside .formatted. A role class on the element itself sets that role's weight instead, so give the role to an ancestor: the header cells of a table keep this weight inside thead, which takes the interface role. Components use the token for emphasis without a semantic element, such as the titles of search results.

<p>Load <strong>one</strong> stylesheet in the root layout.</p>

Authored text goes in .formatted: content whose structure comes from its author rather than from the interface, such as rendered Markdown, documentation, a text about an artwork or a chat answer, even a single paragraph. The class adds the rhythm between blocks and the marks that only reading needs: list markers and indents, definition spacing, link underlines, quotation bars, figure caption spacing and code block surfaces. It inherits the typography of its role. Interface elements, such as navigation, cards, metadata lines and forms, are styled by their components and never take .formatted, even when their markup uses paragraphs or lists. Elements that look the same in both contexts, such as headings, tables and captions, take their document defaults without the class; cascade layers describe this division.

Three classes serve reading text with or without it: .constrained-width limits the line length, .underlined marks a link that color alone would not distinguish, and .scrollable contains a table wider than its column.

See Classes for the complete class contract. The live example lets you change the reading measure independently of its alignment.

• Load @dg/ui/styles.css once. Body text is sans-serif; native h1–h6 headings use the serif heading role and shared heading scale. An interface description takes .constrained-width alone for the reading measure.
• Each role has its own size, weight, line-height and letter-spacing tokens; see the role sections above. Set role tokens on the intended scope; for a local body-size override, also resolve font-size: var(--body-font-size) there so descendants inherit it.
• Use .prose for continuous writing by an author, such as a presentation or a text about an artwork. Interface descriptions, captions and short reading text keep the body role. Compose .formatted.prose.constrained-width for structured authored text.
• Scope .ui to interface elements. A formatted block inside a .ui parent still inherits uppercase mono typography; .formatted does not reset that context. Do not combine .ui and .metadata.
• When only the monospace family is needed, set font-family: var(--font-mono) in the owning component’s styles. Other text properties continue to inherit.
• Use .metadata for short references such as dates and authors. Put URLs, titles of works and any reference whose casing matters in body text, since .metadata displays uppercase.
• Form help, validation errors and status feedback use metadata typography through .feedback; see native fields. Do not set body typography on them.
• Formatted blocks are separated by --content-gap-block; a following h2–h6 heading or hr, and the block after an hr, use one and a half times this gap, so the hierarchy follows any override. Lists and definitions indent by --space-5; an ordered list indents by --space-6 from its tenth item, or when its start is other than 1, so two-digit numbers stay inside the column. Unordered items show a muted cross centered on the first line, and ordered items restore their native numbers in the same --text-muted. Items are --space-2 apart; in a loose list, whose items wrap their content in paragraphs, items and their paragraphs are separated by the content gap, as quotation paragraphs are. Each definition term with its definitions is --space-2 from the next. A figure caption following its media sits --space-2 below it. Quotations and code blocks use content padding tokens. Code blocks sit on --background-subtle with a --border-subtle edge: the fill identifies them. Inline code keeps the surrounding text size and line rhythm. Long words wrap, and code blocks scroll inside the column, like every pre.
• Outside formatted content, links are identified by their position, as in navigation. When a link, or a button presented as a text link, sits among plain text of the same style, add .underlined so color alone does not distinguish it.
• Use the parent stack's items-center to center a constrained block. Text alignment belongs in local CSS. Keep formatted content separate from layout stacks so margins and gaps do not accumulate.
• A class on an element inside formatted content overrides the formatted styles: .framed replaces the edge of a code block. See cascade layers.
• In formatted content, long unbroken words and URLs wrap at any character. Table cells size their columns around whole words instead, so a long URL widens the table; wrap the table in .scrollable. For hyphenated breaks in reading text, add hyphens: auto in the owning styles; it follows the lang of the page.
• Classes do not create semantics, render Markdown or sanitize HTML. Keep native headings, lists, buttons and links. Uppercase is visual; source strings remain unchanged.

<div class="stack items-center">
  <article class="formatted constrained-width">
    <h2>About the work</h2>
    <p class="metadata">Artist name · 2026</p>
    <p>A first paragraph introducing the work.</p>
    <p>A second paragraph with a <a href="/artworks">collection link</a>.</p>
  </article>
</div>
<nav class="row control-gap ui" aria-label="Collection views">
  <a href="/artworks">Artworks</a>
  <a href="/about">About</a>
</nav>
<code style="font-family: var(--font-mono)">MixedCaseIdentifier</code>

<div class="formatted prose constrained-width">
  <p>A text written by the artist, set in the serif prose role.</p>
  <p>Its paragraphs, links and lists follow the formatted rhythm.</p>
</div>