Convertisseur de longueur et de distance Convertisseur de masse Convertisseur de mesures de volume de produits en vrac et de produits alimentaires Convertisseur de surface Convertisseur de volume et d'unités de mesure dans les recettes culinaires Convertisseur de température Convertisseur de pression, contrainte mécanique, module d'Young Convertisseur d'énergie et de travail Convertisseur de puissance Convertisseur de force Convertisseur de temps Convertisseur de vitesse linéaire Convertisseur d'angle plat Efficacité thermique et efficacité énergétique Convertisseur de nombres dans divers systèmes numériques Convertisseur d'unités de mesure de quantité d'informations Taux de change Vêtements et pointures pour femmes Tailles de vêtements et chaussures pour hommes Convertisseur de vitesse angulaire et de fréquence de rotation Convertisseur d'accélération Convertisseur d'accélération angulaire Convertisseur de densité Convertisseur de volume spécifique Convertisseur de moment d'inertie Convertisseur de moment de force Convertisseur de couple Convertisseur de chaleur spécifique de combustion (en masse) Convertisseur de densité d'énergie et de chaleur spécifique de combustion (en volume) Convertisseur de différence de température Convertisseur de coefficient de dilatation thermique Convertisseur de résistance thermique Convertisseur de conductivité thermique Convertisseur de capacité thermique spécifique Convertisseur d'exposition énergétique et de puissance de rayonnement thermique Convertisseur de densité de flux thermique Convertisseur de coefficient de transfert de chaleur Convertisseur de débit volumique Convertisseur de débit massique Convertisseur de débit molaire Convertisseur de densité de débit massique Convertisseur de concentration molaire Convertisseur de concentration massique en solution Dynamique (absolu) Convertisseur de viscosité Convertisseur de viscosité cinématique Convertisseur de tension superficielle Convertisseur de perméabilité à la vapeur Convertisseur de densité de flux de vapeur d'eau Convertisseur de niveau sonore Convertisseur de sensibilité du microphone Convertisseur de niveau de pression acoustique (SPL) Convertisseur de niveau de pression acoustique avec pression de référence sélectionnable Convertisseur de luminance Convertisseur d'intensité lumineuse Convertisseur d'éclairement Convertisseur de résolution informatique Convertisseur de fréquence et Convertisseur de longueur d'onde Puissance dioptrique et distance focale Puissance dioptrique et grossissement de l'objectif (×) Convertisseur de charge électrique Convertisseur de densité de charge linéaire Convertisseur de densité de charge de surface Convertisseur de densité de charge volumique Convertisseur de courant électrique Convertisseur de densité de courant linéaire Convertisseur de densité de courant de surface Convertisseur d'intensité de champ électrique Convertisseur de potentiel et de tension électrostatique Convertisseur de résistance électrique Convertisseur de résistivité électrique Convertisseur de conductivité électrique Convertisseur de conductivité électrique Capacité électrique Convertisseur d'inductance Convertisseur de jauge de fil américain Niveaux en dBm (dBm ou dBm), dBV (dBV), watts, etc. unités Convertisseur de force magnétomotrice Convertisseur de tension champ magnétique Convertisseur de flux magnétique Convertisseur d'induction magnétique Rayonnement. Convertisseur de débit de dose absorbée par rayonnement ionisant Radioactivité. Convertisseur de désintégration radioactive Rayonnement. Convertisseur de dose d'exposition Rayonnement. Convertisseur de dose absorbée Convertisseur de préfixe décimal Transfert de données Convertisseur d'unités de typographie et de traitement d'images Convertisseur d'unités de volume de bois Calcul de la masse molaire Tableau périodique des éléments chimiques de D. I. Mendeleïev

1 pixel (X) = 0,752812499999996 points (typographique)

Valeur initiale

Valeur convertie

twip mètre centimètre millimètre symbole (X) symbole (Y) pixel (X) pixel (Y) pouces soudure (ordinateur) soudure (typographique) point NIS/PostScript point (ordinateur) point (typographique) em tiret cicero em tiret point Dido

Calibre de fil américain

En savoir plus sur les unités utilisées en typographie et en imagerie numérique

informations générales

La typographie est l'étude de la reproduction du texte sur une page et de l'utilisation de la taille, de la police de caractères, de la couleur et d'autres caractéristiques visuelles pour rendre le texte plus facile à lire et plus beau. La typographie est apparue au milieu du XVe siècle avec l’avènement des presses à imprimer. L'emplacement du texte sur une page affecte notre perception : mieux il est placé, plus il est probable que le lecteur comprenne et se souvienne de ce qui est écrit dans le texte. Au contraire, une typographie de mauvaise qualité rend le texte difficile à lire.

Les polices de caractères sont divisées en différents types, tels que les polices avec et sans empattement. Les empattements sont un élément décoratif d'une police, mais dans certains cas, ils facilitent la lecture du texte, même si parfois c'est le contraire qui se produit. La première lettre (bleue) de l’image est en police Bodoni serif. L'un des quatre empattements est entouré de rouge. La deuxième lettre (jaune) est en police Futura sans empattement.

Il existe de nombreuses classifications de polices, par exemple en fonction de l'époque de leur création ou du style populaire à une certaine époque. Oui, il existe des polices style ancien- un groupe qui comprend les polices les plus anciennes ; polices plus récentes style de transition; polices modernes, créées après les polices de transition et avant les années 1820 ; et enfin nouvelles polices de style ou polices anciennes modernisées, c'est-à-dire des polices créées ultérieurement selon l'ancien modèle. Cette classification est principalement utilisée pour les polices serif. Il existe d'autres classifications basées sur apparence polices, comme l'épaisseur des lignes, le contraste entre les lignes fines et épaisses et la forme des empattements. La presse nationale a ses propres classifications. Par exemple, la classification selon GOST regroupe les polices selon la présence et l'absence d'empattements, l'épaississement des empattements, la transition en douceur de la ligne principale à l'empattement, l'arrondi de l'empattement, etc. Dans les classifications du russe, ainsi que d'autres polices cyrilliques, il existe souvent une catégorie pour les polices slaves de la vieille église.

La tâche principale de la typographie est d'ajuster la taille des lettres et de choisir les polices appropriées pour placer le texte sur la page afin qu'il soit facile à lire et beau. Il existe un certain nombre de systèmes permettant de déterminer la taille de la police. Dans certains cas, la même taille des lettres en unités typographiques, si elles sont imprimées dans des polices différentes, ne signifie pas la même taille des lettres elles-mêmes en centimètres ou en pouces. Cette situation est décrite plus en détail ci-dessous. Malgré les inconvénients que cela entraîne, la taille de police actuelle aide les concepteurs à organiser le texte de manière nette et esthétique sur la page. Ceci est particulièrement important dans la mise en page.

Lors de la mise en page, vous devez connaître non seulement la taille du texte, mais également la hauteur et la largeur des images numériques afin de les adapter à la page. La taille peut être exprimée en centimètres ou en pouces, mais il existe également une unité spécialement conçue pour mesurer la taille des images : les pixels. Un pixel est un élément d'une image sous la forme d'un point (ou d'un carré) qui le compose.

Définition des unités

La taille des lettres en typographie est indiquée par le mot « taille ». Il existe plusieurs systèmes pour mesurer la taille d'un point, mais la plupart sont basés sur l'unité "soudure" dans les systèmes de mesure américain et anglais (pica anglais), ou « cicero » dans le système de mesure européen. Le nom « soudure » est parfois écrit « pointe ». Il existe plusieurs types de soudure, dont la taille diffère légèrement. Par conséquent, lorsque vous utilisez la soudure, il convient de se rappeler de quelle soudure vous parlez. Initialement, le cicéron était utilisé dans l'imprimerie domestique, mais la soudure est désormais également courante. Cicéron et la soudure informatique sont de taille similaire, mais pas égale. Parfois, le cicéron ou la soudure sont directement utilisés pour la mesure, par exemple pour déterminer la taille des marges ou des colonnes. Le plus souvent, notamment pour la mesure de texte, des unités dérivées de soudures telles que des points d'impression sont utilisées. La taille de la soudure est déterminée différemment selon les systèmes, comme décrit ci-dessous.

Les lettres sont mesurées comme indiqué dans l'illustration :

Autres unités

Bien que la soudure informatique remplace progressivement d'autres unités, et peut-être les cicéros plus familiers, d'autres unités sont également utilisées en parallèle. L'une de ces unités est soudure américaine Cela équivaut à 0,166 pouces ou 2,9 millimètres. Il y a aussi impression soudure. C’est l’équivalent du système américain.

Certaines imprimeries nationales et dans la littérature sur l'imprimerie utilisent encore pica- une unité largement utilisée en Europe (à l'exception de l'Angleterre) avant l'avènement de la soudure informatique. Un cicéron équivaut à 1/6 de pouce français. Le pouce français est légèrement différent du pouce moderne. Dans les unités modernes, un cicéron équivaut à 4,512 millimètres ou 0,177 pouces. Cette valeur est presque égale à celle de la soudure informatique. Un cicéron équivaut à 1,06 soudure informatique.

Encastrement rond (em) et encastrement semi-circulaire (en)

Les unités décrites ci-dessus déterminent la hauteur des lettres, mais il existe également des unités qui indiquent la largeur des lettres et des symboles. Les espacements ronds et semi-circulaires sont de telles unités. Le premier est également connu sous le nom de em, ou em, du mot anglais désignant la lettre M. Sa largeur a toujours été égale à celle de la lettre anglaise. De même, un empat semi-circulaire égal à un demi-rond est appelé en. Actuellement, ces valeurs ne sont pas déterminées à l'aide de la lettre M, puisque cette lettre peut avoir des tailles différentes dans différentes polices, même si la taille est la même.

En russe, le tiret en et le tiret em sont utilisés. Pour indiquer des plages et des intervalles (par exemple, dans la phrase : « prendre 3-4 cuillères à soupe de sucre »), un tiret en est utilisé, également appelé tiret en. Le tiret em est utilisé en russe dans tous les autres cas (par exemple, dans la phrase : « l'été était court et l'hiver était long »). On l'appelle aussi em dash.

Problèmes avec les systèmes d'unités modernes

De nombreux designers n'aiment pas le système actuel d'unités typographiques basées sur des rations ou des cicéros et des points typographiques. Le principal problème est que ces unités ne sont pas liées au système de mesure métrique ou impérial et doivent en même temps être utilisées en conjonction avec les centimètres ou les pouces, dans lesquels la taille des illustrations est mesurée.

De plus, les lettres rédigées dans deux polices différentes peuvent être de taille très différente, même si elles ont la même taille aux points typographiques. En effet, la hauteur des lettres est mesurée comme la hauteur du pavé de saisie, ce qui n'est pas directement lié à la hauteur du caractère. Cela complique la tâche des concepteurs, surtout s'ils travaillent avec plusieurs polices dans le même document. L'illustration montre un exemple de ce problème. La taille des trois polices en points typographiques est la même, mais la hauteur du signe est différente partout. Pour résoudre ce problème, certains concepteurs proposent de mesurer le point comme la hauteur du personnage.

Vous pouvez spécifier la longueur en CSS dans différentes unités. Certains d'entre eux sont issus de la tradition typographique, comme le point (pt) et le pica (pc), d'autres, par exemple. le centimètre (cm) et le pouce (pouce) nous sont familiers dans l'usage quotidien. Il existe également une unité « magique » inventée spécifiquement pour CSS : px. Cela signifie-t-il que différentes propriétés nécessitent des unités différentes ?

Non, les unités de mesure ne sont pas liées à des propriétés, mais sont directement liées au support d'affichage : écran ou papier.

Toutes les unités de mesure peuvent être utilisées n’importe où. Une propriété avec une valeur en pixels (marge : 5px) accepte également des valeurs en pouces ou en centimètres (marge : 1,2in ; marge : 0,5 cm), et vice versa.

Mais en général, il est préférable d’utiliser des jeux d’unités différents pour l’affichage à l’écran et pour l’impression. Les conseils d'utilisation des unités sont résumés dans le tableau suivant :

La relation entre les unités absolues est la suivante : 1 pouce = 2,54 cm = 25,4 mm = 72 pts = 6 pièces

Si vous disposez d'une règle à portée de main, vous pouvez vérifier la précision de votre appareil. Voici un rectangle de 1 pouce (2,54 cm) de haut :
72pts
↓

Les unités dites absolues (cm, mm, in, pt et pc) en CSS signifient la même chose que partout ailleurs, mais seulement si le périphérique de sortie a une résolution suffisamment élevée. Sur une imprimante laser, 1 cm doit être exactement égal à 1 centimètre. Mais sur les appareils basse résolution comme les écrans d'ordinateur, CSS ne l'exige pas. En effet, différents appareils et différentes implémentations CSS ont tendance à les rendre différemment. Il est préférable de laisser ces unités pour des appareils haute résolution, notamment pour l'impression. Sur les écrans d'ordinateur et appareils mobiles ah, ça ne se passera peut-être pas comme prévu.

Dans le passé, CSS exigeait que les unités absolues soient affichées correctement, même sur les écrans d'ordinateur. Mais comme il y avait plus d’implémentations incorrectes que d’implémentations correctes et qu’aucune amélioration n’était attendue, CSS a abandonné cette exigence en 2011. Actuellement, les unités absolues ne doivent fonctionner correctement que lorsqu'elles sont imprimées et sur des appareils haute résolution.

CSS ne précise pas ce que l'on entend exactement par "haute résolution". Mais comme les imprimantes bon marché ont aujourd'hui au moins 300 dpi, et bons écrans environ 200 dpi, la limite se situe probablement quelque part entre ces valeurs.

Une autre raison de ne pas utiliser les unités absolues ailleurs que sur papier : nous regardons différents écrans à différentes distances. 1 centimètre semble petit sur un écran d’ordinateur de bureau. Mais sur un écran de mobile, sous vos yeux, cela fait beaucoup. Il est préférable d'utiliser plutôt des unités relatives, par ex. em.

Les unités em et ex dépendent de la taille de la police et peuvent être différentes pour chaque élément du document. L'unité em est simplement la taille de la police. Dans un élément auquel est attribuée une police de 2 pouces, 1em signifie ces 2 pouces. Spécifier des dimensions (par exemple pour le remplissage) en em signifie qu'elles sont données par rapport à la police, et que la police de l'utilisateur soit grande (par exemple sur un grand écran) ou petite (par exemple sur un appareil mobile), ces dimensions resteront proportionnelles. Les déclarations telles que text-indent: 1.5em et margin: 1em en CSS sont extrêmement populaires.

L’unité ex est rarement utilisée. Il exprime les dimensions qui doivent être mesurées à partir de la hauteur x de la police. La hauteur X est, en gros, la hauteur des lettres minuscules comme un, c, m, ou o. Les polices de même taille (et, par conséquent, le même em) peuvent avoir une énorme différence dans la taille des lettres minuscules, et s'il est important qu'une image, par exemple, corresponde à la hauteur x, l'unité ex est à votre disposition. service.

L'unité px en CSS est magique. Cela n’est pas lié à la police actuelle, mais il n’est généralement pas non plus lié aux centimètres ou aux pouces physiques. Une unité px est définie comme quelque chose de petit mais visible, c'est-à-dire une ligne horizontale de 1 px d'épaisseur peut être rendue avec des arêtes vives (sans anticrénelage). Ce qui est considéré comme clair, petit et visible dépend de l'appareil et de la façon dont vous l'utilisez : si vous le tenez directement devant vos yeux, comment téléphone mobile, à bout de bras, comme un moniteur, ou quelque part entre les deux, comme livre électronique? Par conséquent, px, par définition, n'est pas une longueur fixe, mais quelque chose qui dépend du type d'appareil et de son utilisation normale.

Pour comprendre pourquoi l'unité px est telle qu'elle est, imaginez un moniteur CRT des années 1990 : le plus petit point qu'il pouvait afficher mesurait environ 1/100 de pouce (0,25 mm) ou légèrement plus grand. L'unité px tire son nom de ces pixels d'écran.

Les appareils actuels peuvent, en principe, afficher des points plus petits et clairs (bien qu'ils puissent être difficiles à voir sans loupe). Mais les documents du siècle dernier qui utilisaient px en CSS se ressemblent quel que soit l'appareil. Les imprimantes en particulier peuvent afficher clairement des lignes beaucoup plus fines que 1 px, mais même sur les imprimantes, une ligne de 1 px a presque la même apparence que sur un moniteur. Les appareils changent, mais l'unité px est toujours la même.

En fait, CSS exige que 1px soit exactement égal à 1/96 de pouce dans toute sortie d'impression. CSS suppose que les imprimantes, contrairement aux écrans, n'ont pas besoin de tailles de px différentes pour afficher des lignes nettes. Par conséquent, une fois imprimé, px non seulement a la même apparence quel que soit l'appareil, mais est également mesuré par la même valeur (tout comme les unités cm, pt, mm, in et pc, comme expliqué).

CSS spécifie également que les images bitmap (par exemple les photographies) sont rendues par défaut à une échelle de 1 pixel d'image par 1 px. Une photo avec une résolution de 600 x 400 aura une largeur de 600 px et une hauteur de 400 px. Ainsi, les pixels de la photo ne sont pas liés aux pixels du périphérique de sortie (qui peuvent être très petits), mais aux unités px. Cela vous permet d'aligner avec précision les images avec d'autres éléments du document, à condition d'utiliser des unités px dans vos styles plutôt que pt , cm , etc.

L'un des aspects les plus déroutants CSS est la demande taille de police attribut pour la mise à l'échelle du texte. À l'aide de CSS, vous pouvez redimensionner le texte dans le navigateur en utilisant quatre unités de mesure différentes. Laquelle de ces quatre unités est la meilleure pour le Web ? C’est une question qui a donné lieu à diverses discussions et critiques. Il est difficile de trouver une réponse définitive car la question elle-même est complexe.

Rencontrez les unités

1. « Ems » (em) : « em » est une unité évolutive utilisée dans les documents Web. "em" est égal à la taille de police actuelle. Par exemple, si la taille de police dans le document est de 12 pt, 1em est égal à 12 pt. "em" est évolutif par nature, donc 2em sera égal à 24pt, 0,5em sera égal à 6pt, etc. L'utilisation de « em » devient de plus en plus populaire dans les documents Web en raison de son évolutivité et de sa capacité à être utile sur les appareils mobiles.
2. Pixels (px) : « px » sont des unités de taille fixe utilisées sur les écrans (par exemple pour lire sur un écran d'ordinateur). Un pixel équivaut à un point sur l'écran de votre ordinateur (le plus petit élément de la résolution de votre écran). De nombreux concepteurs Web utilisent px dans les documents Web pour obtenir une représentation parfaite au pixel près de leur site lorsqu'il est affiché dans un navigateur. L'un des problèmes liés à l'utilisation de px est que ces unités ne permettent pas une mise à l'échelle pour les lecteurs ou les appareils mobiles malvoyants.
3. Points (pt) : « pt », traditionnellement utilisé dans les médias imprimés (tout ce qui doit être imprimé sur papier, etc.). Un « pt » équivaut à 1/72 de pouce. "pt", comme "px", a une taille d'unité fixe et ne peut pas être mis à l'échelle.
4. Pourcentages (%) : Les unités de pourcentage sont similaires à "em", à l'exception de quelques différences clés. Premièrement, la taille de police actuelle est de 100 % (c'est-à-dire 12 pt = 100 %). En utilisant "%", votre texte devient entièrement évolutif pour les appareils mobiles et convivial (accessibilité).

Alors quelle est la différence ?

Il sera facile de comprendre la différence entre les unités de taille de police une fois que vous les aurez vues en action. Généralement, 1em = 12pt = 16px = 100 %. En utilisant ces tailles de police, regardons ce qui se passe lorsque vous augmentez la taille de police de base (à l'aide du sélecteur de corps CSS) de 100 % à 120 %.

Modification de la taille de la police de 100 % à 120 %.

Comme vous pouvez le voir, "em" et "%" ont augmenté la taille de la police, contrairement à "px" et "pt". Définir une taille absolue pour votre texte peut être simple, mais il est bien préférable pour vos visiteurs d'utiliser un texte évolutif qui peut être affiché sur n'importe quel appareil ou machine. Pour cette raison, il est préférable d'utiliser les unités « em » et « % » pour le texte d'un document Web.

"em" contre "%"

Nous avons découvert que les unités « px » et « pt » ne sont pas les meilleures pour les documents Web, ce qui nous oblige à utiliser « em » et « % ». En théorie, les unités « em » et « % » sont identiques, mais en pratique elles présentent des différences mineures qu'il est important de prendre en compte.

Dans l'exemple ci-dessus, nous avons utilisé des pourcentages (dans la balise body) comme unité de base de taille de police. Si vous modifiez votre unité de taille de police de base de "%" à ​​"em" (c'est-à-dire body (font-size: 1em;)), vous, devrait je ne remarque pas la différence. Voyons ce qui se passe lorsque "1em" est notre unité de base et lorsque le client modifie la "Taille de police" dans les paramètres de son navigateur (de nombreux navigateurs, tels qu'Internet Explorer, disposent de cette option).

La taille de la police lorsque le client modifie la taille du texte dans le navigateur.

Lorsque la taille du texte est définie sur « moyenne » dans le navigateur client, il n'y a aucune différence notable entre « em » et « % ». Cependant, si le paramètre est modifié, la différence devient très importante. Lorsqu'il est réglé sur « Le plus petit », « em » est beaucoup plus petit que « % », et lorsqu'il est réglé sur « Le plus grand », au contraire, « em » est affiché beaucoup plus grand que « % ». Et tandis que beaucoup affirment que les unités en « em » évoluent comme prévu, dans la pratique, le texte en « em » évolue de manière trop spectaculaire, ce qui rend le plus petit texte illisible sur certaines machines.

Verdict

En théorie, les unités « em » constituent la nouvelle norme de taille de police sur le Web, mais en pratique, les unités « % » permettent au texte d'être affiché de manière plus cohérente et plus pratique pour les utilisateurs. Lors de la modification des paramètres du client, le texte en « % » changeait dans des proportions raisonnables, ce qui permet aux concepteurs de maintenir la lisibilité, l'accessibilité et le design.

Gagnant: pourcentage (%).

L’utilisation de l’attribut font-size pour redimensionner le texte est l’un des aspects les plus difficiles du style en CSS. CSS propose quatre unités pour mesurer la taille du texte affiché dans un navigateur Web. Laquelle de ces quatre unités est la plus adaptée aux documents Web ? Cette question a suscité de nombreuses discussions et controverses. Il est difficile de donner une réponse définitive à une telle question.

Connaître les unités

Euh ( em) : em est une unité évolutive utilisée pour les documents Web. Un em équivaut à la taille de police actuelle. Par exemple, si la taille de police du document est de 12 points, alors 1em équivaut à 12 points. Puisque em est mis à l'échelle, 2em équivaut à 24pt, 0,5em équivaut à 6pt, etc. En raison de son évolutivité et de sa haute compatibilité avec les appareils mobiles, em est de plus en plus utilisé dans les documents Web.

Pixels ( px) : Les pixels sont des unités de taille fixe utilisées pour tout ce qui est lu sur un écran d'ordinateur. Un pixel équivaut à un point sur un écran d'ordinateur (il s'agit de la plus petite division de la résolution de votre écran). De nombreux concepteurs de sites Web utilisent des pixels dans les documents Web pour garantir que le site Web apparaît au pixel près lorsqu'il est affiché dans un navigateur. Le seul problème est que les pixels ne peuvent pas être agrandis pour s'adapter aux lecteurs malvoyants ou réduits pour faciliter la lecture sur les appareils mobiles.

Points ( pt) : Les points sont traditionnellement utilisés dans les médias imprimés (c'est-à-dire pour tout ce qui est imprimé sur papier). Un point équivaut à 1/72 de pouce. Les points sont très similaires aux pixels dans le sens où ils ont une taille fixe et ne peuvent pas être agrandis/rétrécis.

1. Pourcentage ( % ) : Percent est très similaire à em , à l’exception de quelques différences clés. Premièrement, la taille de police actuelle est de 100 % (c'est-à-dire 12 pt = 100 %). L'utilisation de l'unité Pourcentage vous permet d'agrandir/réduire votre texte pour une lecture plus facile.

Quelle est la différence?

La différence entre ces unités est facile à comprendre avec des exemples spécifiques. Voici comment ils se rapportent les uns aux autres : 1em = 12pt = 16px = 100 %. Voyons ce qui se passe lorsque nous augmentons la taille de la police principale (à l'aide du sélecteur CSS body) de 100 % à 120 %.

Comme vous pouvez le constater, les Ems et le pourcentage augmentent à mesure que la taille de la police de base augmente, mais pas les pixels et les points. Il est facile d'utiliser une taille absolue pour votre texte, mais il est beaucoup plus facile d'utiliser un texte évolutif qui s'affiche sur n'importe quel appareil. Par conséquent, il est préférable d’utiliser les unités Em et Pourcentage pour le texte d’un document Web.

EM ou pourcentage ?

Nous avons constaté que Point et Pixel ne sont pas les meilleures unités pour les documents Web. Il nous reste donc Em et Percent. Théoriquement, Em et Percent sont les mêmes unités, mais en pratique, il existe entre elles des différences mineures qui ne peuvent être ignorées.

Dans l'exemple ci-dessus, nous avons utilisé l'unité Pourcentage comme taille de police de base (pour la balise body). Si vous modifiez la taille de police de base de Pourcentage à Em (c'est-à-dire body ( font-size: 1em; ) ), vous ne remarquerez probablement pas de différence. Voyons ce qui se passe lorsque la taille de la police du corps est de 1em et lorsque le client modifie le paramètre « Taille du texte » du navigateur (ce paramètre est disponible dans certains navigateurs, tels qu'Internet Explorer).

Lorsque la taille du texte dans le navigateur client est définie sur « moyenne », il n'y a aucune différence entre Em et Percent. Mais si vous modifiez ce paramètre, la différence deviendra assez visible. Avec le paramètre Le plus petit, les Ems sont beaucoup plus petits que les Pourcentages. Et avec le paramètre « Le plus grand », l'inverse est vrai : Em est beaucoup plus grand que le pourcentage. On pourrait dire que les unités Em sont mises à l'échelle comme elles devraient l'être, mais dans la pratique, ce texte est trop mis à l'échelle et sur certains appareils, le plus petit texte devient illisible.

Conclusion

En théorie, l'unité Em est la nouvelle norme pour les tailles de police dans les documents Web, mais en pratique, il s'avère que l'unité Pourcentage est plus conviviale. Lorsque les paramètres du client changent, le texte qui utilise l'unité de pourcentage est mis à l'échelle de manière appropriée, permettant aux concepteurs de maintenir la lisibilité, l'accessibilité et la conception visuelle.

Gagnant : pourcentage (%).

Généralement, lorsque je crée un nouveau design, j'utilise des pourcentages pour l'élément body (body ( font-size: 62,5%; ) ), puis j'utilise des ems pour évoluer davantage. Tant que les paramètres du corps sont définis sur Pourcentage, vous pouvez utiliser Pourcentage ou Em pour toutes les autres règles et sélecteurs CSS tout en bénéficiant des avantages de l'utilisation de Pourcentage comme taille de police principale.

Ces dernières années, cette pratique est devenue très courante dans la conception de sites Web.
Les pixels sont désormais utilisés comme unités valides de taille de police (les utilisateurs peuvent utiliser la fonction « zoom » du navigateur pour lire de petits textes). Cependant, l'utilisation des pixels devient problématique en raison des appareils mobiles dotés d'écrans à très haute densité de pixels (certains Appareils Android et iPhone ont une densité de 200 à 300 pixels par pouce, ce qui rend les polices de 11 et 12 pixels difficiles à lire). Je continue donc à utiliser le pourcentage comme taille de police principale pour les documents Web.