Typography Atoms
Typography components for the Fondation Botnar Dashboard design system
Components
Headings
Semantic heading components (H1-H6) with responsive scaling
Dashboard Title (H1)
Section Title (H2)
Widget Title (H3)
Subsection (H4)
Card Title (H5)
Label (H6)
Features
Body Text
Paragraph and body text components with optimal reading typography
Large text for introductory content and important statements.
Regular body text used for most content throughout the dashboard application.
Small text for secondary information and supporting details.
Extra small text for labels, timestamps, and metadata.
Features
Labels & Data
Typography for form labels, data displays, charts, and interface elements
Features
Typography Scale
| Element | Mobile | Desktop | Weight | Usage |
|---|---|---|---|---|
| H1 - Dashboard Title | 2rem (32px) | 2.5rem (40px) | 700 | Main page title |
| H2 - Section Title | 1.5rem (24px) | 1.625rem (26px) | 600 | Section headings |
| H3 - Widget Title | 1.125rem (18px) | 1.25rem (20px) | 600 | Widget/card titles |
| Large Text | 1.125rem (18px) | 1.25rem (20px) | 400 | Introductory text |
| Body Text | 1rem (16px) | 1.125rem (18px) | 400 | Main content |
| Small Text | 0.875rem (14px) | 1rem (16px) | 400 | Supporting text |
Implementation Guidelines
Best Practices
- • Use semantic HTML elements (h1, h2, p, etc.)
- • Maintain logical heading hierarchy
- • Apply responsive typography classes
- • Ensure WCAG AA contrast ratios
- • Test with screen readers
- • Use descriptive heading text
Avoid
- • Using headings for visual styling only
- • Skipping heading levels (H1 → H3)
- • Multiple H1 elements per page
- • Text smaller than 12px
- • Poor color contrast
- • Unclear or vague labels
Accessibility Features
WCAG Compliance
- ✓ AA contrast ratios (4.5:1)
- ✓ Minimum 12px font size
- ✓ Proper heading structure
Screen Readers
- ✓ Semantic HTML structure
- ✓ Descriptive text content
- ✓ Skip navigation links
Responsive Design
- ✓ Mobile-first scaling
- ✓ Optimal line heights
- ✓ Dark mode support