Heading 1 — iA Writer Quattro, 20px, medium

Heading 2 — iA Writer Quattro, 18px, medium

Heading 3 — iA Writer Quattro, 16px, medium

Heading 4 — iA Writer Quattro, 16px, italic

The fundamental job of typography is to make text comfortable to read. This paragraph is set in Martina Plantijn at 17px with a line-height of 1.4. The measure (line length) is constrained to roughly 65 characters, following Butterick's recommendation of 45–90 characters per line.

A second paragraph demonstrates the vertical rhythm between blocks. The spacing between paragraphs (0.75em) is deliberately tighter than the default — enough to signal a new thought without creating rivers of whitespace. Bold text uses the font's native bold weight, and italic text uses its true italic cut, not a synthetic slant.

Prose links use a subtle orange underline: an example link. The underline is offset 2px from the baseline and uses the Flexoki orange-300/700 palette for light/dark modes. External links like Butterick's Practical Typography behave identically.

Unordered

• First item in the list
• Second item, slightly longer to show how wrapping behaves when the text extends beyond a single line in the layout
• Third item with inline code inside it

Ordered

1. First numbered item
2. Second numbered item
3. Third numbered item

Typography is the craft of endowing human language with a durable visual form. — Robert Bringhurst

Blockquotes use an orange-tinted left border with italic styling, distinguishing them from regular prose.

Inline code like const x = 42 or font-size: 1.0625rem gets a subtle background tint in Berkeley Mono. It's sized slightly smaller than body text to maintain visual balance.

Code blocks

function greet(name: string): string {
  // Berkeley Mono, 14px, inside a rounded container
  return `Hello, ${name}!`;
}

const result = greet("world");
console.log(result);

Code blocks use sharp 4px corners with a faint border, sized at 14px (text-sm) for density without sacrificing readability.

Regular text, strong text, emphasized text, and strong emphasized text. The font supports true bold and italic cuts — no synthetic weights.

A horizontal rule separates sections:

Content continues below the rule.