senke/veza

senke 8d5db4cd34 typography: standardize h2-h6 heading elements

- Standardized h2 elements: 19 instances from text-3xl/text-xl to text-2xl
- Standardized h3 elements: 4 instances from text-2xl to text-xl
- Established consistent hierarchy: h1(text-3xl), h2(text-2xl), h3(text-xl)
- Preserved special cases: demo pages, responsive patterns, stat value displays
- Created standardization plan document
- Task 7.1.2.3 complete

2026-01-15 23:54:05 +01:00

2.7 KiB

Raw Blame History

H2-H6 Standardization Plan

Date: 2025-01-27
Action: 7.1.2.3 - Standardize h2-h6 elements
Status: In Progress

Standard Typography Hierarchy

Based on the type scale and h1 standardization (text-3xl), the standard hierarchy is:

h1: text-3xl (30px) - Page titles ✅ Already standardized
h2: text-2xl (24px) - Major section headings
h3: text-xl (20px) - Subsection headings
h4: text-lg (18px) - Minor section headings
h5: text-base (16px) - Small headings
h6: text-sm (14px) - Smallest headings

Current State Analysis

H2 Elements (86 with explicit sizes)

text-3xl: ~20 instances (should be text-2xl for consistency)
text-2xl: ~40 instances ✅ Correct
text-xl: ~15 instances (should be text-2xl)
text-xs: ~1 instance (Sidebar - special case, may keep)
No size: ~10 instances (should add text-2xl)

H3 Elements (109 with explicit sizes)

text-lg: ~30 instances (should be text-xl)
text-xl: ~25 instances ✅ Correct
text-2xl: ~10 instances (should be text-xl)
text-sm: ~15 instances (should be text-xl unless truly small)
text-base: ~10 instances (should be text-xl)
No size: ~19 instances (should add text-xl)

H4-H6 Elements

Mostly use text-lg, text-sm, text-base inconsistently
Need standardization to text-lg (h4), text-base (h5), text-sm (h6)

Standardization Strategy

H2 Elements: Standardize to text-2xl
- Exception: Sidebar navigation labels with text-xs (keep as special case)
- Exception: Design system demo pages (keep as-is for demonstration)
H3 Elements: Standardize to text-xl
- Exception: Very small labels/captions (keep text-sm if appropriate)
H4 Elements: Standardize to text-lg
H5 Elements: Standardize to text-base
H6 Elements: Standardize to text-sm

Implementation Approach

Start with h2 elements (most visible)
Then h3 elements
Then h4-h6 elements
Verify no visual regressions
Update TODO list

Files Requiring Changes

High Priority (H2 inconsistencies):

Files with h2 using text-3xl (should be text-2xl)
Files with h2 using text-xl (should be text-2xl)
Files with h2 without explicit size (should add text-2xl)

Medium Priority (H3 inconsistencies):

Files with h3 using text-lg (should be text-xl)
Files with h3 using text-2xl (should be text-xl)
Files with h3 without explicit size (should add text-xl)

Special Cases to Preserve

Sidebar navigation: text-xs for h2/h3 labels (intentional small size)
Design system demos: Keep existing sizes for demonstration purposes
Responsive patterns: Preserve responsive variants (e.g., text-xl md:text-2xl)

2.7 KiB Raw Blame History