{"id":900,"date":"2026-04-14T19:29:59","date_gmt":"2026-04-14T19:29:59","guid":{"rendered":"http:\/\/simonertel.net\/blog\/?p=900"},"modified":"2026-04-26T06:22:28","modified_gmt":"2026-04-26T06:22:28","slug":"les-dimensions-magiques","status":"publish","type":"post","link":"https:\/\/simonertel.net\/blog\/les-dimensions-magiques\/","title":{"rendered":"Les dimensions magiques !"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Un vieux secret math\u00e9matique qui ne vieillit jamais.<\/h2>\n\n\n\n<p>Le nombre d\u2019or (\u03c6 = 1,6180339&#8230;) est une proportion qu\u2019on retrouve partout : dans les coquillages, les fleurs de tournesol, les flocons de neige, et &#8230; dans nos cr\u00e9ations humaines ! Les Grecs l\u2019utilisaient d\u00e9j\u00e0 pour les colonnes du Parth\u00e9non, les \u00c9gyptiens pour les pyramides, L\u00e9onard de Vinci pour dessiner l\u2019homme de Vitruve, et m\u00eame nos formats de papier modernes (comme le A4) s\u2019en inspirent. Ce rapport magique semble satisfaire quelque chose de profond\u00e9ment enfoui dans notre perception : une harmonie que l\u2019\u0153il reconna\u00eet avant m\u00eame que le cerveau n\u2019analyse.<\/p>\n\n\n\n<p>Dans un article passionnant publi\u00e9 par <a href=\"http:\/\/www.pearsonified.com\/2011\/12\/golden-ratio-typography.php\" target=\"_blank\" rel=\"noreferrer noopener\">Pearsonified<\/a>, on d\u00e9couvre comment cette proportion peut servir \u00e0 d\u00e9finir une <strong>typographie \u00e9quilibr\u00e9e<\/strong> : o\u00f9 chaque taille de texte, chaque espacement, chaque ligne se place naturellement \u00e0 sa juste distance.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h3 class=\"wp-block-heading\">Quand les maths s\u2019invitent dans la mise en page<\/h3>\n\n\n\n<p>L\u2019id\u00e9e est simple : si votre texte de base est lisible, votre mise en page sera harmonieuse si ses proportions ob\u00e9issent au fameux 1,618. Dit autrement, vous pouvez utiliser le nombre d\u2019or pour relier <strong>trois \u00e9l\u00e9ments fondamentaux<\/strong> de la lecture \u00e0 l\u2019\u00e9cran :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>La taille du corps de texte (font-size)<\/li>\n\n\n\n<li>La hauteur de ligne (line-height)<\/li>\n\n\n\n<li>La largeur de la colonne (measure)<\/li>\n<\/ul>\n\n\n\n<p>Prenons un exemple concret. Supposons que vous partiez sur un texte de base \u00e0 <strong>16 px<\/strong> (classique). Votre hauteur de ligne id\u00e9ale serait alors proche de <code>16 \u00d7 1.618 \u2248 26 px<\/code>. Et pour que vos lignes respirent correctement, la largeur de votre colonne devrait tourner autour de <code>16 \u00d7 30 \u00d7 1.618 \u2248 780 px<\/code>.<\/p>\n\n\n\n<p>Ces chiffres ne sont pas magiques par eux-m\u00eames \u2014 mais ensemble, ils cr\u00e9ent un rythme visuel coh\u00e9rent. Les espaces entre les lettres, les mots et les lignes se r\u00e9pondent naturellement. Le texte devient plus facile \u00e0 lire, les yeux glissent sans fatigue, et tout semble \u201cjuste\u201d. C\u2019est le genre d\u2019effet que personne ne remarque\u2026 mais que tout le monde ressent.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Le webdesigner, ce petit Pythagore moderne<\/h3>\n\n\n\n<p>Pour aller plus loin, Pearsonified a m\u00eame mis en ligne un outil (le <a href=\"https:\/\/grtcalculator.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Golden Ratio Typography Calculator<\/a>) qui permet de calculer automatiquement vos tailles de texte et marges \u00e0 partir d\u2019une simple base. On y entre la taille de police, la largeur de colonne souhait\u00e9e, et hop : il vous renvoie la hauteur de ligne et la hi\u00e9rarchie typographique parfaite.<\/p>\n\n\n\n<p>Mais attention \u2014 il ne s\u2019agit pas de transformer vos maquettes en \u00e9quations. Le nombre d\u2019or n\u2019est pas une r\u00e8gle, c\u2019est un rep\u00e8re. Un moyen de ramener un peu d\u2019harmonie \u201cnaturelle\u201d dans un monde de pixels parfaitement carr\u00e9s. C\u2019est un guide, pas un carcan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pense-b\u00eate d&rsquo;or<\/h3>\n\n\n\n<p>Voici quelques valeurs simples inspir\u00e9es du ratio d\u2019or pour vos feuilles de style.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Base typographique *\/ \nbody { \n  font-size: 16px; \n  line-height: 1.618; \/* \u2248 26px *\/ \n  max-width: 780px; \n  \/* largeur id\u00e9ale pour la lecture *\/ \n  margin: 0 auto;\n} \n\n\/* Hi\u00e9rarchie des titres (\u03c6 = 1.618) *\/ \nh1 { \n  font-size: 16px * 1.618 * 1.618; \/* \u2248 42px *\/ \n} \n\nh2 { \n  font-size: 16px * 1.618; \/* \u2248 26px *\/ \n} \n\nh3 { \n  font-size: 16px * 1.3; \/* \u2248 21px *\/ \n}\n\n\/* Marges verticales *\/\np, ul, ol { \n   margin-bottom: 1.618em;\n} <\/code><\/pre>\n\n\n\n<p>Ces valeurs sont \u00e0 adapter selon votre police et votre densit\u00e9 visuelle. Mais elles donnent un cadre : celui d\u2019un texte qui \u201crespire\u201d, d\u2019un rythme qui s\u2019installe naturellement entre chaque ligne, chaque titre, chaque espace.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">L\u2019\u0153il avant le nombre, la sensibilit\u00e9 avant le cerveau.<\/h3>\n\n\n\n<p>En comprenant ces proportions, on apprend simplement \u00e0 reconna\u00eetre ce que notre \u0153il sait d\u00e9j\u00e0. Alors oui, parfois, un simple <em>1,618<\/em> peut transformer une page. Mais c\u2019est toujours votre \u0153il \u2014 et votre sens du rythme, \u00ab\u00a0sensibilit\u00e9\u00a0\u00bb \u2014 qui auront le dernier mot. <em>Source : <a href=\"http:\/\/www.pearsonified.com\/2011\/12\/golden-ratio-typography.php\" target=\"_blank\" rel=\"noreferrer noopener\">Pearsonified \u2013 Golden Ratio Typography<\/a><\/em><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Un vieux secret math\u00e9matique qui ne vieillit jamais. Le nombre d\u2019or (\u03c6 = 1,6180339&#8230;) est une proportion qu\u2019on retrouve partout : dans les coquillages, les fleurs de tournesol, les flocons de neige, et &#8230; dans nos cr\u00e9ations humaines ! Les Grecs l\u2019utilisaient d\u00e9j\u00e0 pour les colonnes du Parth\u00e9non, les \u00c9gyptiens pour les pyramides, L\u00e9onard de [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-900","post","type-post","status-publish","format-standard","hentry","category-non-classe"],"_links":{"self":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/900","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/comments?post=900"}],"version-history":[{"count":6,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/900\/revisions"}],"predecessor-version":[{"id":1042,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/posts\/900\/revisions\/1042"}],"wp:attachment":[{"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/media?parent=900"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/categories?post=900"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/simonertel.net\/blog\/wp-json\/wp\/v2\/tags?post=900"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}