> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mesi.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Typography

> Guidelines for font families, weights, and hierarchical scaling across the Mesi ecosystem.

<Frame>
  <img src="https://mintcdn.com/mesi/DDMeKiA8PbZSc7Q7/.gitbook/assets/Frame%201D.png?fit=max&auto=format&n=DDMeKiA8PbZSc7Q7&q=85&s=48201ffab2a1cf06c862b3a502d7bbab" alt="Mesi Typography Cover" width="1990" height="480" data-path=".gitbook/assets/Frame 1D.png" />
</Frame>

## 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).

<CardGroup cols={1}>
  <Card title="Download Poppins via Google Fonts" icon="font" href="https://fonts.google.com/specimen/Poppins">
    Access the full family, including all weights and Italics, for digital and print use.
  </Card>
</CardGroup>

***

## 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.

<Tip>
  **Pro-Tip:** For mobile development, utilize the **12px Medium** body weight for data-heavy screens to maximize screen real estate while maintaining clarity.
</Tip>