taille-de-police-web-rem

Fini la galère des tailles de police

Déterminer l’unité à utiliser pour vos polices (font) a toujours été un problème délicat, avec des avantages et inconvénients dans chaque cas.

Pour rappel, il existait jusqu’à maintenant deux principales unités dans le web :

  • l’unité absolue (pixel alias px)
  • l’unité relative (alias em)

Taille de police en px

Depuis le début du web, l’unité pixel est utilisée pour spécifier les tailles d’objets, et notamment les tailles de polices.

L’avantage de cette unité est que l’on sait exactement à quoi elle correspond.

L’inconvénient est qu’en l’utilisant, on perd une faculté importante, celle de pouvoir redimensionner le texte. Et il n’est pas possible de grossir la taille du texte avec cette unité, même sur des navigateurs récents.
Il existe toutefois une fonction zoom sur certains navigateurs (qui grossit tout, et pas seulement le texte), ce qui peut déjà  être un petit palliatif.

Taille de police en em

L’unité em parue il y a déjà plusieurs années parait donc être la solution absolue (enfin relative…).

Cette unité permet après définition de la taille de texte par défaut, de définir la taille du texte d’un bloc (une div par exemple) relativement à la taille du texte du bloc parent.

Par exemple:


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */

L’avantage de cette unité est sa notion d’unité relative, ce qui permet en changeant la taille du texte de base, de changer la taille de l’ensemble des textes du site.
Le navigateur peut ainsi en changeant sa taille de base, grossir l’ensemble des textes de la page, tout en gardant les différences entre les différents textes (le titre en plus gros, le copyright en plus petit, …).
L’inconvénient est que cette notion de relative est dépendante du bloc parent.
Dans l’exemple ci-dessus, si notre balise « a » est dans le body, elle aura une taille de 14 pixels, mais si notre « a » se trouve dans une balise « p », elle aura une taille de 20px (soit 14px * 1.4).
D’où un gros problème de design potentiel, obligeant à créer des styles pour les éléments enfants à 1em.

Par exemple :


body { font-size:62.5%; }
h1 { font-size: 2.4em; } /* =24px */
p { font-size: 1.4em; } /* =14px */
a { font-size: 1.4em; } /* =14px? */
p a { font-size: 1em; } /* =14px */

C’est pénible !
La solution arrive avec CSS3 et l’unité rem.

Taille de police en rem

Cette unité, qui veut dire « root em », au lieu d’être relative à son parent direct, est relative à la racine du HTML, c’est à dire à la balise html.
En reprenant nos styles, cela donnerait donc :


html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */
p { font-size: 1.4rem; } /* =14px */
a { font-size: 1.4rem; } /* =14px */

Noter qu’il n’y a plus de « ? » pour notre balise « a », car on est maintenant sûr de la taille de notre lien.
Elle est pas belle la vie ?
D’autant que le support de cette unité est plutôt correct : Safari 5, Chrome, Firefox 3.6+, et même Internet Explorer 9 !

Vous me direz, d’accord, mais pour les autres (IE6 à 8, Opéra, …) ?
Et bien, le mieux est de définir deux unités :

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px */
h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
p { font-size: 14px; font-size: 1.4rem; } /* =14px */
a { font-size: 14px; font-size: 1.4rem; } /* =14px */

Vous savez maintenant comment avoir une belle taille de police, homogène dans tous les navigateurs.

Source : Snook.ca

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>