Différence fondamentale entre em et px ?

Bonjour à vous tous,

Je réalise actuellement une interface d'une page de recherche de films, dans le cadre d'un nouveau devoir de développement PHP, et je me pose la question suivante : faut-il utiliser les unités CSS "em" ou les "px", quand on défini les titres, paragraphes ou autres dimensions de blocs ?

Je suis allé sur le site du W3C et je suis tombé sur des explications sur l'utilisation du "em" https://www.w3.org/Style/Examples/007/units.fr.html Selon ce site, il vaudrait mieux utiliser les unités "em" plutôt que "px" pour définir les tailles des polices parce que si l'utilisateur a une large police de caractères (sur un grand écran par exemple) ou au contraire une petite police (sur un smartphone), les tailles seront proportionnelles. Alors que l'unité de mesure "px" n'est pas définie comme une longueur constante mais comme quelque chose qui dépend du type de matériel et de son usage spécifique.

Je n'arrive pas à me décider. Selon vous, qui en savez plus, faut-il que j'utilise toujours "em" pour les polices ou bien l'utilisation de "px" partout c'est kif kif bourricot ?
Modifié par ObiJuanKenobi (25 Apr 2022 - 08:02)

Hello,

Le pixel est une unité qui est effectivement variable selon la densité de l'écran (on parle d'ailleurs aujourd'hui de "CSS pixels") et c'est surtout une unité qui pose des problèmes d'accessibilité aux malvoyants lorsqu'ils nécessitent un zoom texte car la taille reste figée.

L'unité "em" est proportionnelle à la taille de police du parent, ce qui - en général - n'est pas idéal non plus, car dépend de la structure HTML et de l'imbrication des éléments.

L'unité "rem" quant à elle regroupe les avantages de la fluidité (accessibilité) et de ne pas dépendre de la structure HTML. Elle est celle qui est actuellement conseillée pour les tailles de polices.

Un bon article récapitulatif à ce sujet : https://code-garage.fr/blog/css-px-em-ou-rem-pour-dimensionner-ses-textes/

Bonne journée

Merci Raphael, ton lien est précieux.
Je sais maintenant comment interpréter l'unité de mesure "em".

a écrit :

Cette unité est relative à la taille de la police de l'élément parent. Imaginons que la taille de texte du parent soit de 16px, alors 1em sera égal à 16px, 2em égal à 32px, etc...

Je vais donc utiliser l'unité de mesure "rem" uniquement pour gérer les tailles des caractères, pour les autres objets graphiques, j'utiliserai "px".

Par contre, ton article n'explique pas ce que signifie "em" ni "rem". Je pense que "rem" signifie "relative em". Tu saurais m'apporter des éclaircissements ?
Modifié par ObiJuanKenobi (25 Apr 2022 - 10:37)

Merci Raphael, ce nouveau lien est encore plus précis et j'ai compris mieux l'intérêt d'utiliser un valeur relative plutôt que fixe pour définir la taille des caractères.

Donc, "em" signifie "cadratin" en anglais et qui correspond à la hauteur d'une lettre de caractère. Donc 1 em correspond à l'affichage à 100 % de la hauteur par défaut de la lettre et si on demande 0.8 em on demande d'afficher que 80 % de cette hauteur par défaut.

Le "rem" correspond à la racine de la hauteur par défaut. Je ne comprends pas ce que cela signifie. Tu aurais un autre lien aussi instructif ?

Si je peux me permettre, derrière Raphael
https://grafikart.fr/tutoriels/font-size-rem-em-px-477
En complément, bien expliqué aussi (je mets très souvent des liens vers Alsacreations, je crois que ça ne posera pas de problèmes pour celui-ci).
Par contre, même avec les valeurs mises en rem, la taille de tes fontes sur ta page dépendra encore de ce qui est définit dans les paramètres du navigateur. C'est encore au-dessus. Généralement, personne n'y touche et c'est réglé sur 16 px, mais certains changent cette valeur. Ce qui fausse tout, mais seulement de leur point de vue, tu ne peux pas prévoir ça et faire ta page en conséquence. S'ils le font, c'est qu'ils ont une bonne raison.
Modifié par Bongota (25 Apr 2022 - 18:16)

Merci Bongota pour ce lien, il explique l'utilité de "rem".
J'ai beaucoup appris aujourd'hui au sujet des polices et de la taille des caractères. Je vais me coucher un peu plus intelligent, ce soir !

Après avoir commencé essentiellement avec les rem, je reviens depuis quelques années sur les em. La raison en est simple : je code mon HTML/CSS/JS à la manière dont on code les composants. Un bouton par exemple, un accordéon, des onglets...
Et donc, plutôt que de prévoir plusieurs tailles de boutons ou autres items, je n'en fais qu'un seul et j'applique au besoin un font-size sur l'élément le plus élevé dans la hiérarchie pour obtenir une taille différente à moindre frais.