1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Typography — Clean Patterns</title>
7 <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Fraunces:opsz,wght@9..144,400;9..144,700&display=swap" rel="stylesheet">
8 <style>
9 body {
10 font-family: 'Instrument Sans', system-ui, sans-serif;
11 background: #f9fafb;
12 padding: 2rem;
13 font-size: 16px;
14 color: #111827;
15 }
16 h1 {
17 font-family: 'Fraunces', Georgia, serif;
18 font-size: 48px;
19 font-weight: 700;
20 margin-bottom: 0.5rem;
21 }
22 h2 {
23 font-family: 'Fraunces', Georgia, serif;
24 font-size: 32px;
25 font-weight: 700;
26 margin: 2rem 0 0.75rem;
27 }
28 h3 { font-size: 24px; font-weight: 600; }
29 p { font-size: 16px; color: #6b7280; margin-top: 0.25rem; }
30 .caption { font-size: 12px; color: #6b7280; }
31 </style>
32</head>
33<body>
34 <h1>Good Typography</h1>
35 <p>This page uses distinctive fonts, proper pairing, and strong hierarchy.</p>
36
37 <h2>Two Font Families</h2>
38 <p>Fraunces (serif) for headings, Instrument Sans for body. Clear contrast in both structure and personality.</p>
39
40 <h3>Strong Size Hierarchy</h3>
41 <p>Sizes range from 12px to 48px — a 4:1 ratio with clear visual steps.</p>
42 <p class="caption">Caption text is clearly distinct from body.</p>
43<script src="/js/detect-antipatterns-browser.js"></script>
44</body>
45</html>