Skip to main content

Labels & Data Typography

Typography for form labels, data displays, charts, and interface elements

Form Labels

Standard Form Labels

Provide a brief overview of your project goals and expected impact

Required Field Indicators

Data Display Typography

KPI Cards

2,847
Active Grants
↑ 12% from last quarter
$42.7M
Total Funding
Distributed in 2024
94%
Success Rate
Meeting objectives

Data Tables

Grant ID Organization Amount Status
BNR-2024-001 HealthTech Initiative $245,000 Active
BNR-2024-002 Digital Learning Platform $180,500 Review

Chart Labels

Chart Typography Hierarchy

Grant Distribution by Region

Q4 2024 Performance Summary

Number of Grants
Africa
Asia
Americas
Europe
Geographic Region
Active
Completed
In Review

Data Labels & Tooltips

Sub-Saharan Africa
Active Grants: 847
Total Funding: $12.4M
Success Rate: 96%

Data Point Labels

847 $12.4M 96% 2.3K

Status & Badge Typography

Status Indicators

Status Badges

Active Under Review In Progress Completed Rejected

Priority Labels

HIGH MEDIUM LOW

Category Tags

Digital Health Education Child Protection

Accessibility Guidelines

Requirements

  • Minimum 12px font size for all text
  • WCAG AA contrast ratios (4.5:1)
  • Proper label associations (for/id)
  • Required field indicators
  • Screen reader compatible

Best Practices

  • Use descriptive label text
  • Provide helpful placeholder text
  • Include form field descriptions
  • Use consistent font weights
  • Test with screen readers