Calculateur Type Scale
Générez une échelle typographique harmonieuse pour votre design. Choisissez votre ratio, visualisez les tailles h1-h6 en px, rem et em, et copiez le CSS. 100% gratuit.
h1
Texte exemple
67.3px4.209rem4.209em
h2
Texte exemple
50.5px3.157rem3.157em
h3
Texte exemple
37.9px2.369rem2.369em
h4
Texte exemple
28.4px1.777rem1.777em
h5
Texte exemple
21.3px1.333rem1.333em
h6
Texte exemple
16.0px1.000rem1.000em
small
Texte exemple
12.0px0.750rem0.750em
| Niveau | px | rem | em |
|---|---|---|---|
| h1 | 67.34 | 4.209 | 4.209 |
| h2 | 50.52 | 3.157 | 3.157 |
| h3 | 37.90 | 2.369 | 2.369 |
| h4 | 28.43 | 1.777 | 1.777 |
| h5 | 21.33 | 1.333 | 1.333 |
| h6 | 16.00 | 1.000 | 1.000 |
| small | 12.00 | 0.750 | 0.750 |
Pourquoi utiliser une échelle typographique ?
Une échelle typographique bien définie est la base d'un design cohérent et professionnel. En appliquant un ratio mathematique constant entre chaque niveau de titre, vous obtenez une hiérarchie visuelle claire et harmonieuse. Cet outil genere instantanément les tailles de police pour tous vos niveaux de titres (h1 a h6) ainsi que pour les petits textes, avec le CSS prêt à copier-coller dans votre projet.
Fonctionnalités
- 8 ratios classiques — De Minor Second à Golden Ratio, tous les intervalles musicaux et mathématiques celebres
- Taille de base configurable — Ajustez la taille de référence (défaut 16px)
- Aperçu en direct — Visualisez chaque taille avec un vrai texte exemple mis à jour instantanément
- Valeurs px, rem et em — Toutes les unités CSS calculées automatiquement
- Tableau comparatif — Vue d'ensemble claire de toutes les tailles
- CSS genere — Variables CSS et règles pretes à l'emploi pour votre projet
- Copie en un clic — Copiez directement le CSS dans votre presse-papier
Questions fréquentes
Qu'est-ce qu'une echelle typographique ?
Une échelle typographique est un système mathematique qui définit des tailles de texte harmonieuses en appliquant un ratio constant entre chaque niveau. Par exemple, avec un ratio de 1.333 (Perfect Fourth) et une base de 16px, chaque taille suivante est multipliee par 1.333.
Quel ratio choisir pour mon site web ?
Pour un site au design sobre et sérieux, le Major Second (1.125) ou le Minor Third (1.2) sont recommandés. Pour des sites avec une typographie plus expressive ou des titres impactants, le Perfect Fourth (1.333) ou le Golden Ratio (1.618) sont de bons choix. Évitez des ratios trop élevés sur mobile.
Quelle est la différence entre rem et em ?
Le rem (root em) est toujours relatif a la taille de base du document (html). Le em est relatif a la taille de la police de l'element parent. Pour la typographie, rem est preferable car il est plus previsible et permet aux utilisateurs de modifier la taille via les preferences du navigateur.
Quelle taille de base utiliser ?
La taille de base par defaut des navigateurs est 16px, ce qui est la valeur recommandee. N'utilisez jamais font-size sur l'element html en pixels absolus car cela empeche les utilisateurs d'agrandir le texte. Preferez laisser 16px (la valeur par defaut) ou utiliser un pourcentage comme 100%.