Typographie

Une famille, trois axes

Nibiru utilise Bricolage Grotesque (gratuit, Google Fonts) pour chaque élément de texte. L’astuce réside dans le fait qu’il s’agit d’une police variable avec deux axes significatifs :

• Taille optique (opsz, 12–96) — les tailles d’affichage deviennent plus caractéristiques, étroites et légèrement carrées ; les tailles de corps sont plus calmes et ouvertes.
• Poids (wght, 200–800) — plage complète disponible.
• Italique — italique véritable, pas incliné.

Donc un seul fichier de police nous donne une police d’affichage et une police de corps. Pas besoin de charger des polices supplémentaires.

font-family: 'Bricolage Grotesque', system-ui, sans-serif;
font-variation-settings: 'opsz' 96, 'wght' 600;   /* display */
font-variation-settings: 'opsz' 14, 'wght' 400;   /* body */

Le code utilise JetBrains Mono car il est discrètement excellent pour le code et s’associe bien.

Préréglages de variation (les éléments de base)

Token	Variation	Use
--nibiru-fv-display-hero	'opsz' 96, 'wght' 600	Hero H1
--nibiru-fv-display-large	'opsz' 64, 'wght' 600	H2
--nibiru-fv-display-medium	'opsz' 36, 'wght' 600	H3
--nibiru-fv-heading-small	'opsz' 18, 'wght' 600	H4
--nibiru-fv-lead	'opsz' 24, 'wght' 400	Paragraphe de lead
--nibiru-fv-body	'opsz' 14, 'wght' 400	Corps du texte
--nibiru-fv-body-bold	'opsz' 14, 'wght' 600	Texte en gras
--nibiru-fv-label	'opsz' 12, 'wght' 600	Étiquettes, eyebrow

Échelle de taille

Token	Taille	Utilisation
--nibiru-text-xs	0,72rem	Sourcils / étiquettes
--nibiru-text-sm	0,85rem	Sous-titres
--nibiru-text-md	0,92rem	Contrôles d’interface utilisateur, barre latérale
--nibiru-text-base	1,00rem	Corps
--nibiru-text-lg	1,18rem	Paragraphe de lead
--nibiru-text-xl	1,45rem	Intros de section
--nibiru-text-2xl	2,00rem	H3
--nibiru-text-3xl	2,60rem	H2
--nibiru-text-hero	clamp(2,6rem, 1,8rem + 4vw, 4,8rem)	H1, héros

Suivi

Le suivi se renforce à mesure que la taille augmente — c’est ainsi que vous maintenez un héros ressentant de la densité et un corps ressentant de l’ouverture.

Token	Valeur	Utilisation
--nibiru-tracking-display	−0.04em	Héros / H1
--nibiru-tracking-heading	−0.025em	H2, H3
--nibiru-tracking-body	−0.005em	Corps du texte
--nibiru-tracking-label	0.10em	Étiquettes en majuscules
--nibiru-tracking-eyebrow	0.22em	Eyebrow de l’héro, numéros de section

Un héros, écrit à la main

h1.atelier-hero__title {
  font-family: var(--nibiru-font-display);
  font-variation-settings: var(--nibiru-fv-display-hero);
  font-size:        var(--nibiru-text-hero);
  letter-spacing:   var(--nibiru-tracking-display);
  line-height:      0.96;
  color:            var(--nibiru-ink);
  max-width:        16ch;
}

h1.atelier-hero__title em {
  font-style: normal;
  color: var(--nibiru-iris-deep);
  position: relative;
}
h1.atelier-hero__title em::after {
  content: '';
  position: absolute;
  inset: auto 0 0.05em 0;
  height: 0.18em;
  background: var(--nibiru-aurum);
  opacity: 0.3;
  z-index: -1;
}

C’est un héros. Le mot italique obtient une simple soulignature en or. Rien d’autre n’a besoin de décoration.

Un corps, écrit à la main

body, .prose p {
  font-family: var(--nibiru-font-text);
  font-variation-settings: var(--nibiru-fv-body);
  font-size: var(--nibiru-text-base);
  line-height: 1.7;
  letter-spacing: var(--nibiru-tracking-body);
  color: var(--nibiru-ink);
}

Ne faites pas

• Ne utilisez pas Bricolage Grotesque à la même taille d’opérateur (OPSZ) pour le héros et le corps — cela gaspille son axe variable.
• Ne mettez pas en gras le texte du corps en dessous de wght: 600. En dessous de 600, il ne semble pas gras.
• Ne suivez pas un espacement positif pour le texte d’affichage. Compressez-le au fur et à mesure que la taille augmente.
• Ne utilisez pas Bricolage Italic pour des phrases entières — utilisez-le pour des mots simples dans un titre. La technique “Impress.” sur la page de démarrage est la référence.