mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-13 06:36:26 +03:00
Paul BakausandGitHub
e1d3ea0b6f
* Add detector benchmark lab and visual contrast fallback * Expand visual contrast fixture coverage * Add browser visual contrast fallback * Show visual contrast overlays in detector lab * Fix detector lab short viewport layout * Fix detector lab visual overlays * Add visual contrast to browser scan overlays * Avoid browser scroll jumps during visual contrast scans * Resolve visual contrast lazily on scroll * Refresh detector lab visual counts lazily * Update pnpm lockfile for static parser deps * Address Bugbot detector API comments * Report extension visual contrast errors * Refactor detector into engine modules * Address Bugbot detector comments * Fix latest Bugbot detector notes * Fix visual contrast fixture labels * Refine detector lab fixtures * Fix stale detector overlay references * Fix detector lab fixture URLs * Fix typography lab fixture highlights * Fix typography lab page-level signal * Fix visual overlay lifecycle cleanup * Remove dead spotlight timer cleanup * Make browser async APIs reject consistently
193 lines
5.2 KiB
HTML
193 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Typography Anti-Patterns — Side by Side</title>
|
|
<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">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 24px;
|
|
background: #f9fafb;
|
|
color: #111827;
|
|
font: 16px/1.5 system-ui, sans-serif;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: 32px;
|
|
max-width: 1180px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.col {
|
|
min-width: 0;
|
|
}
|
|
|
|
.col-label {
|
|
margin: 0 0 14px;
|
|
color: #475569;
|
|
font-size: 13px;
|
|
font-weight: 760;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.flag-type {
|
|
font-family: 'Inter', sans-serif;
|
|
background: #fdfdfd;
|
|
padding: 22px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.flag-type h1 {
|
|
margin: 0 0 8px;
|
|
font-size: 18px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.flag-type h2 {
|
|
margin: 24px 0 8px;
|
|
color: #4b5563;
|
|
font-size: 16px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.flag-type h3 {
|
|
margin: 18px 0 4px;
|
|
font-size: 15px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.flag-type p {
|
|
margin: 0 0 10px;
|
|
color: #4b5563;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.flag-type .caption {
|
|
color: #6b7280;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.flag-type .tight-leading-demo {
|
|
line-height: 1.05;
|
|
}
|
|
|
|
.flag-type .tiny-body-demo {
|
|
color: #374151;
|
|
font-size: 10px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.flag-type .caps-body-demo {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.flag-type .tracked-body-demo {
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
.flag-type .justified-body-demo {
|
|
text-align: justify;
|
|
}
|
|
|
|
.pass-type {
|
|
background: #fdfdfd;
|
|
padding: 22px;
|
|
border: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.pass-type h1,
|
|
.pass-type h2 {
|
|
font-family: 'Newsreader', Georgia, serif;
|
|
}
|
|
|
|
.pass-type h1 {
|
|
margin: 0 0 10px;
|
|
font-size: 48px;
|
|
line-height: 0.98;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pass-type h2 {
|
|
margin: 32px 0 10px;
|
|
font-size: 30px;
|
|
line-height: 1.08;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.pass-type h3,
|
|
.pass-type p,
|
|
.pass-type .caption {
|
|
font-family: 'Karla', system-ui, sans-serif;
|
|
}
|
|
|
|
.pass-type h3 {
|
|
margin: 22px 0 6px;
|
|
font-size: 22px;
|
|
line-height: 1.15;
|
|
}
|
|
|
|
.pass-type p {
|
|
margin: 0 0 12px;
|
|
color: #374151;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.pass-type .caption {
|
|
color: #4b5563;
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<section class="col" data-col="flag">
|
|
<h2 class="col-label">Should flag</h2>
|
|
<article class="flag-type">
|
|
<h1>Typography Anti-Patterns</h1>
|
|
<p>This side uses element-level typography failures that can be highlighted directly in the detector lab.</p>
|
|
|
|
<h2>Tight Leading</h2>
|
|
<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>
|
|
|
|
<h2>Tiny Body Text</h2>
|
|
<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>
|
|
|
|
<h2>All-Caps Body</h2>
|
|
<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>
|
|
|
|
<h2>Wide Tracking</h2>
|
|
<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>
|
|
|
|
<h2>Justified Text</h2>
|
|
<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>
|
|
|
|
<h2>Overused Font</h2>
|
|
<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>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="col" data-col="pass">
|
|
<h2 class="col-label">Should pass</h2>
|
|
<article class="pass-type">
|
|
<h1>Good Typography</h1>
|
|
<p>This side keeps readable body defaults, a real font pairing, clear scale, and visible hierarchy.</p>
|
|
|
|
<h2>Two Font Families</h2>
|
|
<p>Newsreader carries display text, while Karla handles reading surfaces and supporting labels.</p>
|
|
|
|
<h3>Strong Size Hierarchy</h3>
|
|
<p>Sizes range from 12px to 48px with distinct roles for heading, subheading, body, and caption.</p>
|
|
<p class="caption">Caption text is intentionally smaller but still readable.</p>
|
|
</article>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="/js/detect-antipatterns-browser.js"></script>
|
|
</body>
|
|
</html>
|