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 — Side by Side</title>
7 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Newsreader:opsz,wght@6..72,400;6..72,700&family=Karla:wght@400;500;700&display=swap" rel="stylesheet">
8 <style>
9 body {
10 margin: 0;
11 padding: 24px;
12 background: #f9fafb;
13 color: #111827;
14 font: 16px/1.5 system-ui, sans-serif;
15 }
16
17 .grid {
18 display: grid;
19 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
20 gap: 32px;
21 max-width: 1180px;
22 margin: 0 auto;
23 }
24
25 .col {
26 min-width: 0;
27 }
28
29 .col-label {
30 margin: 0 0 14px;
31 color: #475569;
32 font-size: 13px;
33 font-weight: 760;
34 letter-spacing: 0.08em;
35 text-transform: uppercase;
36 }
37
38 .flag-type {
39 font-family: 'Inter', sans-serif;
40 background: #fdfdfd;
41 padding: 22px;
42 border: 1px solid #e5e7eb;
43 }
44
45 .flag-type h1 {
46 margin: 0 0 8px;
47 font-size: 18px;
48 line-height: 1.2;
49 }
50
51 .flag-type h2 {
52 margin: 24px 0 8px;
53 color: #4b5563;
54 font-size: 16px;
55 line-height: 1.25;
56 }
57
58 .flag-type h3 {
59 margin: 18px 0 4px;
60 font-size: 15px;
61 line-height: 1.25;
62 }
63
64 .flag-type p {
65 margin: 0 0 10px;
66 color: #4b5563;
67 font-size: 14px;
68 }
69
70 .flag-type .caption {
71 color: #6b7280;
72 font-size: 13px;
73 }
74
75 .flag-type .tight-leading-demo {
76 line-height: 1.05;
77 }
78
79 .flag-type .tiny-body-demo {
80 color: #374151;
81 font-size: 10px;
82 line-height: 1.6;
83 }
84
85 .flag-type .caps-body-demo {
86 text-transform: uppercase;
87 }
88
89 .flag-type .tracked-body-demo {
90 letter-spacing: 0.08em;
91 }
92
93 .flag-type .justified-body-demo {
94 text-align: justify;
95 }
96
97 .pass-type {
98 background: #fdfdfd;
99 padding: 22px;
100 border: 1px solid #e5e7eb;
101 }
102
103 .pass-type h1,
104 .pass-type h2 {
105 font-family: 'Newsreader', Georgia, serif;
106 }
107
108 .pass-type h1 {
109 margin: 0 0 10px;
110 font-size: 48px;
111 line-height: 0.98;
112 font-weight: 700;
113 }
114
115 .pass-type h2 {
116 margin: 32px 0 10px;
117 font-size: 30px;
118 line-height: 1.08;
119 font-weight: 700;
120 }
121
122 .pass-type h3,
123 .pass-type p,
124 .pass-type .caption {
125 font-family: 'Karla', system-ui, sans-serif;
126 }
127
128 .pass-type h3 {
129 margin: 22px 0 6px;
130 font-size: 22px;
131 line-height: 1.15;
132 }
133
134 .pass-type p {
135 margin: 0 0 12px;
136 color: #374151;
137 font-size: 16px;
138 }
139
140 .pass-type .caption {
141 color: #4b5563;
142 font-size: 12px;
143 }
144 </style>
145</head>
146<body>
147 <div class="grid">
148 <section class="col" data-col="flag">
149 <h2 class="col-label">Should flag</h2>
150 <article class="flag-type">
151 <h1>Typography Anti-Patterns</h1>
152 <p>This side uses element-level typography failures that can be highlighted directly in the detector lab.</p>
153
154 <h2>Tight Leading</h2>
155 <p class="tight-leading-demo">This paragraph has a line-height that is too tight for body copy. The lines press into each other and make scanning harder, especially once the text wraps across multiple lines in a production layout.</p>
156
157 <h2>Tiny Body Text</h2>
158 <p class="tiny-body-demo">This body text is set at 10px, which is too small for real reading content and should be reserved for neither primary copy nor explanatory product text.</p>
159
160 <h2>All-Caps Body</h2>
161 <p class="caps-body-demo">This entire paragraph is transformed to uppercase, which removes useful word shapes and makes longer body copy feel like a shout instead of a readable passage.</p>
162
163 <h2>Wide Tracking</h2>
164 <p class="tracked-body-demo">This paragraph spreads every letter apart, a treatment that belongs on short labels at most, not on body copy that people need to read comfortably.</p>
165
166 <h2>Justified Text</h2>
167 <p class="justified-body-demo">This paragraph uses justified alignment without automatic hyphenation. In narrow columns it creates uneven word spacing and distracting rivers through the text block.</p>
168
169 <h2>Overused Font</h2>
170 <p>Inter is also the dominant face on this side of the page, so the browser page-level detector has enough real text elements to show the global overused-font banner.</p>
171 </article>
172 </section>
173
174 <section class="col" data-col="pass">
175 <h2 class="col-label">Should pass</h2>
176 <article class="pass-type">
177 <h1>Good Typography</h1>
178 <p>This side keeps readable body defaults, a real font pairing, clear scale, and visible hierarchy.</p>
179
180 <h2>Two Font Families</h2>
181 <p>Newsreader carries display text, while Karla handles reading surfaces and supporting labels.</p>
182
183 <h3>Strong Size Hierarchy</h3>
184 <p>Sizes range from 12px to 48px with distinct roles for heading, subheading, body, and caption.</p>
185 <p class="caption">Caption text is intentionally smaller but still readable.</p>
186 </article>
187 </section>
188 </div>
189
190 <script src="/js/detect-antipatterns-browser.js"></script>
191</body>
192</html>