# ORDiDOC — Typographies

Trois familles, un système simple :

- **Inter** = lecture (UI, body, devis, documents, formulaires)
- **Archivo** = structure (titres, cartes service, fiches produit)
- **Anton** = vente (prix XXL, affiches boutique, stickers promo)

---

## 1. Inter

URL Google Fonts : https://fonts.google.com/specimen/Inter
URL CSS API v2 : https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap

Usage : site web, devis, documents, UI, textes courants, formulaires.
Graisses utilisées : 400 / 500 / 600 / 700.
Fallback : `'Inter', Arial, sans-serif`

## 2. Archivo

URL Google Fonts : https://fonts.google.com/specimen/Archivo
URL CSS API v2 : https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&display=swap

Usage : titres, sous-titres, cartes service, fiches produit, blocs d'arguments.
Graisses utilisées : 500 / 600 / 700.
Fallback : `'Archivo', 'Inter', Arial, sans-serif`

## 3. Anton

URL Google Fonts : https://fonts.google.com/specimen/Anton
URL CSS API v2 : https://fonts.googleapis.com/css2?family=Anton&display=swap

Usage : prix XXL, affiches boutique, stickers promo, mentions très impactantes.
Strictement display. Jamais en paragraphe, jamais en devis, jamais en page de service.
Fallback : `'Anton', 'Archivo', Impact, sans-serif`

---

## Import combiné (recommandé pour le site)

```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Archivo:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

Variables CSS recommandées :

```css
:root {
  --font-body:    'Inter', Arial, sans-serif;
  --font-heading: 'Archivo', 'Inter', Arial, sans-serif;
  --font-retail:  'Anton', 'Archivo', Impact, sans-serif;
}
```

---

## Hiérarchie type

| Élément              | Famille  | Graisse | Taille (web)         |
|----------------------|----------|---------|----------------------|
| Hero titre site      | Archivo  | 700     | 64 px / 56 px tablet |
| H1 page              | Archivo  | 700     | 48 px                |
| H2                   | Archivo  | 600     | 36 px                |
| H3 / Card title      | Archivo  | 600     | 24 px                |
| Body large           | Inter    | 400     | 18 px                |
| Body                 | Inter    | 400     | 16 px                |
| Body small / légende | Inter    | 500     | 14 px                |
| Bouton               | Inter    | 600     | 16 px                |
| Prix affiche XXL     | Anton    | 400     | 96 – 240 px          |
| Badge promo          | Anton ou Archivo Bold | — | 24 – 48 px |

---

## Téléchargement local des fichiers de fonte

Le sandbox de génération n'a pas accès à fonts.google.com. Pour récupérer les `.ttf` / `.woff2` :

1. Ouvrir chaque URL Google Fonts ci-dessus.
2. Cliquer sur **Get font** puis **Download all** (ou utiliser https://gwfh.mranftl.com/fonts pour récupérer un zip auto-hébergeable).
3. Déposer les fichiers obtenus dans les sous-dossiers :
   - `01_Typography/Inter/`
   - `01_Typography/Archivo/`
   - `01_Typography/Anton/`

Fichiers attendus (variables) :
- `Inter-VariableFont_opsz,wght.ttf`
- `Archivo-VariableFont_wdth,wght.ttf`
- `Anton-Regular.ttf`

Une fois les fichiers en place, ouvrir `specimen.html` (à la racine de `01_Typography/`) pour valider visuellement les rendus.

---

## Règles de production (rappel charte)

- Ne pas mélanger plus de 3 familles dans un même support.
- Anton est interdit dans tout document corporate, devis, page service, courrier collectivité.
- Anton est autorisé sur affiche boutique, sticker promo, prix XXL — uniquement zones d'impact.
- Toujours garder Inter comme police principale lisible.