Typography Headings
Semantic heading components with responsive scaling and accessibility features
Preview Size:
Heading Scale
H1 - Dashboard Title
2rem (32px) mobile → 2.5rem (40px) desktop | font-weight: 700
Strategic Learning Dashboard
H2 - Section Title
1.5rem (24px) mobile → 1.625rem (26px) desktop | font-weight: 600
Grant Performance Overview
H3 - Widget Title
1.125rem (18px) mobile → 1.25rem (20px) desktop | font-weight: 600
Active Grants Distribution
H4 - Subsection
1rem (16px) mobile → 1.125rem (18px) desktop | font-weight: 600
Program Impact Metrics
H5 - Card Title
0.875rem (14px) mobile → 1rem (16px) desktop | font-weight: 600
Latest Grant Activity
H6 - Label
0.75rem (12px) mobile → 0.875rem (14px) desktop | font-weight: 600
Chart Legend
Typography Hierarchy
Dashboard Analytics Report
Quarterly performance overview for strategic learning initiatives
Grant Performance Summary
Our grant portfolio has shown significant progress across all program areas, with particular strength in digital health initiatives.
Regional Distribution
Grants are actively supporting communities across 15 countries, with focused investment in Sub-Saharan Africa and Southeast Asia.
Impact Metrics
Key performance indicators demonstrate measurable improvements in health outcomes and digital literacy.
Data Quality Notes
All metrics have been validated through third-party evaluation and community feedback mechanisms.
Source Attribution
Data compiled from partner reports and direct beneficiary surveys conducted Q4 2024.
Accessibility Features
Semantic Structure
- ✅ Proper heading hierarchy (H1 → H6)
- ✅ Descriptive heading text
- ✅ Skip navigation links
- ✅ Screen reader optimized
Visual Accessibility
- ✅ WCAG AA contrast ratios
- ✅ Responsive font scaling
- ✅ Dark mode support
- ✅ Focus indicators
Usage Guidelines
Best Practices
- • Use H1 only once per page for the main page title
- • Maintain logical heading hierarchy (don't skip levels)
- • Use semantic HTML headings for screen readers
- • Keep headings concise and descriptive
Avoid
- • Using headings just for visual styling
- • Skipping heading levels (H1 → H3)
- • Multiple H1 elements on one page
- • Overly long or unclear heading text