Typography Test - Geist Font System

Code Block Test

Here's a JavaScript example to test Geist Mono:

// Test slashed zero: 0 vs O
const numbers = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const letters = ['O', 'I', 'l', '1', '0'];

// Tabular numbers should align:
const prices = [
  { item: 'Widget', price: 10.00 },
  { item: 'Gadget', price: 125.50 },
  { item: 'Thing',  price: 1099.99 },
];

function calculateTotal(items) {
  return items.reduce((sum, item) => sum + item.price, 0);
}

Inline Code Test

Test inline code: const x = 0 should show slashed zero. Compare O (letter) vs 0 (number).

Mixed: O0O0O0 and 1lI1lI should be distinguishable.

Heading Hierarchy Test

H3 Subsection (weight 600)

Body text at 17px with -0.011em letter-spacing.

H4 Component Header (weight 550)

More body text to verify line-height 1.7.

H5 Minor Header (weight 500)

Testing the progressive weight reduction.

H6 Overline (weight 450)

The lightest heading weight.

Strong and Emphasis

Bold text should be weight 600. Italic text for emphasis.

Deep Dives: Testing bold inline with regular text flow.

Blockquote

This blockquote should have weight 450, no italic style, and use the primary-500 border color.

List Test

• First item with bold text
• Second item with inline code
• Third item with a link