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 Anti-Patterns — Should Flag</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
8 <style>
9 body {
10 font-family: 'Inter', sans-serif;
11 background: #f9fafb;
12 padding: 2rem;
13 }
14 h1 { font-size: 18px; font-weight: 700; margin-bottom: 0.5rem; }
15 h2 { font-size: 16px; font-weight: 600; margin: 2rem 0 0.75rem; color: #6b7280; }
16 h3 { font-size: 15px; font-weight: 600; }
17 p { font-size: 14px; color: #6b7280; margin-top: 0.25rem; }
18 .caption { font-size: 13px; color: #9ca3af; }
19 </style>
20</head>
21<body>
22 <h1>Typography Anti-Patterns</h1>
23 <p>This page triggers three typography detections:</p>
24
25 <h2>1. Overused Font</h2>
26 <p>Inter is loaded from Google Fonts and set as the only font-family. It's the most common AI default.</p>
27
28 <h2>2. Single Font</h2>
29 <p>There's no second font for headings or display text. Everything uses Inter — no typographic variety.</p>
30
31 <h2>3. Flat Type Hierarchy</h2>
32 <p>The font sizes are 13px, 14px, 15px, 16px, 18px — all crammed into a 5px range. No visual contrast between heading and body.</p>
33 <p class="caption">This caption is barely distinguishable from body text.</p>
34
35 <h3>A Subheading</h3>
36 <p>Can you tell this is a subheading? Exactly.</p>
37<script src="/js/detect-antipatterns-browser.js"></script>
38</body>
39</html>