Pourquoi 1pt vaut 1,333px et pas 1px ?

CSS définit 1pt comme exactement 1/72 de pouce et 1in comme 96px, donc 1pt = 96/72 = 1,333px. C'est la conversion utilisée par chaque navigateur. Les tailles en pt apparaissent plus grandes à l'écran que ce que suggère le chiffre, à cause de ce facteur 4/3.

Quelle différence entre em et rem ?

rem se réfère toujours à la taille de police de la racine (l'élément ). em se réfère à celle du parent le plus proche. Donc 2em dans un parent à 20px font 40px, mais 2rem font 2 × racine peu importe le parent imbriqué.

Comment la taille de base affecte-t-elle les conversions ?

Elle change la valeur en px de 1rem et 1em. Le 16px par défaut correspond à la plupart des navigateurs, donc 1rem = 16px. Si ta racine est 18px, 1rem = 18px et un heading 1.25rem devient 22,5px au lieu de 20px. La conversion pt ne change pas, pt est absolu.

Faut-il utiliser px, rem ou em dans la feuille de style ?

rem pour les tailles de police (l'utilisateur peut ajuster via zoom navigateur ou accessibilité), px pour les bordures et petits espacements où l'exactitude compte, et em pour les espacements relatifs à la taille de l'élément courant (par ex. padding d'un bouton).

Pourquoi le pourcentage n'est-il pas 100 % quand px égale la base ?

Il l'est, essaie. Si px est égal à ta base (par ex. 16 avec base 16) le champ % affiche 100. Si tu vois un autre chiffre, le px n'est pas exactement égal à la base, peut-être à cause d'un arrondi dans un autre champ, ou parce que tu as changé la base après avoir saisi le px.

Convertisseur d'unités typographiques

Convertissez entre px, em, rem, pt, %, vw et vh

Aperçu en direct

16px

Le vif renard brun

Convertir

Tailles rapides

Taille de police de base (px)

Largeur du viewport (px)

Hauteur du viewport (px)

Pixels (px)

Rem

Points (pt)

Pourcentage (%)

Largeur du viewport (vw)

Hauteur du viewport (vh)

Résultat

1em = 1rem = 16px1pt = 1.333333px100% = 16px1px = 0.75pt100vw = 1920px100vh = 1080px

Classe Tailwind CSS

text-basecorrespondance exacte à cette taille

Extrait CSS

font-size: 1rem; /* 16px · 12pt · 100% */

Échelle typographique

Composez un ensemble harmonieux de tailles de titre à partir d'un ratio et de votre taille de base.

Ratio d'échelle

Niveau	px	rem	pt
H1	48.828125	3.051758	36.621094
H2	39.0625	2.441406	29.296875
H3	31.25	1.953125	23.4375
H4	25	1.5625	18.75
H5	20	1.25	15
Body	16	1	12
Small	12.8	0.8	9.6

Variables CSS

:root {
  --font-h1: 3.051758rem; /* 48.828125px */
  --font-h2: 2.441406rem; /* 39.0625px */
  --font-h3: 1.953125rem; /* 31.25px */
  --font-h4: 1.5625rem; /* 25px */
  --font-h5: 1.25rem; /* 20px */
  --font-body: 1rem; /* 16px */
  --font-small: 0.8rem; /* 12.8px */
}

Typo fluide (CSS clamp)

Générez une taille de police adaptative qui évolue en douceur entre deux largeurs d'écran.

Taille min. (px)

Taille max. (px)

Écran min. (px)

Écran max. (px)

Résultat

font-size: clamp(1rem, 0.8333vw + 0.8333rem, 1.5rem);

Qu'est-ce que Convertisseur d'unités typographiques ?

Le convertisseur d'unités typographiques convertit entre pixels (px), em, rem, points (pt), pourcentages (%) et unités de viewport (vw, vh). Définissez une taille de police de base et une taille de viewport, puis saisissez une valeur dans n'importe quel champ pour voir toutes les autres unités se mettre à jour instantanément.

Les conversions suivent le standard CSS : 1pt = 96/72 px, em et rem multiplient par la taille de police de base, le pourcentage prend la base comme 100 %, et vw et vh sont des fractions de la largeur et de la hauteur du viewport. Modifie n'importe quel champ et les six autres se recalculent en direct. La taille de base par défaut est 16px (la racine courante), mais tu peux la passer à 14, 18, ou toute racine qu'utilise ton design system, et le viewport par défaut est 1920×1080 pour que vw et vh restent exacts.

Comment utiliser

Étape 1 — Définissez la taille de police de base en pixels (16px par défaut), qui détermine comment les unités relatives comme em, rem et % sont calculées.
Étape 2 — Saisissez une valeur numérique dans l'un des sept champs d'unité (px, em, rem, pt, %, vw ou vh) pour voir toutes les autres unités se mettre à jour instantanément.
Étape 3 — Copiez n'importe quelle valeur convertie pour l'utiliser dans votre CSS, vos spécifications de design ou vos mises en page imprimées.

Quand l'utiliser

Traduire les spécifications en pt d'un graphiste print en valeurs pixels CSS qu'une feuille de style applique réellement.
Auditer un design system pour vérifier qu'un heading de 1.25rem fait bien 20px avec la racine choisie.
Choisir la bonne valeur em ou % dans un parent qui modifie déjà la taille de police héritée.

Résultat

Un designer vous remet des spécifications en points (texte de corps 14pt). Saisissez 14 dans le champ pt avec une base de 16px pour voir instantanément que cela équivaut à 18,67px, 1,167em, 1,167rem et 116,7% — prêt à utiliser dans votre feuille de styles.

FAQ

Pourquoi 1pt vaut 1,333px et pas 1px ?: CSS définit 1pt comme exactement 1/72 de pouce et 1in comme 96px, donc 1pt = 96/72 = 1,333px. C'est la conversion utilisée par chaque navigateur. Les tailles en pt apparaissent plus grandes à l'écran que ce que suggère le chiffre, à cause de ce facteur 4/3.
Quelle différence entre em et rem ?: rem se réfère toujours à la taille de police de la racine (l'élément <html>). em se réfère à celle du parent le plus proche. Donc 2em dans un parent à 20px font 40px, mais 2rem font 2 × racine peu importe le parent imbriqué.
Comment la taille de base affecte-t-elle les conversions ?: Elle change la valeur en px de 1rem et 1em. Le 16px par défaut correspond à la plupart des navigateurs, donc 1rem = 16px. Si ta racine est 18px, 1rem = 18px et un heading 1.25rem devient 22,5px au lieu de 20px. La conversion pt ne change pas, pt est absolu.
Faut-il utiliser px, rem ou em dans la feuille de style ?: rem pour les tailles de police (l'utilisateur peut ajuster via zoom navigateur ou accessibilité), px pour les bordures et petits espacements où l'exactitude compte, et em pour les espacements relatifs à la taille de l'élément courant (par ex. padding d'un bouton).
Pourquoi le pourcentage n'est-il pas 100 % quand px égale la base ?: Il l'est, essaie. Si px est égal à ta base (par ex. 16 avec base 16) le champ % affiche 100. Si tu vois un autre chiffre, le px n'est pas exactement égal à la base, peut-être à cause d'un arrondi dans un autre champ, ou parce que tu as changé la base après avoir saisi le px.

Convertisseur d'unités typographiques

Aperçu en direct

Convertir

Classe Tailwind CSS

Extrait CSS

Échelle typographique

Typo fluide (CSS clamp)

Qu'est-ce que Convertisseur d'unités typographiques ?

Comment utiliser

Quand l'utiliser

Résultat

FAQ

Outils similaires

Convertisseur d'unités de temps

Convertisseur d'horodatage

Convertisseur de couple

Convertisseur d'angles

Convertisseur de surface

Convertisseur de Tailles de Vêtements

Convertisseur d'unités typographiques

Aperçu en direct

Convertir

Classe Tailwind CSS

Extrait CSS

Échelle typographique

Typo fluide (CSS clamp)