Échelle typographique interactive
Prévisualiser une échelle de typographie modulaire avec taille de base réglable, rapport, police et hauteur de ligne. Exportations CSS tailles pour le texte du corps et six niveaux de cap.
Typographie CSS
:root {
--type-font: "Inter", sans-serif;
--type-line-height: 1.5;
--type-small: 12.8px;
--type-body: 16px;
--type-h6: 20px;
--type-h5: 25px;
--type-h4: 31.25px;
--type-h3: 39.06px;
--type-h2: 48.83px;
--type-h1: 61.04px;
}
body { font-family: var(--type-font); font-size: var(--type-body); line-height: var(--type-line-height); }
h1 { font-size: var(--type-h1); line-height: 1.15; }
h2 { font-size: var(--type-h2); line-height: 1.15; }
h3 { font-size: var(--type-h3); line-height: 1.15; }
h4 { font-size: var(--type-h4); line-height: 1.15; }
h5 { font-size: var(--type-h5); line-height: 1.15; }
h6 { font-size: var(--type-h6); line-height: 1.15; }Le texte exporté reste en anglais ; vos saisies sont conservées telles quelles.
Pas d'inscription. Pas de crédits d'IA. Cet outil assemble votre sortie dans votre navigateur.
D'une idée à quelque chose d'utile.
- 01
Choisissez une police, une taille de base et un rapport modulaire.
- 02
Inspecter les dimensions des en-têtes et l'espacement des paragraphes.
- 03
Télécharger CSS les variables de l'échelle actuelle.
Un peu de contexte.
Une échelle modulaire multiplie une taille de police de base par un rapport répété. Cette aire de jeux calcule une hiérarchie de cap de six niveaux plus corps et petit texte. Les tailles sont des valeurs de pixel explicites pour un point de départ; examiner le comportement réactif et zoom avant de les utiliser dans la production.
Bonnes questions.
Est-ce CSS charger la police sélectionnée ?
C'est pas vrai. Il nomme la police et fournit des familles de repli. Chargez ou auto-hébergez la police choisie dans votre application.
Ces tailles sont-elles réactives?
L'exportation contient des dimensions fixes. Adaptez-les à vos points d'arrêt ou à votre système de type fluide après avoir testé le contenu réel.