Le nombre d'or en design jouit d'une réputation presque mystique, et pourtant la plupart des gens l'utilisent mal : soit ils forcent tout à entrer dans 1,618, soit ils l'ignorent totalement. La vérité, c'est que le nombre d'or n'est pas une formule magique ; c'est un outil de proportion pratique qui aide à construire rapidement des hiérarchies agréables. Dans cet article, je laisse de côté la légende pour montrer comment l'utiliser concrètement dans les décisions de logo, de typographie et de mise en page.
Qu'est-ce que le nombre d'or exactement ?
Le nombre d'or (φ, phi) est une façon de diviser un tout en deux parties telle que le rapport de la grande partie à la petite égale le rapport du tout à la grande partie. Sa valeur numérique est d'environ 1,618. Il est étroitement lié à la suite de Fibonacci (1, 1, 2, 3, 5, 8, 13, 21...) : plus on avance, plus le rapport de deux nombres consécutifs s'approche de 1,618.
En pratique, on l'utilise dans les deux sens : on agrandit une mesure avec ×1,618, ou on la réduit avec ÷1,618 (soit ×0,618). En partant d'un élément de 100 pixels, le palier supérieur fait 162 px et l'inférieur 62 px. L'astuce n'est pas d'utiliser un seul nombre, mais un ensemble cohérent de paliers dérivés de cette chaîne.
Le nombre d'or dans une grille de logo
En création de logo, le nombre d'or brille surtout dans les constructions circulaires et modulaires. De nombreux emblèmes classiques reposent sur une grille de cercles imbriqués dont les diamètres croissent selon des multiples de 1,618. Cela crée une harmonie visuelle automatique entre les parties.
Un flux de départ pratique :
- Choisissez une unité de base (par exemple 10 px). Dérivez les diamètres de cercle en 10, 16, 26, 42... selon les multiples de 1,618.
- Placez les contours de votre lettre ou symbole sur les tangentes et intersections de ces cercles.
- Gardez aussi le rapport largeur/hauteur global du symbole proche de 1,618, pour qu'il s'inscrive dans un rectangle d'or.
Un avertissement important : la grille est un squelette, pas une prison. Si décaler une courbe de 2 px paraît optiquement plus juste, décalez-la. Le nombre d'or donne un point de départ ; l'œil a toujours le dernier mot.
Construire une échelle typographique avec le nombre d'or
L'usage le plus fiable et quotidien du nombre d'or est l'échelle typographique. On fixe le corps de texte et on dérive les tailles de titre en multipliant par 1,618. La relation titre–texte devient ainsi proportionnelle plutôt qu'aléatoire.
Une échelle à partir d'un corps de texte de 16 px :
:root {
--ratio: 1.618;
--text-base: 1rem; /* 16px */
--text-lg: calc(var(--text-base) * var(--ratio)); /* ~25.9px */
--text-xl: calc(var(--text-base) * var(--ratio) * var(--ratio)); /* ~41.9px */
--text-sm: calc(var(--text-base) / var(--ratio)); /* ~9.9px */
}
h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
small { font-size: var(--text-sm); }Astuce : un 1,618 complet fait parfois exploser les titres sur petits écrans. Dans les interfaces denses, des rapports plus doux comme 1,5 ou 1,414 (√2) sont plus utilisables. Le nombre d'or est un outil, pas une règle ; on le choisit selon le contexte.
Utiliser les proportions dans la mise en page
En mise en page, le nombre d'or brille surtout dans les structures à deux colonnes : contenu principal et barre latérale. Si vous divisez la largeur totale dans un rapport 1,618 / 1, la colonne principale fait environ 61,8 % et la barre latérale 38,2 %. Cela paraît plus équilibré et aéré que le classique 70/30.
.layout {
display: grid;
/* 1.618fr contenu principal, 1fr barre latérale */
grid-template-columns: 1.618fr 1fr;
gap: 2rem;
}La même logique vaut pour le rythme vertical : vous pouvez régler la hauteur d'une section héros par rapport au bloc de contenu situé en dessous selon un rapport de 1,618. Si vous choisissez aussi vos espacements (padding, marge) dans le même ensemble de paliers, toute la page gagne une cohérence invisible.
Erreurs courantes et limites
Il y a quelques manières classiques de mal utiliser le nombre d'or :
- Le forcer : superposer une spirale dorée sur un logo existant et déclarer « voyez, parfait ». La plupart de ces exemples sont reconstruits après coup. Utilisez le rapport comme outil au début de la conception, pas comme preuve ensuite.
- L'obsession d'un seul rapport : l'accessibilité, la longueur de ligne (~45–75 caractères idéalement) et la taille des cibles tactiles (min. 44 px) passent avant le nombre d'or. L'ergonomie humaine l'emporte sur l'esthétique mathématique.
- Courir après les pixels : n'ayez pas peur d'arrondir des valeurs comme 25,888 px. 26 px convient très bien ; l'œil ne voit pas une différence de 0,1 px.
Le nombre d'or offre un point de départ rapide et esthétique quand vous hésitez. Traitez-le comme un raccourci, pas comme une loi sacrée.
Questions fréquentes
Dois-je utiliser le nombre d'or dans chaque design ?
Non. Le nombre d'or est un outil, pas une obligation. Un bon système de grille de 8 px ou un simple rapport de 1,5 suffit largement pour la plupart des interfaces. Recourez au nombre d'or quand vous voulez une chaîne de proportions rapide et harmonieuse.
Le nombre d'or est-il la même chose que la règle des tiers ?
Non, mais ils sont parents. La règle des tiers divise un cadre à 1/3–2/3 (rapport ~1,5) ; le nombre d'or le divise à ~1,618. Tous deux visent à décentrer le point focal pour une composition plus dynamique. La règle des tiers est plus pratique en photographie, le nombre d'or pour les proportions.
Quelle est la façon la plus simple d'appliquer le nombre d'or en CSS ?
Définissez une variable CSS (--ratio: 1.618) et dérivez-en les valeurs de typographie, d'espacement et de colonnes avec calc(). Vous pouvez ainsi régler la proportion de tout le système en changeant une seule ligne.
Vous voulez bien régler les proportions de votre marque ? Je conçois logos, échelles typographiques et mises en page d'interface sur une base mathématique, mais toujours validée à l'œil. Parlons de votre projet : contactez-moi.