The Font Family
Mesi utilizes Poppins by the Indian Type Foundry as its primary typeface. Poppins is a geometric sans-serif that balances modern technical precision with friendly readability, making it ideal for both the Mesi mobile app and official documentation.
Type Scale & Hierarchy
To maintain visual consistency and accessibility, please adhere to the following typographic scale. All sizes are optimized for a clear information architecture.
| Class | Weight | Size (Default) | Usage |
|---|
| Main Header (H1) | Bold | 48 px | Page titles and primary hero sections |
| Sub-Header (H2) | SemiBold | 24 px | Major section breaks |
| Banner (H3) | SemiBold | 20 px | Module titles and featured banners |
| Ingress | Medium | 24 px | Summary text and leading paragraphs |
| Body | Medium | 12 px | Standard interface text and descriptions |
| Call-to-Action | Bold | 16 px | Button labels and primary navigation |
Font Assets & Licensing
Poppins is an open-source font available under the Open Font License (OFL).
Best Practices
- Legibility: Maintain a minimum line height of 1.5 for body text to ensure high readability for long-form content.
- Contrast: Ensure all text meets WCAG 2.1 contrast standards against background colors.
- Hierarchy: Do not skip heading levels (e.g., jumping from H1 to H3) to maintain a logical structure for screen readers.
Pro-Tip: For mobile development, utilize the 12px Medium body weight for data-heavy screens to maximize screen real estate while maintaining clarity.
