Convertisseur typographique

Convertisseur typographique

Convertissez entre pixels, points, picas, em, rem, pouces, centimètres et millimètres -- les unités que les designers et développeurs rencontrent chaque jour. Ce convertisseur comble l'écart entre la conception imprimée (points, picas) et le développement web (px, em, rem), et vous aide à garder des tailles de police cohérentes que vous travailliez dans Figma, InDesign ou une feuille de style CSS.

Comment se calcule la conversion typographique

Toutes les unités passent par le pixel (px) comme base interne, en supposant une résolution d'écran standard de 96 DPI et une taille de police racine de 16 px. La conversion se fait en deux étapes : d'abord convertir la valeur saisie en pixels à l'aide de son facteur, puis convertir des pixels vers l'unité cible.

Facteurs de conversion clés (vers les pixels) :

• 1 pt = 1.3333 px (car 1 pt = 1/72 po, et 1 po = 96 px)
• 1 pc (pica) = 16 px (1 pc = 12 pt = 12 x 1.3333)
• 1 po = 96 px
• 1 cm = 37.795 px
• 1 mm = 3.7795 px
• 1 em = 16 px (à la racine par défaut de 16 px)
• 1 rem = 16 px (à la racine par défaut de 16 px)

Exemples concrets

Scénario 1 -- Une designer transmet des spécifications d'impression à un développeur web Une charte graphique de marque spécifie un corps de texte à 10 pt et des titres à 24 pt. Le développeur web a besoin des équivalents en px. 10 pt x 1.3333 = 13.33 px (arrondi à 13 px), et 24 pt x 1.3333 = 32 px. Réglez la font-size du corps à 13px et celle du h1 à 32px pour reproduire l'apparence imprimée.

Scénario 2 -- Convertir un design Figma de px en rem pour l'accessibilité Un fichier Figma utilise 16 px pour le texte de paragraphe, 20 px pour les sous-titres et 28 px pour les titres. En divisant chaque valeur par 16 (la taille de police racine par défaut), on obtient 1 rem, 1.25 rem et 1.75 rem. Utiliser le rem plutôt que le px permet aux utilisateurs qui règlent une taille de police par défaut plus grande dans leur navigateur de bénéficier d'un texte proportionnellement plus grand.

Scénario 3 -- Vérifier des mesures en centimètres pour un export PDF Un modèle de document juridique exige des tailles de police en centimètres. La designer utilise 0.42 cm pour les notes de bas de page et 0.635 cm pour le corps de texte. Conversion : 0.42 cm x 37.795 = 15.87 px ≈ 12 pt ; 0.635 cm x 37.795 = 24 px = 18 pt. Les deux sont des tailles d'impression standard, ce qui confirme que les mesures sont correctes.

Tableau de référence des unités typographiques

Quand utiliser cet outil

• Traduire une charte graphique imprimée (en points) en feuille de style CSS (en px ou rem) pour la refonte d'un site web
• Convertir des designs Figma exprimés en px en valeurs rem pour mettre en œuvre des mises en page accessibles et compatibles avec le zoom du navigateur
• Vérifier que les tailles de police d'un document PDF ou Word correspondront à leur équivalent web
• Agrandir un design : un client demande de "tout agrandir de 10%" -- convertissez dans une unité commune, multipliez, reconvertissez
• Vérifier qu'un corps de texte à 16 px correspond à l'attente standard d'un corps imprimé de 12 pt

Erreurs courantes

1. Utiliser l'em au lieu du rem pour les tailles de texte globales. Parce que l'em est relatif à l'élément parent, l'imbrication de composants provoque un cumul. Un élément de 1.2 em à l'intérieur d'un autre de 1.2 em s'affiche à 1.44x la racine -- souvent involontairement. Utilisez le rem pour un dimensionnement global prévisible.
2. Supposer que 1 px = 1 pt. Les points sont plus grands : 1 pt = 1.333 px. Régler une règle CSS à 12px alors qu'un designer a spécifié 12pt produira un texte 25% plus petit que prévu.
3. Ignorer que l'em et le rem changent quand la taille de police racine change. Si vous réglez html { font-size: 18px; }, alors 1 rem = 18 px, et non 16 px. Précisez toujours l'hypothèse sur la taille de la racine lorsque vous partagez des valeurs en rem.
4. Utiliser le pt pour le CSS web. Bien que les navigateurs acceptent le pt, c'est une unité d'impression qui se traduit de manière incohérente selon les densités d'écran et les niveaux de zoom. Tenez-vous-en au px pour les tailles fixes et au rem pour le texte extensible sur le web.

Contexte et applications

La conversion des unités typographiques intervient dans trois grands flux de travail. Dans la migration de l'impression vers le web, une marque peut disposer de décennies de supports imprimés définis en points et picas qu'il faut transférer vers un système de style numérique. Faire correspondre un corps imprimé de 10 pt à un corps web de 13.33 px préserve la cohérence visuelle. Dans la conformité en matière d'accessibilité, la directive WCAG 2.1 numéro 1.4.4 exige que le texte soit redimensionnable jusqu'à 200% sans perte de contenu. Utiliser le rem plutôt que le px permet au navigateur de respecter la préférence de taille de police par défaut de l'utilisateur, ce que le px outrepasse. Dans la typographie web réactive, la fonction CSS clamp() exige des valeurs précises en px ou rem pour les tailles minimale et maximale -- ce convertisseur vous aide à définir ces bornes à partir des spécifications en points du designer.

Conseils

1. Le raccourci universel à mémoriser : 16 px = 12 pt = 1 rem = 1 em (aux réglages par défaut du navigateur)
2. Divisez n'importe quelle valeur en px par 16 pour obtenir son équivalent en rem -- 24 px / 16 = 1.5 rem
3. Multipliez n'importe quelle valeur en pt par 1.333 pour obtenir des px -- 18 pt x 1.333 = 24 px
4. Pour les documents imprimés, 1 pica = 12 points, donc une gouttière de colonne de 3 picas = 36 pt = 48 px
5. Lorsque vous construisez un système de tokens de design, définissez toutes les tailles en rem afin qu'un seul changement de taille de police racine mette à l'échelle l'ensemble du système
6. Utilisez le px pour les bordures (1 px), les ombres portées et les détails fins qui ne doivent pas s'adapter à la taille du texte