> For the complete documentation index, see [llms.txt](https://ds5.gitbook.io/documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ds5.gitbook.io/documentation/foundations/typography.md).

# Typographies

## Nos typographies

{% tabs %}
{% tab title="Poppins" %}
Typographie principale de texte et de titrage moyen.

<figure><img src="/files/844Dh1oVbmCT6pmZKyWM" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
« Portez ce vieux whisky au juge blond qui fume. » est un pangramme : une phrase contenant toutes les lettres de l’alphabet. Elle est utilisée en typographie pour tester l’apparence générale d’une police.
{% endhint %}
{% endtab %}

{% tab title="Recoleta-alt" %}
Typographie de titrage et de très grand titrage.

<figure><img src="/files/L4gTTMdptoqGzFTel6Fz" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
« Portez ce vieux whisky au juge blond qui fume. » est un pangramme : une phrase contenant toutes les lettres de l’alphabet. Elle est utilisée en typographie pour tester l’apparence générale d’une police.
{% endhint %}
{% endtab %}
{% endtabs %}

## Les styles de typograhie

Minos comporte 10 niveaux de typographie, de 100 à 1000, chacun décliné en styles différents pour garantir une clarté et une hiérarchie optimale à travers nos interfaces.

{% tabs %}
{% tab title="100" %}
Niveau utilisé pour tous les petits éléments comme les [labels](broken://pages/CHHETibGyyfIJV96OKAy). C'est la taille minimum autorisée d'un point de vue accessibilité en ligne.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>normal</strong></td><td><code>normal</code></td><td><code>12px</code></td><td><code>16px</code></td><td><code>0</code></td><td><code>4px</code></td><td><code>poppins</code></td><td><a href="/files/UEkadB69ccpeDMENj0yD">/files/UEkadB69ccpeDMENj0yD</a></td></tr><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>12px</code></td><td><code>16px</code></td><td><code>0</code></td><td><code>4px</code></td><td><code>poppins</code></td><td><a href="/files/rgnBgaoy9pRPNRmnWROt">/files/rgnBgaoy9pRPNRmnWROt</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>12px</code></td><td><code>16px</code></td><td><code>0</code></td><td><code>4px</code></td><td><code>poppins</code></td><td><a href="/files/vntkRRJnbtMr7p21sFqi">/files/vntkRRJnbtMr7p21sFqi</a></td></tr></tbody></table>
{% endtab %}

{% tab title="200" %}
Taille principale de l'interface et des informations, utilisé dans quasiment tous les composants. Ex : [Boutons](/documentation/components/button.md), [Boutons tactiles](/documentation/components/button-tactile.md), [Onglets](/documentation/components/tabs.md), [Choix](broken://pages/KI0sNM6d2hhdrQA5dQCV), [Box produit](broken://pages/CLQFQ5sUeLlAuCAui0tC), etc...

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>normal</strong></td><td><code>normal</code></td><td><code>14px</code></td><td><code>20px</code></td><td><code>0</code></td><td><code>6px</code></td><td><code>poppins</code></td><td><a href="/files/w6PjQfXI5egiYgJrvrCf">/files/w6PjQfXI5egiYgJrvrCf</a></td></tr><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>14px</code></td><td><code>20px</code></td><td><code>0</code></td><td><code>6px</code></td><td><code>poppins</code></td><td><a href="/files/5EmVZ381pz0WHDgPlA3D">/files/5EmVZ381pz0WHDgPlA3D</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>14px</code></td><td><code>20px</code></td><td><code>0</code></td><td><code>6px</code></td><td><code>poppins</code></td><td><a href="/files/SRN8CdtDIdQau5PvRgso">/files/SRN8CdtDIdQau5PvRgso</a></td></tr></tbody></table>
{% endtab %}

{% tab title="300" %}
Deuxième taille principale de contenu du site. Utilisé pour les grand textes, textes longs, descriptions, [accordéons](/documentation/components/accordions.md), tout ce qui doit être lu.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>normal</strong></td><td><code>normal</code></td><td><code>16px</code></td><td><code>24px</code></td><td><code>0</code></td><td><code>8px</code></td><td><code>poppins</code></td><td><a href="/files/kQBtjMVEV584cOrA1eJ7">/files/kQBtjMVEV584cOrA1eJ7</a></td></tr><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>16px</code></td><td><code>24px</code></td><td><code>0</code></td><td><code>8px</code></td><td><code>poppins</code></td><td><a href="/files/a9lzDbMYrVC4agRwNN7Z">/files/a9lzDbMYrVC4agRwNN7Z</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>16px</code></td><td><code>24px</code></td><td><code>0</code></td><td><code>8px</code></td><td><code>poppins</code></td><td><a href="/files/2PCfGXqX5DLF7cagNj0w">/files/2PCfGXqX5DLF7cagNj0w</a></td></tr></tbody></table>
{% endtab %}

{% tab title="400" %}
Premier niveau de titrage.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>normal</strong></td><td><code>normal</code></td><td><code>20px</code></td><td><code>24px</code></td><td><code>0</code></td><td><code>10px</code></td><td><code>poppins</code></td><td><a href="/files/c8DFnc7zs3IzrsSfKSgm">/files/c8DFnc7zs3IzrsSfKSgm</a></td></tr><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>20px</code></td><td><code>24px</code></td><td><code>0</code></td><td><code>10px</code></td><td><code>poppins</code></td><td><a href="/files/q0klBoWH1aalCuFyKcpR">/files/q0klBoWH1aalCuFyKcpR</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>20px</code></td><td><code>24px</code></td><td><code>0</code></td><td><code>10px</code></td><td><code>poppins</code></td><td><a href="/files/haAXeSamDM4tUJUKDjnq">/files/haAXeSamDM4tUJUKDjnq</a></td></tr></tbody></table>
{% endtab %}

{% tab title="500" %}
Deuxième niveau de titrage.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>normal</strong></td><td><code>normal</code></td><td><code>24px</code></td><td><code>32px</code></td><td><code>0</code></td><td><code>12px</code></td><td><code>poppins</code></td><td><a href="/files/9MiFD4CjYkk83PFxtUod">/files/9MiFD4CjYkk83PFxtUod</a></td></tr><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>24px</code></td><td><code>32px</code></td><td><code>0</code></td><td><code>12px</code></td><td><code>poppins</code></td><td><a href="/files/N6y0V88fMvsUXz022Q19">/files/N6y0V88fMvsUXz022Q19</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>24px</code></td><td><code>32px</code></td><td><code>0</code></td><td><code>12px</code></td><td><code>poppins</code></td><td><a href="/files/1U00CijPRgmPoq5JHMIv">/files/1U00CijPRgmPoq5JHMIv</a></td></tr><tr><td><strong>heading</strong></td><td><code>normal</code></td><td><code>24px</code></td><td><code>32px</code></td><td><code>0</code></td><td><code>12px</code></td><td><code>recoleta-alt</code></td><td><a href="/files/3lF1DpLUseEFYC2ynT25">/files/3lF1DpLUseEFYC2ynT25</a></td></tr></tbody></table>
{% endtab %}

{% tab title="600" %}
Troisième niveau de titrage.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>32px</code></td><td><code>40px</code></td><td><code>-1px</code></td><td><code>14px</code></td><td><code>poppins</code></td><td><a href="/files/eXUhxCYn3mwGzC4TTO51">/files/eXUhxCYn3mwGzC4TTO51</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>32px</code></td><td><code>40px</code></td><td><code>-1px</code></td><td><code>14px</code></td><td><code>poppins</code></td><td><a href="/files/c3sgnWVdzrYDc3Js3mIj">/files/c3sgnWVdzrYDc3Js3mIj</a></td></tr><tr><td><strong>heading</strong></td><td><code>normal</code></td><td><code>32px</code></td><td><code>40px</code></td><td><code>-1px</code></td><td><code>14px</code></td><td><code>recoleta-alt</code></td><td><a href="/files/iFSgsLBOEOTY4gwgpJvI">/files/iFSgsLBOEOTY4gwgpJvI</a></td></tr></tbody></table>
{% endtab %}

{% tab title="700" %}
Quatrième niveau de titrage.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>medium</strong></td><td><code>medium</code></td><td><code>40px</code></td><td><code>48px</code></td><td><code>-1px</code></td><td><code>16px</code></td><td><code>poppins</code></td><td><a href="/files/zu9e2lWyyJbg1glIZaBR">/files/zu9e2lWyyJbg1glIZaBR</a></td></tr><tr><td><strong>semi-bold</strong></td><td><code>semi-bold</code></td><td><code>40px</code></td><td><code>48px</code></td><td><code>-1px</code></td><td><code>16px</code></td><td><code>poppins</code></td><td><a href="/files/v74NaHWCafz5SO9eZ4q5">/files/v74NaHWCafz5SO9eZ4q5</a></td></tr><tr><td><strong>heading</strong></td><td><code>normal</code></td><td><code>40px</code></td><td><code>48px</code></td><td><code>-1px</code></td><td><code>16px</code></td><td><code>recoleta-alt</code></td><td><a href="/files/FhlgWqmvXXJqkLMdI5wS">/files/FhlgWqmvXXJqkLMdI5wS</a></td></tr></tbody></table>
{% endtab %}

{% tab title="800" %}
Premier niveau de très grand titrage.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>heading</strong></td><td><code>normal</code></td><td><code>48px</code></td><td><code>56px</code></td><td><code>-1px</code></td><td><code>20px</code></td><td><code>recoleta-alt</code></td><td><a href="/files/MA74dPvDWpV4MbCsjZbt">/files/MA74dPvDWpV4MbCsjZbt</a></td></tr></tbody></table>
{% endtab %}

{% tab title="900" %}
Deuxième niveau de très grand titrage.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>heading</strong></td><td><code>normal</code></td><td><code>64px</code></td><td><code>80px</code></td><td><code>-2px</code></td><td><code>24px</code></td><td><code>recoleta-alt</code></td><td><a href="/files/wFD23pktGEIUR6v2ustl">/files/wFD23pktGEIUR6v2ustl</a></td></tr></tbody></table>
{% endtab %}

{% tab title="1000" %}
Le titrage le plus grand du site.

<table data-view="cards"><thead><tr><th></th><th>font-wheight</th><th>font-size</th><th>line-height</th><th>letter-spacing</th><th>paragraph-spacing</th><th>font-family</th><th data-hidden data-card-cover data-type="image">Cover image</th></tr></thead><tbody><tr><td><strong>heading</strong></td><td><code>normal</code></td><td><code>80px</code></td><td><code>96px</code></td><td><code>-2px</code></td><td><code>28px</code></td><td><code>recoleta-alt</code></td><td><a href="/files/1NCQkWVmmj4DqVbp3kR5">/files/1NCQkWVmmj4DqVbp3kR5</a></td></tr></tbody></table>
{% endtab %}
{% endtabs %}