Reference

The Checklist

110+ rules for obsessive web craft. Check items off as you audit your project — progress persists across sessions.

Overall progress0/110 (0%)

Domain

Priority

Punctuationtypography0/8

Use smart quotes, not straight quotes

critical

Use proper apostrophes

critical

Use em-dashes for breaks in thought

critical

Use en-dashes for ranges

critical

Use hyphens only for compound words

critical

Use primes for measurements, not quotes

critical

Single space after periods

critical

Use midpoint (·) for inline lists

critical

Font Selectiontypography0/5

Use true italic, not faux italic

critical

Use true bold, not faux bold

critical

Limit to 2 typefaces maximum

critical

Use variable fonts when available

critical

Subset fonts for performance

critical

Sizingtypography0/5

Body text 16–24px on desktop

high

Line length 45–75 characters

high

Line height 1.45–1.5 unitless

high

Use a modular scale for sizes

high

Responsive type with clamp()

high

Spacingtypography0/4

No letterspacing on body text

high

Add letterspacing to uppercase text

high

Paragraph spacing OR indents, never both

high

Subheads closer to following text

high

OpenType Featurestypography0/5

Enable font-kerning: normal

medium

Enable standard ligatures

medium

Disable ligatures in code blocks

medium

Use tabular figures in data tables

medium

Use real small caps, not fake ones

medium

Hierarchytypography0/4

One h1 per page

medium

20–25% minimum size jump between levels

medium

Lighten weight as size increases

medium

Never match heading color to link color

medium

Layouttypography0/3

Fix widows in headlines with text-wrap: balance

medium

Use non-breaking spaces for number + unit

medium

Don’t center-align body text

medium

Pairingtypography0/3

Match stress angles when pairing

medium

Don’t pair two similar sans-serifs

medium

Superfamilies eliminate pairing risk

medium

Decisionanimation0/3

Never animate keyboard-initiated actions

critical

Every animation needs a purpose

critical

Rare interactions get more personality

critical

Easinganimation0/3

Never use ease-in for entrances

critical

Use ease-out for most UI transitions

critical

Use custom cubic-bezier curves

critical

Durationanimation0/5

Springsanimation0/3

Use springs for drag and gesture

high

Springs maintain velocity on interrupt

high

Use duration + bounce over raw spring params

high

Performanceanimation0/4

Only animate transform and opacity

high

will-change on hover, not permanent

high

Respect prefers-reduced-motion

high

Pause off-screen animations

high

Patternsanimation0/6

Popovers emerge from their trigger

medium

Scale from 0.95, not 0

medium

Directional tabs move left/right

medium

Stagger 30–50ms per item

medium

Exit animations faster than enter

medium

Animations should not cause layout shift

medium

Spacingcraft0/3

Use concentric border radius

critical

Use 4px or 8px spacing grid

critical

Optical centering for icons in circles

critical

Accessibilitycraft0/5

Semantic HTML before ARIA

critical

Icon buttons need aria-label

critical

Skip links on every page

critical

Minimum 4.5:1 contrast ratio

critical

Heading hierarchy without skipping levels

critical

Interactioncraft0/5

Hit targets 44px minimum on mobile

critical

Focus trap in modals

critical

Restore focus on dialog close

critical

Links navigate, buttons act

critical

Hover gates with @media(hover: hover)

critical

Formscraft0/5

Every input needs a visible label

critical

Set autocomplete attributes

critical

Use inputmode for mobile keyboards

critical

Inline errors with focus management

critical

Minimum 16px font on mobile inputs

critical

Layoutcraft0/5

Flex/grid, not JavaScript measurement

high

overscroll-behavior: contain on modals

high

Design empty states

high

Design loading states

high

Design error states

high

Performancecraft0/4

Set width and height on images

high

Preload critical fonts

high

Use font-display: swap

high

Preconnect to font origins

high

Polishcraft0/4

Image outlines on white backgrounds

medium

Layered subtle shadows

medium

Audit every border and separator

medium

Navigation chrome below content

medium

Structurecopywriting0/3

Lead with Why, not What

critical

The customer is the hero, not the brand

critical

Every heading passes the “so what?” test

critical

Claritycopywriting0/4

CTA = verb + outcome + qualifier

high

Never use “Submit” or “Click here”

high

Sentences under 25 words

high

Cut “in order to” and “we believe”

high

Proofcopywriting0/3

Replace adjectives with specific numbers

high

Show, don’t tell

high

Every claim needs evidence

high

AI Detectioncopywriting0/5

Scan for Tier 1 words: delve, leverage, robust, seamless

medium

No em-dash chains in copy

medium

No chatbot artifacts

medium

No formulaic Rule of Three lists

medium

Vary paragraph lengths

medium

Page Typescopywriting0/3

Homepage serves highest-value segment

medium

Landing page message-matches the ad

medium

One primary CTA per page

medium