Typography
Typefaces, font-size scale, headings, text formatting, code and keyboard input.
The site uses two typefaces: JP (a custom body face) and Permanent Marker (a decorative face for post-it notes and list items).
Body — JP
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
The quick brown fox jumps over the lazy dog. 0123456789
font-family: "JP", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
"Helvetica", Roboto, "Segoe UI", Arial, sans-serif;
Decorative — Permanent Marker
The quick brown fox jumps over the lazy dog. 0123456789
font-family: var(--font-decorative);
Font sizes
Page title
Display
Heading 1
Heading 2
Heading 3, 4 and 5
Body — The quick brown fox jumps over the lazy dog.
Small — The quick brown fox jumps over the lazy dog.
Code — console.log("hello");
font-size: var(--font-size-page-title); /* clamp(66px, 9vw + 1rem, 120px) */
font-size: var(--font-size-display); /* clamp(50px, 25cqw, 200px) */
font-size: var(--font-size-h1); /* clamp(45px, 6vw, 75px) */
font-size: var(--font-size-h2); /* clamp(30px, 6.4vw, 45px) */
font-size: var(--font-size-h3); /* clamp(24px, 5.6vw, 35px) */
font-size: var(--font-size-body); /* clamp(22px, 3vw, 30px) */
font-size: var(--font-size-small); /* clamp(18px, 3vw, 24px) */
font-size: var(--font-size-code); /* clamp(17px, 2.4vw, 22px) */
Headings
Heading 1 — default
Heading 1 — display
Heading 1 — small title
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h1 class="display">Heading 1 — display</h1>
<h1 class="small-title">Heading 1 — small title</h1>
<h2>Heading 2</h2>
Paragraph modifiers
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Base price £99 (excluding VAT).
As they say, the quick brown fox jumps over the lazy dog
.
From The Quick Brown Fox, 2024.
A fox is a small omnivorous mammal.
Solve for x where x + 2 = 5.
Error: file not found.
John Peart123 Fox Lane
London, UK
Paragraph classes
A lead paragraph sits at the top of a post and uses a larger, bolder style.
A display paragraph uses a large, balanced line-wrapped style for emphasis.
Small caps — the quick brown fox jumps over the lazy dog.
Small text — the quick brown fox jumps over the lazy dog.
Extra small text — the quick brown fox jumps over the lazy dog.
Secondary text — the quick brown fox jumps over the lazy dog.
Centered text.
Right-aligned text.
<p class="lead">…</p>
<p class="display">…</p>
<p class="small-caps">…</p>
<p class="small-text">…</p>
<p class="extra-small-text">…</p>
<p class="secondary-text">…</p>
<p class="align-center">…</p>
<p class="align-right">…</p>
Inline elements
Footnote reference: the quick brown fox1 jumps over the lazy dog.
Subscript / superscript: H2O and E = mc2.
Abbreviation: the HTML specification.
Inline code: use console.log() to print.
Keyboard input: press Ctrl + C to copy.
Code block
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("world"));
Preformatted text
The quick brown fox
jumps over
the lazy dog.