Calculateur d'échelle typographique
Créez une hiérarchie de titres cohérente.
Saisissez une taille de base et choisissez un ratio pour générer une échelle modulaire complète, du H1 au petit texte, avec un extrait CSS correspondant.
1.250
h1Le vif renard brun39.06pxh2Le vif renard brun31.25pxh3Le vif renard brun25.00pxh4Le vif renard brun20.00pxh5Le vif renard brun16.00pxpLe vif renard brun16.00pxsmallLe vif renard brun12.80px:root {
--font-base: 16px;
--type-scale: 1.25;
}
h1 {
font-size: 39.06px;
}
h2 {
font-size: 31.25px;
}
h3 {
font-size: 25.00px;
}
h4 {
font-size: 20.00px;
}
h5 {
font-size: 16.00px;
}
p {
font-size: 16.00px;
}
small {
font-size: 12.80px;
}Comment créer une échelle typographique
- Saisissez votre taille de base en pixels.
- Choisissez un ratio, ou sélectionnez Personnalisé pour le vôtre.
- Vérifiez les tailles générées pour chaque niveau de titre.
- Copiez les variables et règles CSS dans votre feuille de styles.
Questions fréquentes
Quel ratio choisir ?
1.125 et 1.2 donnent des échelles subtiles ; 1.333 et 1.618 créent plus de contraste. Utilisez 1.2 à 1.25 pour la plupart des sites.
Pourquoi l'aperçu du H1 est-il limité ?
Les très grandes tailles sont limitées à l'aperçu uniquement ; la sortie CSS conserve la valeur calculée exacte.
Puis-je l'utiliser avec des unités rem ?
Oui. Divisez les valeurs en pixels par votre taille de police racine, ou remplacez px par rem dans le CSS généré.