Typography

Headings, text, links, lists, quotes and code, written as plain tags.

Every example here is bare HTML with no classes. Its source is under it.

Headings

Heading 1

The last child of an hgroup is a muted subtitle.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<hgroup>
	<h1>Heading 1</h1>
	<p>The last child of an hgroup is a muted subtitle.</p>
</hgroup>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Sizes run from 2rem for h1 down to 1rem for h6, all semibold, and h6 is muted. A heading after another block has 1.75rem above it. An hgroup keeps a heading and its subtitle together: its last child is muted and regular weight, with no space between.

Text

A paragraph with a link, strong, emphasis, marked text, inline code and a shortcut, Ctrl + K.

A second paragraph sits one rem below the first.

A rule has two rem above and below.

<p>
	A paragraph with a
	<a
		href="#"
	>link</a>,
	<strong>strong</strong>, <em>emphasis</em>, <mark>marked</mark> text,
	<code>inline code</code> and a shortcut, <kbd>Ctrl</kbd> + <kbd>K</kbd>.
</p>
<p>A second paragraph sits one rem below the first.</p>
<hr>
<p>A rule has two rem above and below.</p>

Links use --primary and are underlined, with a thicker line on hover. code and samp are monospace on a muted fill, kbd is a bordered key and mark takes the accent fill. An hr has two rem above and below.

Lists
  • Bullets
    • Nested
    • Items
  • Second item
  1. First
  2. Second
  3. Third
Term
Its description, indented under it.
Another term
And its description.
<ul>
	<li>Bullets
		<ul>
			<li>Nested</li>
			<li>Items</li>
		</ul>
	</li>
	<li>Second item</li>
</ul>
<ol>
	<li>First</li>
	<li>Second</li>
	<li>Third</li>
</ol>
<dl>
	<dt>Term</dt>
	<dd>Its description, indented under it.</dd>
	<dt>Another term</dt>
	<dd>And its description.</dd>
</dl>
<nav>
	<ul>
		<li>
			<a
				href="#"
			>A nav list</a>
		</li>
		<li>
			<a
				href="#"
			>has no markers</a>
		</li>
	</ul>
</nav>

A ul has discs and an ol has numbers, both indented 1.5rem, with 0.25rem between items. A list inside a nav loses its markers and indent. In a dl the terms are semibold and the descriptions are indented.

Quote

A quote gets a rule on its left and an indent.

A footer or cite is muted 
<blockquote>
	<p>A quote gets a rule on its left and an indent.</p>
	<footer>
		<cite>A footer or cite is muted</cite>
	</footer>
</blockquote>

A footer or cite inside a blockquote is muted and small.

Code
git clone repo
cd repo
npm install
<pre><code>git clone repo
cd repo
npm install</code></pre>

A pre scrolls sideways, and the code inside it drops its own fill and padding.