Home
Navigation

Animal Rationis Capax

on art, work, and becoming.

Typography System Test

Heading Level 1

This is a paragraph with bold text, italic text, and a link to test hover states. The base font size should be 20px on mobile, 21px on tablet, and 22px on desktop.

Heading Level 2

Let's test some inline code: const fontSize = '1rem'; and see how it scales with our Plex Mono compensation factor.

Heading Level 3

This is a blockquote to test the accent color border and italic styling. It should have proper spacing and the accent color on the left border.

With multiple paragraphs to test spacing.

Heading Level 4

// Code block test
function testTypography() {
  const baseSize = getComputedStyle(document.documentElement).fontSize;
  console.log(`Base font size: ${baseSize}`);
}
Heading Level 5
  • Unordered list item one
  • Unordered list item two with inline code
  • Unordered list item three
Heading Level 6
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three
Test image for caption styling
This caption follows Aldine principles: EB Garamond at 0.875rem, soft grey italic, 80% max-width with elegant spacing

This text uses small caps for testing EB Garamond SC Regular.

This text uses small caps display for testing EB Garamond SC Display.

Numbers in oldstyle: 1234567890

Font Family Use Case Scale Factor
EB Garamond Body text 1.0
IBM Plex Sans Headings & UI 0.94
IBM Plex Mono Code 0.88

This is a callout box to test the utility class styling with proper padding.

Final paragraph to test spacing rhythm. All elements should follow the 8px base unit spacing system with consistent margins throughout.