Typography

Trace CSS styles native HTML text elements. Body text and headings use the theme’s body and heading fonts. Code, keyboard input, and sample output use the monospace font.

#Headings and responsive sizes

Choose headings by their place in the document outline. Trace CSS sets all six levels to bold with a line height of 1.25.

Below 48rem (typically 768 CSS pixels), a media query reduces the size of h1 through h5 in a single step. Body text keeps its default line height of 1.6. Long words can wrap, while preformatted blocks can scroll horizontally. The breakpoint follows the viewport width, including when you use a scoped build.

<h1>Heading level 1</h1>
<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

#Paragraphs, lists, and links

Paragraphs have a default bottom margin of 1rem. Unordered, ordered, and description lists use the body line height. Links use theme-aware colors.

<p>Read the <a href="/docs/">Quick start</a> to install Trace CSS.</p>
<ul><li>Native HTML elements</li></ul>
<ol><li>Load the stylesheet</li><li>Add your markup</li></ol>
<dl><dt>Token</dt><dd>A CSS custom property that controls a style.</dd></dl>

#Inline text

#Preformatted text

Use pre to preserve whitespace and code for source code.

<pre><code>First line
  Indented line</code></pre>

First line
  Indented line

#Block quotes and dividers

A block quote uses a tinted surface and a border on the inline start edge. A horizontal rule separates topics with a theme-aware border.

<blockquote>
  <p>Use native HTML as the foundation for your interface.</p>
  <footer>— <cite>Trace CSS documentation</cite></footer>
</blockquote>
<hr />

See Typography tokens for fonts and spacing, Content element tokens for quotes and inline text, and Palette and theme tokens for colors.