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>Quality (Typography & Readability) — Should Flag vs Should Pass</title>
7 <style>
8 /* Two-column fixture: left = should flag, right = should pass.
9 Covers the typography-quality rules that need real browser layout
10 (line-length, tight-leading, tiny-text, justified-text, all-caps-body,
11 wide-tracking, skipped-heading). All are browser-only — see
12 tests/detect-antipatterns-browser.test.mjs for assertions. */
13 body { font-family: system-ui, sans-serif; background: #fafafa; padding: 24px; margin: 0; color: #0f172a; line-height: 1.6; }
14 .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; max-width: 1280px; margin: 0 auto; }
15 .col h2 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px; color: #475569; }
16 .col h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; margin: 24px 0 8px; color: #64748b; }
17 .case { margin-bottom: 16px; padding: 16px; background: white; border: 1px solid #e2e8f0; border-radius: 8px; }
18 .case-label { display: block; font-size: 12px; color: #64748b; margin-bottom: 6px; font-style: italic; }
19
20 /* ── FLAG: typography quality issues ── */
21
22 /* Line length: 12px body text fits >85 chars/line in a ~528px column.
23 12px is not below the tiny-text 12px floor (rule fires at <12px). */
24 .long-lines {
25 font-size: 12px;
26 line-height: 1.6;
27 }
28
29 /* Tight leading */
30 .tight-leading {
31 font-size: 16px;
32 line-height: 1.0;
33 max-width: 40em;
34 }
35
36 /* Tiny body text */
37 .tiny-text {
38 font-size: 10px;
39 line-height: 1.6;
40 max-width: 40em;
41 }
42 .tiny-text-11 {
43 font-size: 11px;
44 line-height: 1.6;
45 max-width: 40em;
46 }
47
48 /* Justified text without hyphens */
49 .justified-no-hyphens {
50 text-align: justify;
51 max-width: 30em;
52 font-size: 16px;
53 line-height: 1.6;
54 }
55
56 /* All-caps long body */
57 .all-caps-body {
58 text-transform: uppercase;
59 font-size: 16px;
60 max-width: 40em;
61 line-height: 1.6;
62 }
63
64 /* Wide letter spacing on body */
65 .wide-tracking-body {
66 letter-spacing: 0.15em;
67 font-size: 16px;
68 max-width: 40em;
69 line-height: 1.6;
70 }
71
72 /* ── PASS: comfortable typography ── */
73
74 .good-measure {
75 max-width: 65ch;
76 font-size: 16px;
77 line-height: 1.6;
78 }
79
80 .good-leading {
81 font-size: 16px;
82 line-height: 1.6;
83 max-width: 40em;
84 }
85
86 .good-text-size {
87 font-size: 16px;
88 line-height: 1.6;
89 max-width: 40em;
90 }
91
92 /* Justified text WITH hyphens — fine */
93 .justified-with-hyphens {
94 text-align: justify;
95 hyphens: auto;
96 -webkit-hyphens: auto;
97 max-width: 30em;
98 font-size: 16px;
99 line-height: 1.6;
100 }
101
102 /* Short label in all-caps (passes — under 30 chars) */
103 .label-caps {
104 text-transform: uppercase;
105 font-size: 12px;
106 font-weight: 600;
107 letter-spacing: 0.1em;
108 color: #475569;
109 }
110
111 /* Wide tracking on a short uppercase label (passes — both conditions excluded) */
112 .label-tracking {
113 letter-spacing: 0.15em;
114 text-transform: uppercase;
115 font-size: 12px;
116 font-weight: 600;
117 color: #475569;
118 }
119 </style>
120</head>
121<body>
122 <div class="grid">
123
124 <!-- ════════════════════════════════════════════════════════════
125 LEFT COLUMN: should flag
126 ═══════════════════════════════════════════════════════════ -->
127 <div class="col" data-col="flag">
128 <h2>Should flag</h2>
129
130 <h3>Line length too long</h3>
131 <div class="case">
132 <span class="case-label">no max-width on a paragraph</span>
133 <p class="long-lines">This paragraph has no max-width constraint at all, which means on a wide monitor or ultrawide display, each line of text can stretch to 150 or even 200 characters wide. Research consistently shows that line lengths beyond 75 characters significantly reduce reading speed and comprehension. The eye has to travel too far to find the beginning of the next line, causing readers to lose their place. A simple max-width of 65ch to 75ch on the paragraph or its container would fix this entirely.</p>
134 </div>
135
136 <h3>Tight line height</h3>
137 <div class="case">
138 <span class="case-label">line-height: 1.0</span>
139 <p class="tight-leading">This paragraph has a line-height of 1.0, which means the lines are touching. Multi-line body text needs breathing room between lines for readability. A line-height of 1.5 to 1.7 is generally recommended for body text.</p>
140 </div>
141
142 <h3>Tiny body text</h3>
143 <div class="case">
144 <span class="case-label">10px body text</span>
145 <p class="tiny-text">This body text is only 10px. While this might be fine for a disclaimer or legal footnote, it's too small for primary content that users need to actually read. Aim for at least 14px for body content, 16px is ideal.</p>
146 </div>
147
148 <h3>Justified text without hyphens</h3>
149 <div class="case">
150 <span class="case-label">text-align: justify, no hyphens: auto</span>
151 <p class="justified-no-hyphens">This paragraph uses text-align: justify, which forces each line to stretch to fill the full width. Without hyphenation support, this creates uneven gaps between words known as "rivers of white space" that flow vertically through the text. Left-aligned text is almost always more readable on the web.</p>
152 </div>
153
154 <h3>All-caps body text</h3>
155 <div class="case">
156 <span class="case-label">text-transform: uppercase on a long passage</span>
157 <p class="all-caps-body">This entire paragraph is in uppercase via text-transform. While all-caps works for short labels, headings, or navigation items, longer body text in uppercase is significantly harder to read because we lose the word shape cues that come from ascenders and descenders in mixed-case text.</p>
158 </div>
159
160 <h3>Wide letter spacing on body text</h3>
161 <div class="case">
162 <span class="case-label">letter-spacing: 0.15em on body text</span>
163 <p class="wide-tracking-body">This body text has letter-spacing: 0.15em applied to it. While subtle tracking adjustments can improve readability for headings or all-caps text, adding significant letter spacing to body text actually makes it harder to read by disrupting natural character groupings.</p>
164 </div>
165
166 <h3>Skipped heading levels</h3>
167 <div class="case">
168 <span class="case-label">h1 → h3 (missing h2)</span>
169 <h1 style="font-size: 20px; margin: 0 0 4px;">Top heading</h1>
170 <h3 style="font-size: 16px; margin: 0;">Skips straight to h3</h3>
171 </div>
172 </div>
173
174 <!-- ════════════════════════════════════════════════════════════
175 RIGHT COLUMN: should pass
176 ═══════════════════════════════════════════════════════════ -->
177 <div class="col" data-col="pass">
178 <h2>Should pass</h2>
179
180 <h3>Comfortable line length</h3>
181 <div class="case">
182 <span class="case-label">max-width: 65ch on the paragraph</span>
183 <p class="good-measure">This paragraph has a max-width of 65ch, keeping the line length comfortable for reading. The eye can easily track from the end of one line to the beginning of the next without losing its place.</p>
184 </div>
185
186 <h3>Comfortable line height</h3>
187 <div class="case">
188 <span class="case-label">line-height: 1.6</span>
189 <p class="good-leading">This paragraph has a line-height of 1.6, which gives multi-line text plenty of room to breathe and improves the rhythm of the page.</p>
190 </div>
191
192 <h3>Comfortable body text size</h3>
193 <div class="case">
194 <span class="case-label">16px body text</span>
195 <p class="good-text-size">This is 16px body text — the recommended baseline for comfortable reading on modern displays.</p>
196 </div>
197
198 <h3>Justified text with hyphens</h3>
199 <div class="case">
200 <span class="case-label">text-align: justify + hyphens: auto</span>
201 <p class="justified-with-hyphens">When justified text is paired with hyphens: auto, the browser can break long words across lines, eliminating the rivers of white space and making the justification look intentional rather than awkward.</p>
202 </div>
203
204 <h3>Short label in all-caps</h3>
205 <div class="case">
206 <span class="case-label">short label, uppercase</span>
207 <span class="label-caps">Featured</span>
208 </div>
209
210 <h3>Wide tracking on a short uppercase label</h3>
211 <div class="case">
212 <span class="case-label">letter-spacing on a short uppercase label</span>
213 <span class="label-tracking">Beta</span>
214 </div>
215
216 <h3>Proper heading hierarchy</h3>
217 <div class="case">
218 <span class="case-label">h1 → h2 → h3</span>
219 <h1 style="font-size: 20px; margin: 0 0 4px;">Top heading</h1>
220 <h2 style="font-size: 18px; margin: 0 0 4px;">Second level</h2>
221 <h3 style="font-size: 16px; margin: 0;">Third level</h3>
222 </div>
223 </div>
224 </div>
225 <script src="/js/detect-antipatterns-browser.js"></script>
226</body>
227</html>