Titres
Aa Aa
Fraunces
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 &€éèêàçùœ « » ?!
Graisses 300 à 600 · romain et italique · Gratuite sur Google Fonts ↗
Charte graphique · 03
La typographie
Des titres élégants, un texte sobre, des étiquettes d’atelier : trois polices qui se répondent.
Trois voix
Un serif contemporain pour la noblesse des titres, un sans-serif discret pour lire sans effort, une mono pour l’esprit « étiquette d’atelier ». Les trois sont gratuites (licence SIL OFL) et hébergées par le site lui-même.
Texte
Aa
Instrument Sans
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 &€éèêàçùœ « » ?!
Graisses 400 à 700 · Gratuite sur Google Fonts ↗
Étiquettes
Aa
DM Mono
AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz 0123456789 &€éèêàçùœ « » ?!
Graisses 400 et 500 · toujours en majuscules espacées · Gratuite sur Google Fonts ↗
L’échelle des tailles
Les titres s’adaptent à l’écran : ils grandissent en douceur du mobile à l’ordinateur. Chaque taille est un réglage de l’éditeur (« Taille » dans le panneau Typographie).
Affiche2,8→5,75 rem · 45→92 px
Fabricant d’objets en bois et corne
Titre 12,6→5,75 rem · 42→92 px
Fabricant d’objets en bois et corne
Titre 22→3,4 rem · 32→54 px
Fabricant d’objets en bois et corne
Titre 31,5→2,25 rem · 24→36 px
Fabricant d’objets en bois et corne
Chapô1,15→1,4 rem · 18→22 px
Bois précieux, cornes, os et ivoire de mammouth.
Texte1,06 rem · 17 px
Nous sélectionnons, sciions, usinons et stabilisons.
Petit0,94 rem · 15 px
Nous sélectionnons, sciions, usinons et stabilisons.
Étiquette0,75 rem · 12 px
BOIS · CORNES · OS
Qui sert à quoi
| Rôle | Police | Taille | Interligne | Espacement | Remarque |
|---|---|---|---|---|---|
| Titre d’affiche (hero) | Fraunces 330 | Affiche | 0,96 | −0,028 em | Titre principal de l’accueil, en deux lignes sur ordinateur ; mot clé en italique braise. |
| Titre d’ouverture de page | Fraunces 330 | 2,5 → 5,2 rem | 0,98 | −0,03 em | Savoir-faire, histoire, catégories… ; un titre court (16 caractères ou moins) ne se coupe jamais. |
| Titre de page (H1) | Fraunces 380 | Titre 1 | 1,04 | −0,02 em | Une seule fois par page. |
| Titre de section | Fraunces 340 | Titre 2 | 1,02 | −0,028 em | Équilibré sur deux ou trois lignes. |
| Titre d’article, de carte | Fraunces 380 | Titre 3 | 1,04 | −0,02 em | |
| Chapô | Instrument Sans 400 | Chapô | 1,55 | 0 | Texte d’introduction, couleur atténuée. |
| Texte courant | Instrument Sans 400 | Texte | 1,65 | 0 | Lecture confortable : 65 caractères environ par ligne. |
| Étiquette, sur-titre | DM Mono 500 | Étiquette | 1,4 | 0,14 à 0,16 em | Majuscules, précédé d’un filet orange. |
| Bouton | DM Mono 500 | Étiquette | 1 | 0,14 em | Majuscules. |
Le mot en accent
La signature typographique de Muzard : dans un titre, un ou deux mots passent en italique léger et en orange. C’est ce qui donne du rythme et de la personnalité sans rien ajouter.
- Un mot, rarement deux. Celui qui porte le sens : « bois et corne », « collection », « pièce finie ».
- Orange profond sur fond clair, orange vif sur fond sombre. Le site choisit automatiquement le bon.
- Dans l’éditeur : entourez le mot d’étoiles —
Une *collection* de matières. - Mots composés insécables. « savoir-faire », « Parlons-en » ne sont jamais coupés au trait d’union en fin de ligne : le site les garde d’un seul tenant.