05 · Typographie · Brandbook

5.1 · Bricolage Grotesque

Géométrique mais vivante.

Bricolage Grotesque est un grotesque variable conçu par Mathieu Triay. Elle a la rigueur d'un sans-serif suisse mais avec des terminaisons et des formes qui respirent — exactement ce qu'on veut pour une marque pragmatique mais chaleureuse.

Source

Google Fonts (libre · open source). Chargée via fonts.googleapis.com avec axes optical size (12–96) et weight (300–800). Aucun fichier local n'est nécessaire.

Poids utilisés

300 Light — réservé aux cas exceptionnels (très grand display de luxe).
400 Regular — body copy par défaut.
500 Medium — captions, eyebrows, méta-données.
600 SemiBold — titres mineurs (h3), sub-titres, sous-eyebrow.
700 Bold — titres principaux (h1, h2), wordmark de marque, baseline.
800 ExtraBold — mega titres (hero), accents extrêmes.

Features OpenType activées

ss02 — alternative stylistique pour les chiffres (formes plus calmes). cv11 — variante du « g » à boucle simple, plus géométrique. Ces deux features sont chargées globalement dans body.

5.2 · Type scale

Sept niveaux. Pas un de plus.

Si tu as besoin d'un huitième niveau, c'est qu'un autre dans la liste devrait suffire. La hiérarchie typographique est ce qui guide la lecture — pas la décoration.

t-mega · clamp(80px, 14vw, 240px) · weight 800 · line-height 0.9 · tracking -0.02em

Mega

t-h1 · clamp(48px, 8vw, 96px) · weight 700 · line-height 1.0 · tracking -0.02em

Faire dire WOW.

t-h2 · clamp(32px, 5vw, 56px) · weight 700 · line-height 1.1 · tracking -0.01em

Trois métiers. Une exigence.

t-h3 · clamp(20px, 3vw, 32px) · weight 600 · line-height 1.2

Un autre Osher valide. Ou on retravaille.

t-body · 18px · weight 400 · line-height 1.5

Le body est en encre sur papier (ou inverse). 18px lu sur 18 mots maximum par ligne. Ce qui dépasse devient illisible.

t-small · 14px · weight 500 · letter-spacing 0.04em

PETIT TEXTE — meta, attribution, label. 14px en weight 500 pour rester lisible malgré la petite taille.

t-eyebrow · 12px · weight 600 · letter-spacing 0.16em · uppercase

Eyebrow · catégorie · chapitre

5.3 · Règles d'usage

Six règles, jamais cassées.

Maximum trois niveaux par bloc visuel

Une page, une slide, une card : maximum trois niveaux différents (par exemple eyebrow + h2 + body). Au-delà, la hiérarchie devient bruit.

Pas de small caps faux, pas de bold faux

Toujours utiliser un poids existant (de 300 à 800). Jamais de font-weight: bold sur un weight 400 — ça produit du faux gras synthétique.

Pas de tracking décoratif

Le tracking est calé pour chaque niveau. On ne l'ouvre pas pour faire « élégant » sur un titre, on ne le serre pas pour faire « tech » sur un caption.

Italique : avec parcimonie

Bricolage Grotesque a un italique. On l'utilise pour les citations (lecture longue), les attributions (« — Thierry Ndoufou »), et les références (titres de cas, noms d'œuvres). Jamais pour de l'emphase courante : préférer bold.

Couleur du texte : trois options

Encre #0E0E0E (par défaut), Papier #F5F1EA (sur fond sombre), Signature #00B14F (mots-clés et accents). Jamais Mute pour du body.

Responsive : `clamp()` partout

Les tailles sont fluides entre mobile et desktop via clamp(). Pas de breakpoints à la main pour la typo. La fonte respire avec l'écran.

5.4 · Fontes bannies

Si une production externe les utilise,
on demande une révision.

Banni	Pourquoi
Inter, Roboto, Helvetica, Arial, Open Sans	Fontes par défaut. Signal « pas pensé ».
Times New Roman, Georgia, Playfair	Le serif n'est pas notre territoire. Bricolage suffit.
Comic Sans, Papyrus, Brush Script, Lobster	Évidemment.
Toute fonte cursive ou décorative	Hors système. Pas Osher.
Toute fonte « ethnique » ou « africaine » exotique	Osher exprime son ancrage continental par la rigueur, pas par le folklore. Bricolage Grotesque suffit.
Toute fonte d'icônes (FontAwesome, Material Icons)	On compose les icônes en SVG, pas via une fonte.

Bricolage Grotesque.Et rien d'autre.