Skip to main content

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