Typographie
Outfit pour les titres, Inter pour tout le reste, et la voix technique en capitales.
Deux polices
Outfit pour ce qui se lit de loin, Inter pour tout le reste. Les deux viennent de Google Fonts, chargées par src/layouts/Page.astro avec display: swap, et deux préconnexions.
| Police | Graisses chargées | Variable | Emploi sur la trame |
|---|---|---|---|
| Outfit | 600, 700, 800, 900 | --display | Les titres h1, h2, h3, le prix du suivi, les chiffres, le nom qui tient lieu de logo, la règle de ces pages. Le 600 ne sert qu’à la règle ; le 900 est chargé et inemployé. |
| Inter | 400, 500, 600, 700 | --sans | Le corps, le chapô, les étiquettes, les boutons, les annotations, la citation, le fil d’Ariane, le rail, le formulaire, le code des appels. |
L’échelle
Chaque cran, avec sa police, sa graisse, sa taille fluide, son interlignage et son interlettrage, tels que grinn.css les pose dans le bloc .tr.
h1 de l’accueil.tr-une--affiche .tr-affiche__titre, depuis le 12 octobre (le grand titre centré) : Outfit 700, clamp(44px, 6.9vw, 100px), soit 44 px jusqu’à 638 px de fenêtre et 100 px dès 1450 px ; interlignage 0,94, interlettrage -0,035 em, centré, sans largeur maximale. Chaque ligne monte dans son cadre (.tr-ligne), la seconde en vert profond.
h1 de la trame.tr h1 : Outfit 700, clamp(44px, 5.8vw, 84px), interlignage 0,92, interlettrage -0,025 em, sans largeur maximale. La base que l’accueil agrandit et que la page intérieure resserre ; telle quelle, seulement dans la variante « cote » du Hero, qu’aucune page n’emploie plus.
h1 de page intérieure.tr-page h1 : Outfit 700, clamp(36px, 4.6vw, 66px), interlignage 0,98, interlettrage -0,03 em, 16 ch au plus, lignes équilibrées.
h2.tr h2 : Outfit 700, clamp(32px, 4.4vw, 62px), interlignage 1,02, interlettrage -0,035 em, 17 ch au plus (20 ch centré, 14 ch sur une ligne, 12 ch dans la cellule IA et dans le mur). Sur une page de cas, le point fort et le cas suivant prennent var(--t-h2), clamp(28px, 3.9vw, 50px), le point fort sur 12 ch au plus ; dans le récit, l’intertitre de la prose, clamp(24px, 2.4vw, 34px).
h3.tr h3 : Outfit 700, clamp(20px, 1.7vw, 24px), interlignage 1,18, interlettrage -0,025 em. Cartes de cas de l’accueil et des pages d’offre, rôles : clamp(19px, 1.5vw, 22px) ; cartes de la page Réalisations et cellule d’appel : clamp(20px, 2vw, 26px), clamp(24px, 2.6vw, 34px) pour un cas en largeur, clamp(18px, 1.6vw, 21px) pour une petite carte ; engagements, étapes, suivi : clamp(18px, 1.4vw, 21px) ; questions : clamp(17px, 1.3vw, 19px).
Chapô.lead : Inter 400, clamp(20px, 1.62vw, 25px), interlignage 1,5 sur la trame, encre seconde, 46 ch au plus (48 ch sur une page intérieure).
Corps--t-body : Inter 400, clamp(16.5px, 0.35vw + 13px, 18.5px), interlignage 1,6, encre. Le corps de tête (.tr-corps) passe en encre seconde, 58 ch au plus.
Petit.small : Inter 400, 14,5 px, interlignage 1,55 (1,5 dans les cartes), encre troisième.
Étiquette--t-label : Inter 600, 11 px, interlignage 1, interlettrage 0,14 em, capitales, chiffres de tableau.
Prix.tr-prix (carte d’offre) : Inter 600, 14,5 px, interlignage 1,45, encre, chiffres de tableau. .tr-suivi__prix (colonne du suivi) : Outfit 800, clamp(22px, 1.9vw, 27px), interlignage 1,1, interlettrage -0,03 em, vert profond.
Chiffre.tr-chiffres__v : Outfit 800, clamp(34px, 3.6vw, 52px), interlignage 1, interlettrage -0,03 em, encre ; sa légende en étiquette, encre troisième. Les faits d’un cas en largeur (.tr-cc__valeur, page Réalisations) : Outfit 600, clamp(24px, 2.4vw, 32px), interlignage 1,05, -0,03 em, encre, leur légende en Inter 13 px, encre troisième.
Citation.tr-dire__carte blockquote : Inter 400, 17 px, interlignage 1,5, interlettrage 0, encre, en romain. Outfit reste aux titres, sauf sur la page d’un cas : la citation seule de CitationCas (.tr-citation blockquote) est en Outfit 500, clamp(20px, 1.8vw, 24px), interlignage 1,35, -0,02 em, comme la maquette.
La voix technique
Ce que la référence écrivait en chasse fixe, la trame l’écrit en Inter, en capitales espacées, avec les chiffres de tableau et le zéro barré. C’est la voix des étiquettes, des boutons, des annotations et des fils.
| Classe | Zone | Valeur |
|---|---|---|
| .tr-etq | l’étiquette | Inter 600, 11 px, capitales, 0,14 em, vert profond sur la cellule pâle, bord vert |
| .btn | le bouton | Inter 600, 12,5 px, capitales, 0,11 em, 15 / 20 px ; petit : 11,5 px, 11 / 14 px |
| .tr-puce | l’annotation d’une scène | Inter 600, 10,5 px, capitales, 0,1 em, encre seconde, bord --line |
| .tr-fil | le fil d’Ariane | Inter 600, 11 px, capitales, 0,14 em, interlignage 1,5, encre troisième |
| .tr-eng__n | le numéro d’un engagement ou d’une étape | Inter 600, 11 px, 0,14 em, vert profond |
| .tr-dire__qui | le nom sous une citation | Inter 600, 10,5 px, capitales, 0,1 em, encre puis encre troisième |
| .tr-chiffres__l | la légende d’un chiffre | Inter 600, 11 px, capitales, 0,14 em, encre troisième |
| .tr-rail a | une entrée du rail | Inter 600, 11,5 px, capitales, 0,11 em, encre seconde |
| .tr-fiche dt, .tr-cc__offre, .tr-suivant__etq, .tr-fort__etapes b | les clés et les étiquettes des cas | Inter 600, 11 px, capitales, 0,14 em, encre troisième ; encre seconde pour le nom d’une étape du point fort |
| .tr-badge | le badge des cas qui ont leur page | Inter 600, 9 px, capitales, 0,14 em, vert profond |
| .tr-vit__puce, .tr-fiche__puces span | les puces d’une vitrine, la stack d’une fiche | la voix de .tr-puce, 10,5 px (9,5 px et 0,06 em dans une vitrine de moins de 440 px) ; la stack en Inter 600, 10 px, 0,12 em, vert profond |
| --tech | la définition | "tnum" 1, "zero" 1, "cv11" 1 : chiffres de tableau, zéro barré, et la variante cv11 d’Inter |
Nos offres
Appelsrc/components/trame/Etiquette.astro, Bouton.astro, Puce.astro, FilAriane.astro
<Etiquette>Nos offres</Etiquette>
<Bouton href="/contact/">{ V3.cta }</Bouton>
<Puce x="2%" y="84%" n={0}>Hébergement</Puce>
<FilAriane chemin={[{ href: '/offres/', libelle: 'Offres' }, { href: '/offres/site-internet/', libelle: 'Site internet' }]} />Pas de chasse fixe
La charte a deux polices. Une chasse fixe en serait une troisième, et un emprunt direct à la référence qu’on a traduite : la voix technique, c’est Inter.
Hébergement
Hébergement
Ce qu’on ne fait pas
Trois interdits, dont un que le contrôle de marque bloque à la construction.
- Pas de gras dans un paragraphe. La hiérarchie vient de la taille et de la couleur de l’encre, pas d’un mot appuyé. La règle .tr-prose strong existe pour le Markdown des fiches, à 600 ; la copie de la trame n’en pose pas.
- Pas de titre de plus de huit mots. Les titres de l’accueil en font de deux à huit ; au-delà, un h2 à 62 px ne tient plus dans ses 17 ch.
- Outfit jamais sous 16 px : en dessous, ses contreformes se ferment. Le vérificateur (scripts/verifier.mjs) lit grinn.css et bloque toute règle de titre dont la taille passe sous 16 px.
RègleOutfit pour ce qui se lit de loin, Inter pour tout le reste, et la voix technique en capitales espacées : jamais une troisième police.