/* * Typographie fluide — échelle commune à toutes les pages d'écran. * * Problème traité : ni le zoom du navigateur, ni la mise à l'échelle de Windows * ne sont observables en CSS. Les deux ont en revanche le même effet mesurable — * ils réduisent la largeur du viewport en pixels CSS. Un écran 1920 physique à * 150 % Windows présente une fenêtre d'environ 1263 px CSS, dans laquelle une * taille de police figée (48 px pour un titre `text-5xl`) devient * disproportionnée. Indexer la typographie sur cette largeur répond donc aux * deux causes à la fois, sans détection ni JavaScript. * * Deux niveaux, volontairement : * * 1. La taille de police racine, dont dépend tout ce que Tailwind exprime en * rem — `text-*`, `p-*`, `gap-*`, hauteurs de champs. Une seule règle fait * respirer l'ensemble du site. * 2. Les grands titres (3xl et au-delà), qui décrochent plus vite que le corps * de texte : au-delà de 2rem, quelques points de trop font passer un titre * d'une ligne à trois dès que la fenêtre se resserre. * * Le réglage retenu est une compensation *partielle* de la mise à l'échelle * système : la page se resserre assez pour tenir, sans annuler le réglage que * l'utilisateur a choisi dans Windows pour voir plus grand. L'échelle vaut les * tailles nominales de Tailwind à 1920 px CSS et décroît en dessous. * * largeur CSS 1024 1152 1263 1366 1536 1728 1920 * racine 12.8 12.8 13.2 13.7 14.4 15.2 16.0 * text-sm 11.2 11.2 11.6 11.9 12.6 13.3 14.0 * text-3xl 19.8 21.0 22.5 23.9 26.1 28.5 30.0 (nominal 30) * text-4xl 23.7 25.2 27.0 28.6 31.3 34.2 36.0 (nominal 36) * text-5xl 31.6 33.7 36.0 38.2 41.8 45.6 48.0 (nominal 48) * text-6xl 39.5 42.1 45.0 47.7 52.2 57.0 60.0 (nominal 60) * text-7xl 47.4 50.5 54.0 57.3 62.6 68.3 72.0 (nominal 72) * * --------------------------------------------------------------------------- * POUR AFFINER — tout se règle par les quatre variables ci-dessous, aucune * autre valeur du fichier n'est à toucher : * * Texte encore trop grand : baisser --vh-root-slope (pente de la racine) * et, si besoin, --vh-root-floor (plancher). * Texte devenu trop petit : remonter les mêmes. * Titres seuls à corriger : --vh-title-vw (pente des titres) ; --vh-title-rem * décale l'ensemble sans changer la sensibilité * à la largeur. * * Les deux variables de titre sont exprimées pour `text-5xl` ; les autres * tailles en dérivent par un facteur fixe (0.625 pour 3xl, 0.75 pour 4xl, * 1.25 pour 6xl, 1.5 pour 7xl), de sorte que l'échelle reste proportionnée * quel que soit le réglage. * --------------------------------------------------------------------------- * * Accessibilité : les bornes gardent une composante en rem, de sorte qu'un zoom * volontaire du navigateur continue d'agrandir le texte — une échelle purement * en vw l'annulerait et contreviendrait au critère WCAG 1.4.4. Le plancher de * 12.75 px porte `text-sm` à 11.2 px sur les fenêtres les plus étroites : c'est * le prix de la compensation demandée, et c'est le premier réglage à remonter * si des textes secondaires deviennent pénibles à lire. * * Spécificité : les sélecteurs de titre sont doublés (`.text-4xl.text-4xl`) afin * de l'emporter quelle que soit la position de cette feuille par rapport à * Tailwind — le CDN JIT (cdn.tailwindcss.com) injecte ses styles en fin de * , après les . Les variantes responsive sont redéfinies avec la * même spécificité et dans l'ordre des points de rupture, pour qu'un * `md:text-5xl` continue de l'emporter sur le `text-4xl` de base. */ :root { /* Racine : clamp(plancher, base + pente, plafond) */ --vh-root-floor: 12.75px; --vh-root-base: 7.875px; --vh-root-slope: 0.4232vw; --vh-root-ceil: 16px; /* Titres, exprimés pour text-5xl — les autres tailles en dérivent */ --vh-title-rem: 1.195; --vh-title-vw: 1.6; } html { font-size: clamp( var(--vh-root-floor), calc(var(--vh-root-base) + var(--vh-root-slope)), var(--vh-root-ceil) ); } /* Grands titres — taille de base */ .text-3xl.text-3xl { font-size: clamp(1.3125rem, calc(var(--vh-title-rem) * 0.625rem + var(--vh-title-vw) * 0.625vw), 1.875rem); line-height: 1.2; } .text-4xl.text-4xl { font-size: clamp(1.5625rem, calc(var(--vh-title-rem) * 0.75rem + var(--vh-title-vw) * 0.75vw), 2.25rem); line-height: 1.15; } .text-5xl.text-5xl { font-size: clamp(2.125rem, calc(var(--vh-title-rem) * 1rem + var(--vh-title-vw) * 1vw), 3rem); line-height: 1.08; } .text-6xl.text-6xl { font-size: clamp(2.625rem, calc(var(--vh-title-rem) * 1.25rem + var(--vh-title-vw) * 1.25vw), 3.75rem); line-height: 1.05; } .text-7xl.text-7xl { font-size: clamp(3.1875rem, calc(var(--vh-title-rem) * 1.5rem + var(--vh-title-vw) * 1.5vw), 4.5rem); line-height: 1.03; } /* Variantes responsive — mêmes valeurs, dans l'ordre des points de rupture */ @media (min-width: 640px) { .sm\:text-3xl.sm\:text-3xl { font-size: clamp(1.3125rem, calc(var(--vh-title-rem) * 0.625rem + var(--vh-title-vw) * 0.625vw), 1.875rem); line-height: 1.2; } .sm\:text-4xl.sm\:text-4xl { font-size: clamp(1.5625rem, calc(var(--vh-title-rem) * 0.75rem + var(--vh-title-vw) * 0.75vw), 2.25rem); line-height: 1.15; } .sm\:text-5xl.sm\:text-5xl { font-size: clamp(2.125rem, calc(var(--vh-title-rem) * 1rem + var(--vh-title-vw) * 1vw), 3rem); line-height: 1.08; } .sm\:text-6xl.sm\:text-6xl { font-size: clamp(2.625rem, calc(var(--vh-title-rem) * 1.25rem + var(--vh-title-vw) * 1.25vw), 3.75rem); line-height: 1.05; } .sm\:text-7xl.sm\:text-7xl { font-size: clamp(3.1875rem, calc(var(--vh-title-rem) * 1.5rem + var(--vh-title-vw) * 1.5vw), 4.5rem); line-height: 1.03; } } @media (min-width: 768px) { .md\:text-3xl.md\:text-3xl { font-size: clamp(1.3125rem, calc(var(--vh-title-rem) * 0.625rem + var(--vh-title-vw) * 0.625vw), 1.875rem); line-height: 1.2; } .md\:text-4xl.md\:text-4xl { font-size: clamp(1.5625rem, calc(var(--vh-title-rem) * 0.75rem + var(--vh-title-vw) * 0.75vw), 2.25rem); line-height: 1.15; } .md\:text-5xl.md\:text-5xl { font-size: clamp(2.125rem, calc(var(--vh-title-rem) * 1rem + var(--vh-title-vw) * 1vw), 3rem); line-height: 1.08; } .md\:text-6xl.md\:text-6xl { font-size: clamp(2.625rem, calc(var(--vh-title-rem) * 1.25rem + var(--vh-title-vw) * 1.25vw), 3.75rem); line-height: 1.05; } .md\:text-7xl.md\:text-7xl { font-size: clamp(3.1875rem, calc(var(--vh-title-rem) * 1.5rem + var(--vh-title-vw) * 1.5vw), 4.5rem); line-height: 1.03; } } @media (min-width: 1024px) { .lg\:text-3xl.lg\:text-3xl { font-size: clamp(1.3125rem, calc(var(--vh-title-rem) * 0.625rem + var(--vh-title-vw) * 0.625vw), 1.875rem); line-height: 1.2; } .lg\:text-4xl.lg\:text-4xl { font-size: clamp(1.5625rem, calc(var(--vh-title-rem) * 0.75rem + var(--vh-title-vw) * 0.75vw), 2.25rem); line-height: 1.15; } .lg\:text-5xl.lg\:text-5xl { font-size: clamp(2.125rem, calc(var(--vh-title-rem) * 1rem + var(--vh-title-vw) * 1vw), 3rem); line-height: 1.08; } .lg\:text-6xl.lg\:text-6xl { font-size: clamp(2.625rem, calc(var(--vh-title-rem) * 1.25rem + var(--vh-title-vw) * 1.25vw), 3.75rem); line-height: 1.05; } .lg\:text-7xl.lg\:text-7xl { font-size: clamp(3.1875rem, calc(var(--vh-title-rem) * 1.5rem + var(--vh-title-vw) * 1.5vw), 4.5rem); line-height: 1.03; } } @media (min-width: 1280px) { .xl\:text-3xl.xl\:text-3xl { font-size: clamp(1.3125rem, calc(var(--vh-title-rem) * 0.625rem + var(--vh-title-vw) * 0.625vw), 1.875rem); line-height: 1.2; } .xl\:text-4xl.xl\:text-4xl { font-size: clamp(1.5625rem, calc(var(--vh-title-rem) * 0.75rem + var(--vh-title-vw) * 0.75vw), 2.25rem); line-height: 1.15; } .xl\:text-5xl.xl\:text-5xl { font-size: clamp(2.125rem, calc(var(--vh-title-rem) * 1rem + var(--vh-title-vw) * 1vw), 3rem); line-height: 1.08; } .xl\:text-6xl.xl\:text-6xl { font-size: clamp(2.625rem, calc(var(--vh-title-rem) * 1.25rem + var(--vh-title-vw) * 1.25vw), 3.75rem); line-height: 1.05; } .xl\:text-7xl.xl\:text-7xl { font-size: clamp(3.1875rem, calc(var(--vh-title-rem) * 1.5rem + var(--vh-title-vw) * 1.5vw), 4.5rem); line-height: 1.03; } } /* * Impression : le viewport n'a plus de sens sur une feuille A4, les tailles * fluides y produiraient des écarts selon le navigateur. On revient au fixe. */ @media print { html { font-size: 16px; } .text-3xl.text-3xl { font-size: 1.875rem; } .text-4xl.text-4xl { font-size: 2.25rem; } .text-5xl.text-5xl { font-size: 3rem; } .text-6xl.text-6xl { font-size: 3.75rem; } .text-7xl.text-7xl { font-size: 4.5rem; } }