Design

Échelle typographique

Générez une hiérarchie de tailles de police harmonieuse. Prévisualisez en temps réel et exportez le CSS.

px

Prévisualisation de l'échelle

Base 16px × 1.333
h1
Aa — 89,8px
5,61rem
h2
Aa — 67,3px
4,209rem
h3
Aa — 50,5px
3,157rem
h4
Aa — 37,9px
2,369rem
h5
Aa — 28,4px
1,777rem
h6
Aa — 21,3px
1,333rem
base
Aa — 16px
1rem
xs
Aa — 12px
0,75rem
small
Aa — 9px
0,563rem

CSS Custom Properties

:root {
  --font-size-small: 0,563rem; /* 9px */
  --font-size-xs: 0,75rem; /* 12px */
  --font-size-base: 1rem; /* 16px */
  --font-size-h6: 1,333rem; /* 21,3px */
  --font-size-h5: 1,777rem; /* 28,4px */
  --font-size-h4: 2,369rem; /* 37,9px */
  --font-size-h3: 3,157rem; /* 50,5px */
  --font-size-h2: 4,209rem; /* 67,3px */
  --font-size-h1: 5,61rem; /* 89,8px */
}

Besoin de convertir em en pixels ?

Convertissez vos unités typographiques avec notre outil dédié.

Convertir em / px

Questions fréquentes

Qu'est-ce qu'une échelle typographique ?

Une échelle typographique est une série de tailles de police calculées mathématiquement à partir d'une taille de base et d'un ratio multiplicateur. Chaque niveau est obtenu en multipliant le précédent par ce ratio.

Cette approche garantit une hiérarchie visuelle harmonieuse et cohérente sur l'ensemble d'une interface.

Quel ratio typographique choisir pour mon projet ?

Pour un site corporatif ou une interface dense, choisissez un ratio modéré comme la Seconde Majeure (1.125) ou la Tierce Mineure (1.2). Pour un site éditorial ou créatif avec plus de contraste hiérarchique, optez pour la Quarte Parfaite (1.333) ou le golden ratio (1.618).

Sur mobile, les ratios plus petits (1.125–1.2) fonctionnent généralement mieux.

Comment utiliser les custom properties CSS générées ?

Copiez les custom properties CSS générées dans votre fichier :root {}. Utilisez ensuite ces variables dans vos styles : font-size: var(--font-size-base) pour le body text, var(--font-size-h1) pour les titres, etc.

Cette approche centralise la gestion de l'échelle typographique et facilite les ajustements globaux.

Quelle taille de base utiliser en 2026 ?

La taille de base standard est 16px (correspond à 1rem dans la plupart des navigateurs). Certains designers utilisent 18px pour améliorer la lisibilité sur les écrans haute densité.

Évitez les tailles inférieures à 14px pour le body text principal. La taille de base influence directement toutes les autres tailles de l'échelle typographique.

Quelle est la différence entre rem et px pour la typographie ?

Le rem est relatif à la taille de police de l'élément racine (html), tandis que px est une unité absolue. Les rem respectent les préférences d'accessibilité de l'utilisateur (zoom navigateur, paramètres d'accessibilité) alors que les px restent fixes.

Pour l'accessibilité, il est recommandé d'utiliser des rem ou des em pour les tailles de police.

Calculateur d'échelle typographique : créer une hiérarchie visuelle harmonieuse

Qu'est-ce qu'une échelle typographique modulaire ?

Une échelle typographique modulaire (modular scale) est un système de tailles de police calculées mathématiquement à partir d'une taille de base et d'un ratio multiplicateur constant. Chaque niveau de l'échelle est obtenu en multipliant le précédent par ce ratio, créant ainsi une progression géométrique. Le concept a été formalisé par Tim Brown et Scott Kellum dans leur projet Modular Scale, inspiré des proportions musicales et architecturales utilisées depuis l'Antiquité.

L'intérêt principal est la cohérence : au lieu de choisir des tailles arbitraires (14px, 18px, 24px, 36px...), vous obtenez un système où chaque taille entretient un rapport harmonieux avec les autres. Cette harmonie se perçoit visuellement, même si l'utilisateur ne peut pas l'exprimer consciemment. Les interfaces typographiquement cohérentes sont jugées plus professionnelles et plus lisibles dans les études d'utilisabilité.

taille = base x ratio^n
Avec n allant de -2 (petits textes) à +6 (titre principal h1)

1.333

Perfect Fourth : le ratio le plus utilisé en web design, recommandé pour les interfaces textuelles

Les principaux ratios et quand les utiliser

Chaque ratio porte le nom d'un intervalle musical. Plus le ratio est élevé, plus le contraste entre les niveaux de l'échelle est marqué. Le choix du ratio dépend du contexte d'utilisation, de la densité de contenu et du support de lecture.

Contraste typographique par ratio

Minor Second (1.067)
24.3 px
Major Second (1.125)
30.4 px
Minor Third (1.200)
47.8 px
Major Third (1.250)
61.0 px
Perfect Fourth (1.333)
89.8 px
Perfect Fifth (1.500)
182.3 px
Golden Ratio (1.618)
288.3 px

Écart entre la taille base (16px) et le h1 (n=+6) pour chaque ratio

Pour les interfaces denses (dashboards, applications SaaS), les ratios Minor Second (1.067) ou Major Second (1.125) offrent un contraste subtil qui préserve la densité d'information. Pour les sites éditoriaux ou les landing pages, la Perfect Fourth (1.333) apporte un contraste marqué entre titres et corps de texte. Le Golden Ratio (1.618) est spectaculaire mais produit des titres très grands, difficiles à intégrer sur mobile.

Vertical rhythm : aligner le texte sur une grille de base

Le vertical rhythm (rythme vertical) consiste à aligner toutes les lignes de texte sur une grille régulière, quelle que soit la taille de police. Pour y parvenir, chaque élément typographique doit avoir un line-height qui est un multiple de la grille de base. Par exemple, avec une base de 16px et un line-height de 1.5 (soit 24px), votre grille de base est de 24px. Un h2 de 28px devrait avoir un line-height de 48px (2 x 24) pour rester aligné.

En pratique, un vertical rhythm strict est difficile à maintenir sur l'ensemble d'une interface. L'approche pragmatique consiste à l'appliquer au corps de texte et aux éléments de contenu long, tout en autorisant plus de flexibilité pour les composants d'interface (boutons, formulaires, cartes).

Astuce CSS

Utilisez les custom properties générées par notre outil comme base, puis ajustez le line-height de chaque niveau pour qu'il soit un multiple de votre grille de base. La propriété margin-bottom des paragraphes devrait également être un multiple de cette grille.

Exemple concret : configurer une échelle pour un blog

Prenons le cas d'un blog éditorial. La priorité est la lisibilité longue durée, avec un contraste hiérarchique clair entre titres, sous-titres et corps de texte.

1
Choisir la base 18 px

18px pour une meilleure lisibilité sur écrans HD

2
Sélectionner le ratio 1.333

Perfect Fourth (1.333) pour un contraste éditorial marqué

3
Vérifier les extrêmes h1 : 101 px

h1 = 101px (OK pour titres), small = 10.1px (OK pour légendes)

4
Exporter les CSS vars 9 variables

Copier les custom properties dans votre fichier global

Adapter l'échelle au responsive design

Un ratio qui fonctionne sur desktop peut produire des titres trop grands sur mobile. La solution courante est d'utiliser un ratio plus petit sur mobile et de passer au ratio cible à partir d'un certain breakpoint. Par exemple, une Major Second (1.125) sur mobile et une Perfect Fourth (1.333) sur desktop. Cette technique s'appelle le double-stranded modular scale.

Mobile (< 768px)

1.125

Major Second, contraste doux

Desktop (>= 768px)

1.333

Perfect Fourth, contraste marqué

Avec les custom properties CSS, le changement de ratio dans une media query se résume à redéfinir les variables. Notre outil vous permet de générer les deux jeux de variables et de les intégrer dans vos media queries. Pour convertir les valeurs rem en pixels et inversement, utilisez le convertisseur em/px.

Erreurs fréquentes à éviter

Attention

Ne mélangez jamais des tailles arbitraires avec une échelle modulaire. Si vous ajoutez manuellement un 22px entre votre h4 (21.3px) et votre h3 (28.4px), vous brisez la cohérence de l'ensemble du système.
  • Choisir un ratio trop élevé pour un dashboard. Le Golden Ratio (1.618) produit un h1 de 288px sur une base 16px. Sur une interface dense, cela crée des titres disproportionnés qui gaspillent l'espace vertical.
  • Ignorer le test mobile. Un h1 de 90px est lisible sur un écran 27", mais il occupe 3 lignes sur un iPhone SE. Testez toujours votre échelle sur les plus petits écrans cibles.
  • Oublier le line-height. L'échelle ne concerne que le font-size. Un h2 de 36px avec un line-height de 1.15 peut chevaucher la ligne suivante. Réglez le line-height de chaque niveau indépendamment.
  • Utiliser des px au lieu de rem. Les unités px ignorent les préférences d'accessibilité de l'utilisateur (zoom navigateur). Les rem respectent la taille de police définie par l'utilisateur, ce qui est essentiel pour l'accessibilité.
  • Ne pas documenter le système. Si votre équipe ne sait pas qu'une échelle modulaire est en place, les designers ajouteront des tailles ad hoc. Documentez le ratio et la base dans votre design system.

Intégrer l'échelle avec vos images et votre mise en page

L'échelle typographique est un pilier du design system, mais elle fonctionne de concert avec les autres éléments visuels. Les dimensions de vos images peuvent également suivre une progression modulaire. Si vous travaillez avec des visuels pour les réseaux sociaux, consultez notre guide des tailles d'images par plateforme pour harmoniser vos formats visuels. Pour les projets d'impression, le calculateur DPI vous aide à vérifier que vos visuels typographiques seront nets à l'impression.

Sources et références

  • Tim Brown, More Meaningful Typography, A List Apart (2011) : article fondateur sur les échelles modulaires.
  • Modular Scale par Tim Brown et Scott Kellum : outil de référence et documentation des ratios.
  • MDN Web Docs, font-size : spécification CSS des unités typographiques.
  • W3C, CSS Values and Units Module Level 4 : spécification des unités rem, em et px.
  • Robert Bringhurst, The Elements of Typographic Style : référence sur le rythme vertical et les proportions typographiques.

Design & Créatif

Vérificateur Contraste WCAG
Calculateur Ratio d'Image
Générateur Border Radius CSS
Convertisseur Em vers Px
Guide Tailles Images Réseaux Sociaux
Générateur Box Shadow CSS

Formule : taille = base x ratio^n, avec n de -2 à +6. Ratios basés sur les intervalles musicaux (Major Second, Perfect Fourth, etc.). Concept popularisé par la méthode "Modular Scale" de Tim Brown et Scott Kellum. Dernière mise à jour : avril 2026.