Générateur d'échelle typographique
Construisez une échelle typographique modulaire à partir d'une taille de base et d'un rapport, prévisualisez-la et copiez-la en variables CSS.
À quoi sert cet outil
Choisissez la taille de votre texte courant, choisissez un rapport, et obtenez un ensemble de tailles qui vont ensemble. C'est tout ce qu'est une échelle modulaire : une taille de base multipliée par le même rapport à chaque pas vers le haut et divisée par lui à chaque pas vers le bas. Utiliser le même rapport partout est ce qui fait que les tailles se lisent comme une famille et non comme des nombres choisis un par un. Chaque pas est calculé directement depuis la base et non depuis la taille précédente, donc les extrémités de l'échelle restent exactes au lieu de dériver. Vous voyez l'échelle entière d'un coup dans l'aperçu et vous la copiez en variables CSS, prête à coller dans votre feuille de styles. Les tailles sortent en rem par défaut, divisées par la taille racine que vous utilisez réellement et non par un seize supposé.
À quoi ça vous sert
- Poser les tailles de titres et de corps d'un nouveau système de design.
- Remplacer un ensemble de tailles choisies au coup par coup par une échelle cohérente.
- Comparer le rendu d'un rapport serré et d'un rapport large avant de trancher.
- Générer les variables CSS de vos tokens de typographie.
Comment l'utiliser
- Fixez votre taille de base, en général celle du texte courant.
- Choisissez un rapport, de la seconde mineure serrée au nombre d'or plus spectaculaire.
- Indiquez combien de pas il vous faut au-dessus et en dessous de la base.
- Copiez les variables CSS pour votre feuille de styles.
Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.
Autres outils du même champ
DesignVérifier le Contraste de Couleur (WCAG)
Vérifiez le contraste de couleur WCAG entre texte et fond, avec aperçus en direct, verdict réussite ou échec et suggestions accessibles.
Générateur d'ombre CSS
Crée une ombre box-shadow en CSS avec un aperçu en direct : règle le décalage, le flou, l'étendue, la couleur et l'opacité, puis copie le code. Gratuit et dans ton navigateur.
Convertisseur de Couleur: HEX, RGB
Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.
Générateur de Dégradés CSS
Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.
Questions fréquentes
Quel rapport choisir ?
Les petits rapports donnent une échelle douce où les tailles se touchent presque, ce qui convient aux interfaces denses et aux textes longs. Les grands donnent des sauts marqués, efficaces sur les pages d'accueil et les mises en page éditoriales. Une tierce majeure est un point de départ confortable. La réponse honnête est d'en essayer deux ou trois et de les regarder, ce à quoi sert l'aperçu.
Qu'est-ce que la taille de base ?
La taille au pas zéro, presque toujours celle de votre texte courant. Tout le reste en découle, c'est donc le seul nombre qui mérite une décision réfléchie. Seize pixels est la valeur par défaut du navigateur et un point de départ raisonnable.
Pourquoi la sortie en rem demande-t-elle une taille racine ?
Parce que le rem est relatif à la taille de police racine, et beaucoup de systèmes de design la changent par rapport aux seize pixels par défaut du navigateur. Si le vôtre le fait, une échelle bâtie en supposant seize serait fausse à chaque pas. L'indiquer ici fait correspondre les valeurs en rem à ce que votre CSS fait réellement.
Px ou rem ?
Rem dans la plupart des cas, parce qu'il respecte la taille de police réglée par le lecteur dans son navigateur, ce qui compte pour l'accessibilité. Px est là pour les cas où il vous faut une taille fixe quoi qu'il arrive, et pour lire l'échelle en nombres concrets pendant que vous la concevez.