Calculateur Type Scale
Generez une echelle 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 echelle typographique ?
Une echelle typographique bien definie est la base d'un design coherent et professionnel. En appliquant un ratio mathematique constant entre chaque niveau de titre, vous obtenez une hierarchie visuelle claire et harmonieuse. Cet outil genere instantanement les tailles de police pour tous vos niveaux de titres (h1 a h6) ainsi que pour les petits textes, avec le CSS pret a copier-coller dans votre projet.
Fonctionnalites
- 8 ratios classiques — De Minor Second a Golden Ratio, tous les intervalles musicaux et mathematiques celebres
- Taille de base configurable — Ajustez la taille de reference (defaut 16px)
- Apercu en direct — Visualisez chaque taille avec un vrai texte exemple mis a jour instantanement
- Valeurs px, rem et em — Toutes les unites CSS calculees automatiquement
- Tableau comparatif — Vue d'ensemble claire de toutes les tailles
- CSS genere — Variables CSS et regles pretes a l'emploi pour votre projet
- Copie en un clic — Copiez directement le CSS dans votre presse-papier
Questions frequentes
Qu'est-ce qu'une echelle typographique ?
Une echelle typographique est un systeme mathematique qui definit 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 serieux, le Major Second (1.125) ou le Minor Third (1.2) sont recommandes. 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. Evitez des ratios trop eleves sur mobile.
Quelle est la difference 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%.