Register

Typography

Inter for words, Geist Mono for codes; one scale of 11 sizes

The scale

Every size, from the display sizes down to the smallest text.

fs-d2 · 72/80Fresh bread
fs-d1 · 48/56Fresh bread
fs-5xl · 36/44Fresh bread every morning
fs-4xl · 30/36Fresh bread every morning
fs-3xl · 24/32Fresh bread every morning
fs-2xl · 20/28Fresh bread every morning
fs-xl · 18/28Fresh bread every morning
fs-lg · 16/24Fresh bread every morning
fs-md · 14/20Fresh bread every morning
fs-sm · 13/20Fresh bread every morning
fs-xs · 12/16Fresh bread every morning
Show the code
<div class="w-100">
<div class="type-row">
<small>fs-d2 · 72/80</small>
<span style="font-size: var(--fs-d2); line-height: var(--lh-d2); font-weight: 600;">Fresh bread</span>
</div>
<div class="type-row">
<small>fs-d1 · 48/56</small>
<span style="font-size: var(--fs-d1); line-height: var(--lh-d1); font-weight: 600;">Fresh bread</span>
</div>
<div class="type-row">
<small>fs-5xl · 36/44</small>
<span style="font-size: var(--fs-5xl); line-height: var(--lh-5xl); font-weight: 600;">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-4xl · 30/36</small>
<span style="font-size: var(--fs-4xl); line-height: var(--lh-4xl); font-weight: 600;">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-3xl · 24/32</small>
<span style="font-size: var(--fs-3xl); line-height: var(--lh-3xl); font-weight: 600;">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-2xl · 20/28</small>
<span style="font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600;">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-xl · 18/28</small>
<span style="font-size: var(--fs-xl); line-height: var(--lh-xl); font-weight: 600;">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-lg · 16/24</small>
<span style="font-size: var(--fs-lg); line-height: var(--lh-lg);">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-md · 14/20</small>
<span style="font-size: var(--fs-md); line-height: var(--lh-md);">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-sm · 13/20</small>
<span style="font-size: var(--fs-sm); line-height: var(--lh-sm);">Fresh bread every morning</span>
</div>
<div class="type-row">
<small>fs-xs · 12/16</small>
<span style="font-size: var(--fs-xs); line-height: var(--lh-xs);">Fresh bread every morning</span>
</div>
</div>

Headings

The named title styles, each one size on the scale.

title-1 · fs-3xl · 24/32Page title
title-2 · fs-xl · 18/28Section title
title-3 · fs-lg · 16/24Card title
Show the code
<div class="w-100">
<div class="type-row">
<small>title-1 · fs-3xl · 24/32</small>
<span class="title-1">Page title</span>
</div>
<div class="type-row">
<small>title-2 · fs-xl · 18/28</small>
<span class="title-2">Section title</span>
</div>
<div class="type-row">
<small>title-3 · fs-lg · 16/24</small>
<span class="title-3">Card title</span>
</div>
</div>

Text

Body, small and secondary text.

body · fs-md · 14/20

A café and grocery with three stores in and around Portland, Maine.

fs-sm · muted

Updated at 17:30.

mono · numbers

R-041182 · $55.23 · 07110 01000 37

Show the code
<div class="w-100">
<div class="type-row">
<small>body · fs-md · 14/20</small>
<p>A café and grocery with three stores in and around Portland, Maine.</p>
</div>
<div class="type-row">
<small>fs-sm · muted</small>
<p class="fs-sm muted">Updated at 17:30.</p>
</div>
<div class="type-row">
<small>mono · numbers</small>
<p class="mono">R-041182 · $55.23 · 07110 01000 37</p>
</div>
</div>

Quote and code

A customer’s words; a key to press.

“The best flat white in Portland, and they remember my order.”
A customer on Google

Press / to search. The receipt number is R-041182.

Show the code
<div class="stack w-100">
<blockquote class="quote">“The best flat white in Portland, and they remember my order.”<footer>A customer on Google</footer>
</blockquote>
<p>Press <kbd class="kbd">/</kbd> to search. The receipt number is <code class="mono">R-041182</code>.</p>
</div>

Lists

Bullets and numbers.

  • Coffee
  • Bakery
  • Grocery
  1. Count the drawer
  2. Check the totals
  3. Close the till
Show the code
<div class="row w-100">
<div class="col-12 col-md-6">
<ul class="ps-4">
<li>Coffee</li>
<li>Bakery</li>
<li>Grocery</li>
</ul>
</div>
<div class="col-12 col-md-6">
<ol class="ps-4">
<li>Count the drawer</li>
<li>Check the totals</li>
<li>Close the till</li>
</ol>
</div>
</div>

Inline text

The elements a sentence can use.

<mark> · Marked

three stores

<strong> · Bold

closed on Monday

<em> · Emphasis

only on Saturdays

<u> · Underlined

Market Street

<del> · Deleted

$4.20 $3.90

<ins> · Inserted

Now with oat milk

<s> · No longer true

Open until 6 pm

<small> · Small print

Prices include tax.

<abbr> · Abbreviation

SKU

<code> · Code

HD-1001

<kbd> · A key

Ctrl K

Show the code
<div class="w-100">
<div class="type-row">
<small>&lt;mark&gt; · Marked</small>
<p>
<mark>three stores</mark>
</p>
</div>
<div class="type-row">
<small>&lt;strong&gt; · Bold</small>
<p>
<strong>closed on Monday</strong>
</p>
</div>
<div class="type-row">
<small>&lt;em&gt; · Emphasis</small>
<p>
<em>only on Saturdays</em>
</p>
</div>
<div class="type-row">
<small>&lt;u&gt; · Underlined</small>
<p>
<u>Market Street</u>
</p>
</div>
<div class="type-row">
<small>&lt;del&gt; · Deleted</small>
<p>
<del>$4.20</del> $3.90</p>
</div>
<div class="type-row">
<small>&lt;ins&gt; · Inserted</small>
<p>
<ins>Now with oat milk</ins>
</p>
</div>
<div class="type-row">
<small>&lt;s&gt; · No longer true</small>
<p>
<s>Open until 6 pm</s>
</p>
</div>
<div class="type-row">
<small>&lt;small&gt; · Small print</small>
<p>
<small>Prices include tax.</small>
</p>
</div>
<div class="type-row">
<small>&lt;abbr&gt; · Abbreviation</small>
<p>
<abbr title="Stock keeping unit">SKU</abbr>
</p>
</div>
<div class="type-row">
<small>&lt;code&gt; · Code</small>
<p>
<code>HD-1001</code>
</p>
</div>
<div class="type-row">
<small>&lt;kbd&gt; · A key</small>
<p>
<kbd class="kbd">Ctrl</kbd> <kbd class="kbd">K</kbd>
</p>
</div>
</div>