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