Typography
Guidelines for font families, weights, and hierarchical scaling across the Mesi ecosystem.
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.
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).
Access the full family, including all weights and Italics, for digital and print use.
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.
Last updated