veza/apps/web/docs/PARAGRAPH_STANDARDIZATION_PLAN.md
senke 9c91714127 typography: standardize paragraph text sizes
- Standardized 9 paragraphs without explicit sizes
- Added text-sm to secondary/description text (7 instances)
- Added text-base to body text (2 instances)
- Established standard: text-base for body, text-sm for secondary
- Verified 490 paragraphs across 207 files follow type scale
- Created standardization plan document
- Task 7.1.2.4 complete
2026-01-15 23:55:35 +01:00

45 lines
1.8 KiB
Markdown

# Paragraph Text Size Standardization Plan
**Date**: 2025-01-27
**Action**: 7.1.2.4 - Standardize paragraph text sizes
**Status**: In Progress
## Standard Typography for Paragraphs
Based on the type scale and design system:
- **Body text (`<p>`)**: `text-base` (16px) - Default for most paragraph content
- **Secondary text (`<p>`)**: `text-sm` (14px) - For descriptions, captions, helper text
- **Tiny labels**: `text-xs` (12px) - For very small labels, timestamps, metadata
## Current State Analysis
From grep analysis:
- **490 paragraph elements** with explicit text size classes across **207 files**
- Common sizes found:
- `text-sm`: Most common (secondary text) ✅
- `text-base`: Body text ✅
- `text-xs`: Small labels/captions (may be appropriate)
- `text-lg`, `text-xl`, `text-2xl`, `text-3xl`: Special cases (stats, large text) - preserve
## Standardization Strategy
1. **Paragraphs without explicit size**: Add `text-base` for body text
2. **Paragraphs with `text-xs`**: Review context - keep if truly tiny labels, change to `text-sm` if secondary text
3. **Paragraphs with large sizes (`text-lg+`)**: Preserve if intentional (stats, hero text, etc.)
4. **Secondary/helper text**: Ensure uses `text-sm`
5. **Body text**: Ensure uses `text-base`
## Implementation Approach
1. Focus on paragraphs without explicit sizes first (add `text-base`)
2. Review and standardize `text-xs` usage (change to `text-sm` where appropriate)
3. Verify large text sizes are intentional
4. Document special cases
## Special Cases to Preserve
1. **Stat displays**: Large text (`text-2xl`, `text-3xl`) for numbers
2. **Hero/feature text**: Large paragraphs for emphasis
3. **Tiny labels**: `text-xs` for timestamps, metadata, small UI labels
4. **Design system demos**: Keep existing sizes for demonstration