Les pubs vous déplaisent ? Aller Sans pub Auj. 

Générateur d'échelle modulaire

PromoteurMathématiquesTexte

ANNONCE · Supprimer ?

SAISIR

Processus automatique

Base

Taille de base (px)

La taille de référence de 1rem. La plupart des navigateurs utilisent par défaut 16px.

Ratio

Chaque étape de l'échelle est obtenue en multipliant la précédente par ce rapport.

Rapport personnalisé

Tout nombre compris entre 1.01 et 3.

Sortir

Unité

Décimales

Decimales dans les valeurs affichées.

Format

Text d'aperçu

Exemple

SORTIR

Côté client

ANNONCE · Supprimer ?

Guide

Générateur d'échelle modulaire

Le générateur d'échelle typographique construit une échelle complète à partir d'une taille de base et d'un rapport mathématique choisi. Chaque étape de l'échelle est obtenue en multipliant la précédente par ce rapport, ce qui maintient une proportion constante entre les tailles de texte sur tous les écrans.

Comment utiliser

Définissez le Taille de base en pixels (souvent 16px, équivalent à 1rem).
Choisissez un Ratio dans la liste déroulante, ou choisissez Personnalisé et saisissez une valeur personnalisée.
Sélectionnez la sortie Unité (rem, em ou px) et le nombre de Décimales.
Sélectionnez un Format d'exportation — Variables CSS, variables SCSS, configuration de Tailwind ou JSON.
Modifier le Exemple texte pour prévisualiser votre propre copie à chaque étape de l'échelle.
Copiez ou téléchargez le code généré et insérez-le directement dans votre projet.

Caractéristiques

Neuf rapports classiques – Deuxième mineure à l'octave, incluant le rapport d'or (1.618).
Entrée de rapport personnalisé – Entrez une valeur comprise entre 1.01 et 3 pour créer une échelle sur mesure.
Prévisualisation en temps réel – Consultez le texte d'exemple rendu à chaque étape, de xs à 6xl.
Quatre formats d'exportation – Variables CSS, variables SCSS, configuration de Tailwind ou JSON. fontSize rem, em ou px
– Choisissez l'unité qui correspond à votre système de conception. – Arrondissez les valeurs générées à 0 à 5 décimales.
Précision ajustable Calcul mathématique côté client
– Toutes les opérations se déroulent dans votre navigateur, rien n'est envoyé vers un serveur. Qu'est-ce qu'une échelle typographique modulaire ?

 FAQ

Une échelle typographique modulaire est une suite de tailles de police construite à partir d'une taille de base et d'un multiplicateur fixe. Chaque étape est obtenue en multipliant la précédente par ce rapport, ce qui maintient une relation proportionnelle constante entre les tailles dans l'ensemble de la conception.

Pourquoi utiliser des rapports mathématiques plutôt que des tailles arbitraires ?
Les rapports tirés de la théorie musicale et des proportions classiques — Quatrième parfaite, Cinquième parfaite, le Rapport d'or — créent des relations que l'œil perçoit comme harmonieuses. Les tailles arbitraires tendent à sembler déséquilibrées et imposent davantage de décisions visuelles sur chaque écran.

Quel rapport dois-je choisir pour du contenu riche en texte ?
Des rapports plus petits, tels que la Troisième mineure (1.2) et la Troisième majeure (1.25), maintiennent les tailles des titres proches de celles du corps de texte, ce qui fonctionne bien pour les documents, les blogs et les interfaces riches en contenu où le lecteur passe la majorité de son temps dans des paragraphes.

Quel rapport dois-je choisir pour les affichages marketing et les layouts éditoriaux ?
Des rapports plus grands, tels que la Cinquième parfaite (1.5) et le Rapport d'or (1.618), produisent des sauts de taille dramatiques entre le corps de texte et le texte d'affichage. Ils s'adaptent bien aux pages d'accueil, aux magazines et aux sections d'accueil où la typographie est le point focal.

Quelle est la différence entre les unités rem, em et px ?
px est une taille absolue en pixels. rem est relative à la taille de police de la racine, donc elle s'adapte lorsque l'utilisateur modifie ses paramètres par défaut. em est relative à la taille de police de l'élément parent immédiat, ce qui fait que les éléments imbriqués s'accumulent. La plupart des systèmes de conception préfèrent rem pour les échelles typographiques globales car il respecte les paramètres d'accessibilité de l'utilisateur.

Le rapide renard saute par-dessus le lazard

Envie d'une expérience sans pub ? Passez à la version sans pub



 Installez nos extensions

Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide

Sur

恵 Le Tableau de Bord Est Arrivé !

Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !

ANNONCE · Supprimer ?