Skip to main content

Body Text Typography

Body text, paragraph styles, and reading typography with responsive scaling

Text Scale

Large Text

1.125rem (18px) mobile → 1.25rem (20px) desktop | font-weight: 400

This is large body text, typically used for introductory paragraphs, important statements, or lead text that needs to stand out from regular content.

Regular Text

1rem (16px) mobile → 1.125rem (18px) desktop | font-weight: 400

This is regular body text used for most content throughout the dashboard. It provides comfortable reading while maintaining good information density. The line height is optimized for readability across different screen sizes.

Small Text

0.875rem (14px) mobile → 1rem (16px) desktop | font-weight: 400

This is small body text used for secondary information, captions, metadata, and supporting details that don't require as much visual prominence as primary content.

Extra Small Text

0.75rem (12px) mobile → 0.875rem (14px) desktop | font-weight: 400

This is extra small text used for labels, timestamps, fine print, and data that needs to be visible but not prominent. Often used in table cells and chart annotations.

Text Styles & Emphasis

Font Weights

Light text (300) - Used sparingly for special emphasis

Regular text (400) - Standard body text weight

Medium text (500) - Data labels and key information

Semibold text (600) - Headings and important labels

Bold text (700) - Major headings and emphasis

Text Colors

Primary text - Main content and headings

Secondary text - Supporting information

Tertiary text - Captions and metadata

Muted text - Placeholder and disabled states

Link text - Interactive elements

Reading Content

Grant Impact Assessment Report

Our comprehensive analysis reveals significant progress across all funded initiatives, with measurable improvements in health outcomes and digital literacy among target populations.

The Q4 2024 evaluation period demonstrates the effectiveness of our strategic learning approach. Grant recipients have consistently met or exceeded their initial impact projections, with several programs showing remarkable innovation in their implementation strategies.

Particularly noteworthy is the digital health initiative in Southeast Asia, which has successfully reached over 150,000 beneficiaries through mobile health platforms. The program's integration of local languages and cultural considerations has proven crucial to its success.

"The collaborative approach fostered by Fondation Botnar has enabled us to scale our impact beyond what we initially thought possible."

— Dr. Sarah Chen, Program Director, Digital Health Initiative

Supporting data indicates that 89% of program participants reported improved access to essential health services, while 76% demonstrated increased digital literacy skills as measured by standardized assessments conducted by independent evaluators.

Last updated: January 15, 2025 | Data collection period: October 1 - December 31, 2024

Data Typography

KPI Display

2,847
Active Grants
$42.7M
Total Funding
94%
Success Rate
156
Countries

Data Labels & Values

Program Duration: 24 months
Target Population: Children ages 5-18
Geographic Focus: Sub-Saharan Africa

Accessibility & Guidelines

Accessibility Features

  • ✓ WCAG AA contrast ratios (4.5:1 minimum)
  • ✓ Responsive font scaling
  • ✓ Optimal line heights for reading
  • ✓ Dark mode support
  • ✓ Screen reader compatible

Usage Guidelines

  • • Use large text for introductory content
  • • Regular text for main content blocks
  • • Small text for metadata and captions
  • • Maintain proper color contrast
  • • Test readability at all screen sizes