Audit typography across the project for readability and consistency.
Target: $ARGUMENTS (optional — specific component or page)
If no target is provided, audit all content-rendering surfaces.
Audit Dimensions
1. Reading Comfort
- Body text size: 16-18px (text-base to text-lg)
- Line height: 1.6-1.8 for body text (leading-relaxed or leading-loose)
- Line length: max 65-75ch (
max-w-proseormax-w-[65ch]) - Paragraph spacing: adequate margin between paragraphs
2. Heading Hierarchy
- Clear visual progression: h1 > h2 > h3 > h4
- Consistent heading styles across pages
- No skipped heading levels in document structure
- Headings use appropriate font weight (bold/semibold for distinction)
3. Responsive Typography
- Text scales appropriately:
text-xl md:text-2xl lg:text-4xl - No text overflow on mobile (long words, URLs)
- Minimum 16px body text on mobile (prevents iOS zoom on inputs)
4. Font Loading
- Web fonts loaded with
font-display: swaporoptional - System font fallback stack is appropriate
- No FOIT (Flash of Invisible Text) on slow connections
5. Content Typography
For rich text / article content:
- Lists (ul/ol) have proper indentation and markers
- Blockquotes are visually distinct
- Code blocks have monospace font and appropriate styling
- Links are visually distinct from surrounding text
- Bold and italic styles render correctly
6. Whitespace & Spacing
- Consistent spacing between sections
- Adequate padding in cards and containers
- No cramped text against edges
Output Format
## Typography Audit: [target]
### Issues
| # | Severity | Category | File:Line | Issue | Fix |
|---|----------|----------|-----------|-------|-----|
### Recommendations
- ...
Apply Critical and High severity fixes automatically.