Taille de police CSS: valeurs relatives vs. absolues. Lequel utiliser?
- Quelle est la meilleure façon de dimensionner le texte sur les navigateurs?
- Quels sont les avantages et les inconvénients de définir la taille de la police en pixels/em?
Lequel utiliser?
Tous les deux. Relatif au corps du texte principal que les utilisateurs vont devoir lire beaucoup (donc ils voudront pouvoir le lire confortablement); Absolue pour le texte qui doit être dimensionné pour correspondre à d'autres éléments de la page qui sont dimensionnés en pixels, tels que les images.
Pour le relatif, "%" et "em" sont également bons.
Pour l'absolu, utilisez toujours ‘px’. N'utilisez jamais ‘pt’ pour une utilisation à l’écran, cela n’est judicieux que pour les feuilles de style d’impression. Il est dommage que ‘pt’ soit considéré comme l’unité par défaut pour la gestion des polices car sur le web, c’est le pire choix possible.
(ETA: Notez que depuis cette réponse, CSS3 a redéfini les 'unités physiques' afin que px et pt soient toujours proportionnelles. Donc ce problème n'a plus d'importance à moins que vous êtes préoccupé par les très anciens navigateurs.)
Certaines personnes n'aiment pas l'effet de "composition" des tailles de police relatives. L'astuce consiste vraiment à utiliser le moins de changements de taille de police possible pour éviter trop d'imbrication. Il devrait être possible d'obtenir le comportement relatif à la taille préférée de l'utilisateur sans le comportement de composition en utilisant les mots clés de taille de police 'small'/'medium'/'xx-large'/etc., mais malheureusement de cette façon, vous n'obtenez pas beaucoup de granularité, et il existe encore aujourd'hui des différences entre la façon dont les navigateurs les traitent.
Je garde la taille de police comme valeur par défaut choisie par l'utilisateur, puis j'utilise le dimensionnement relatif:
body {
font-size: 100%;
}
p {
font-size: 1em;
}
h1 {
font-size: 1.8em;
}
Cette méthode respecte le choix de la taille de police de l'utilisateur dans son navigateur, qui est généralement défini sur 16 pixels.
Personnellement, j'ai défini une taille de police absolue sur le body et à partir de là, j'ai tout défini par rapport à cela. par exemple:
body {
font-size: 10px; /* or pt if you want */
}
h1 {
font-size: 200%;
}
Essayez simplement d'éviter de combiner des tailles relatives composées:
body {
font-size: 10px;
}
p {
font-size: 80%; /* 8px, right? */
}
div {
font-size: 150%;
}
/* what size is a "div > p" ? */
Tous les navigateurs modernes ont un zoom pleine page ces jours-ci, ce qui signifie que même le dimensionnement de votre police en pixels est correct.
L'avantage de cette méthode est que vous pouvez facilement agrandir ou réduire tout votre texte en changeant une définition.
L'inconvénient est que si vous souhaitez modifier la taille de police par défaut, mais pas les en-têtes (par exemple), il y aura beaucoup de déclarations à modifier.
A List Apart a fait un rédaction approfondie sur le fonctionnement des tailles de police dans différents navigateurs. Cela s'avère plus compliqué que vous ne le pensez, comme tout le reste en CSS. Le consensus semble pencher vers l'utilisation d'ems, car cela donne à l'utilisateur plus de contrôle sur l'ajustement de la taille de la police dans le navigateur.
Je préfère les valeurs relatives car Internet Explorer (<7?) Ne peut pas mettre à l'échelle les valeurs absolues ou en pixels.
Une chose que j'ai vu que les gens utilisent est de définir une taille de police de base dans le corps CSS (par exemple, 12pt), puis toutes les autres tailles de police sont des pourcentages de cela (par exemple, 140% pour les titres, 80% pour les petits, etc.).
Si vous utilisez pt, vous aurez des différences d'affichage en fonction du DPI défini par l'utilisateur, mais il sera peut-être sous le contrôle de l'utilisateur.
Si vous utilisez px, vous aurez des problèmes sur les appareils à très haut DPI.
Em et pt sont bons pour CSS pour l'impression.
Il y a beaucoup de choses à faire et voyez ce qui se passe avec les polices et CSS.
Si vous utilisez des tailles absolues, les lecteurs malvoyants peuvent avoir du mal à lire. Si vous utilisez des tailles relatives, vous spécifiez simplement quel texte est plus grand/plus petit que les autres textes de votre page, tous par rapport à la taille de texte par défaut de l'utilisateur qui peut être grande (si altérée) ou minuscule (si un peu bizarre).
Un inconvénient du texte de taille relative est lorsque vous souhaitez que votre site Web soit de taille fixe, mais si possible, vous devriez vraiment choisir un design plus fluide afin que la page se redimensionne pour accueillir son contenu.
Les pixels sont de taille fixe. Cela signifie que lorsqu'il est affiché sur n'importe quel écran et résolution, le texte toujours sera de la même taille.
Les Em sont évolutifs, ce qui signifie que les personnes sur différentes tailles d'écran et résolutions peuvent généralement obtenir une meilleure expérience.
Certains navigateurs ont des problèmes pour modifier la taille des types de taille de police fixes (px et pt) et ont donc tendance à ne pas être très bons pour la police Web car certains utilisateurs peuvent avoir besoin d'augmenter la taille de votre police à l'aide d'une loupe d'écran ou simplement de la molette de la souris .
Les tailles de police relatives ont l'habitude d'irriter les concepteurs ignorants qui s'irritent que le site Web ne correspond pas exactement à leurs conceptions.
Dans mon esprit, apaiser les concepteurs qui devraient mieux connaître n'est pas une raison suffisante pour utiliser des polices fixes dans le développement Web.
L'utilisation de la mise à l'échelle EM est plus polyvalente avec les polices. Il est également plus accessible.
Si vous n'avez jamais travaillé avec cela auparavant, un outil comme Em Calculator peut être très utile pour comprendre le fonctionnement du tag/modèle.
L'utilisation de tailles relatives rendra votre page plus belle sur les appareils mobiles tels que l'iPhone, d'autant plus qu'ils rendent la page sur une fenêtre plus grande, puis la réduisent pour l'adapter à l'espace nécessaire.
Si vous pouvez supprimer la prise en charge d'IE8, je vous suggère d'utiliser les unités rem. Ce sont des unités relatives comme em, mais elles ne se répercutent pas sur les éléments enfants, ce qui les rend beaucoup plus simples à utiliser.
em sont complexes
p {
font-size: 2.5em;
span {
font-size: 1.5 em;
/* font size comes out to 3.75 root em*/
}
}
rem sont plus simples
p {
font-size: 2.5rem;
span {
font-size: 1.5 rem;
/* font size comes out to 1.5 root em*/
}
}
La plupart de mes connaissances en programmation sont des applications de bureau, mais j'ai lu pas mal de choses pour le développement Web récemment, et les livres que j'ai rencontrés suggèrent d'utiliser une spécification de taille de police de mot-clé (petite, moyenne, etc.), puis de la mettre à l'échelle ou en pourcentage ou en em.
Si votre taille de police est spécifiée en px, les utilisateurs des anciennes versions de IE ne pourront pas remplacer la taille du texte, c'est-à-dire qu'ils ne pourront pas l'agrandir ou plus petit pour convenir à leurs préférences.
Cependant, IE5 pose également un problème lorsque la taille de votre police est spécifiée par mot-clé: par rapport aux autres navigateurs, IE5 affiche le texte environ une étape de plus.