6XC

Générateur d'échelle typographique

Construisez une échelle typographique modulaire à partir d'une taille de base et d'un ratio — aperçu en direct, tableau px/rem et variables CSS prêtes à copier.

597 vues

Pourquoi une échelle modulaire

Plutôt que de choisir les tailles de titres à l'œil, une échelle modulaire multiplie une taille de base par un ratio fixe à chaque niveau : une base de 16 px avec un ratio de 1,25 (tierce majeure) donne 20, 25, 31,3, 39,1, 48,8... Les tailles s'articulent comme des intervalles musicaux, et toute la hiérarchie reste cohérente — changez la base ou le ratio, et tout se réaccorde ensemble.

Ratios courants : 1,125 (seconde majeure — UI dense), 1,25 (tierce majeure — le choix sûr par défaut), 1,333 (quarte juste — éditorial), 1,618 (nombre d'or — spectaculaire, nécessite peu de niveaux). Les propriétés CSS personnalisées générées s'insèrent directement dans votre feuille de style ; les valeurs rem supposent une racine de 16 px.

Questions fréquentes

Quel ratio choisir ?

Le travail produit/UI se situe généralement entre 1,125 et 1,25 (les titres ne sont pas beaucoup plus grands que le corps de texte) ; les pages marketing et éditoriales supportent bien 1,333-1,618. Si le h1 semble crier, réduisez le ratio d'un cran plutôt que d'ajuster une seule taille à la main.

Pourquoi l'échelle descend-elle sous la base ?

Les niveaux négatifs (base ÷ ratio) donnent des légendes et des petits caractères qui appartiennent au même système — 12,8 px pour une échelle 16/1,25 plutôt qu'un 13 arbitraire.

Dois-je utiliser px ou rem ?

rem dans le CSS : les utilisateurs qui augmentent la taille de police de leur navigateur obtiennent une échelle proportionnellement plus grande. La colonne px sert aux maquettes dans les outils de design.

Outils similaires

Générateur de dégradé CSS Concevez des dégradés CSS linéaires, radiaux et coniques avec aperçu en direct et copiez le code. Lancer Générateur d'ombre CSS (box-shadow) Concevez une box-shadow visuellement — décalages, flou, étalement, couleur, opacité et inset — avec aperçu en direct. Lancer Générateur de border-radius CSS Arrondissez chaque coin individuellement ou tous à la fois, en px ou %, avec aperçu en direct et CSS copiable. Lancer Générateur d'ombre de texte CSS Concevez un text-shadow avec décalages, flou, couleur et opacité — aperçu en direct sur un texte d'exemple. Lancer