Typography is driven by custom properties. Headings use a monospace stack, body text uses the system sans stack, and both share the same spacing rhythm.

Headings

<h1>Heading one</h1>
<h2>Heading two</h2>
<h3>Heading three</h3>
<h4>Heading four</h4>
<h5>Heading five</h5>
<h6>Heading six</h6>

Sizes use clamp() so they scale with the viewport. The --h1 through --h6 tokens can be overridden without changing the selectors.

Body text

Paragraphs are limited by the body measure, use a comfortable line height, and opt into text-wrap: pretty. The body measure defaults to 82ch and is controlled by --measure.

Inline elements are styled with the rest of the document:

<p>
  Use <strong>strong</strong> for importance,
  <em>emphasis</em> for stress,
  <a href="/">links</a> for navigation,
  <code>code</code> for source,
  <kbd>Ctrl</kbd> for keys,
  and <mark>highlight</mark> for a relevant phrase.
</p>

Links

Links use the accent color with a visible underline. Focus styles come from the global :focus-visible rule, so keyboard users see the same affordance on links, buttons, inputs, and summaries.

Lists

<ul>
  <li>Unordered item</li>
  <li>Another item</li>
</ul>

<ol>
  <li>First step</li>
  <li>Second step</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Nested lists inherit the same spacing. Markers use the muted text color so they do not compete with the content.

Quotes and rules

<blockquote>
  <p>A short quotation that is part of the surrounding prose.</p>
</blockquote>

<hr>

Blockquotes get an accent border and muted text. Horizontal rules use the border token.

Code

Inline code and code blocks use the monospace stack. A block keeps its own scroll container so long lines do not widen the page.

<pre><code>&lt;main&gt;
  &lt;h1&gt;Hello&lt;/h1&gt;
&lt;/main&gt;</code></pre>

<main>
  <h1>Hello</h1>
</main>