Tutorial CSS : utiliser les unités relatives 'em'

1
(26/02/09) Categories : Accessibilité ; CSS ; Tutoriaux

Vous connaissez la propriété CSS 'font-size' permet de définir la taille d'un texte à afficher.

<p>Mon texte à styler</p>
p{
    font-size:valeur;
}

La plupart des webmasters utilisent l'unité absolue 'px'. Elle permet de définir le nombre de pixels que la hauteur d'un texte prendra. Simple à utiliser, elle a deux inconvénients majeurs :

  1. Un handicapé ou une personne ayant des difficultés visuelles ne pourra pas utiliser son navigateur pour agrandir (puis diminuer) à la volée la taille des textes d'un site web.
  2. Les valeurs en pixels ne tiennent pas compte de la taille de police par défaut fixée des navigateurs (modifiable par un utilisateur).

Il est donc indispensable d'utiliser les unités relatives. Parmi elles, la plus intéressante et facile à mettre en œuvre est l'unité 'em'.

Que signifie 'em' ?

L'unité 'em' est appelée cadratin en imprimerie. Il s'agit de la hauteur maximum que pourra prendre n'importe quel caractère d'une police, sans compter les accents, mais en prenant en compte le jambage (pour une lettre comme 'p' ou 'q').

Comment utilise-t-on les unités 'em' en CSS ?

Très simplement :

<p id="texte">Mon texte à styler.</p>
#texte {
    font-size:Xem; // Où X a pour valeur un nombre avec une quantité infinie de chiffres après la virgule (la virgule est le point).
}

Le principe d'héritage des 'em'

En fait, il ne suffit pas d'appliquer une taille relative à un texte pour connaître la taille avec laquelle il apparaîtra dans le navigateurs. En effet, le principe des unités 'em' est définit comme tel :

'la hauteur d'un texte dont l'élément a pour propriété 'font-size:Xem;' est égale à la hauteur du texte de l'élément parent, multipliée par X.'

En gros, si j'applique 'font-size:2em' à un élément, je sais que le texte de cet élément sera deux fois plus grand que le texte de son élément parent. Exemple :

<div>Texte de l'élément parent.
    <p>Mon élément à styler.</p>
</div>
div{
    font-size:15px;
}

p{
    font-size:1.2em;
}

Le texte directement dans la balise <div> vaut 15 pixels. Le texte dans la balise <p> vaut donc 15*1.2 soit 18 pixels.

Comment utiliser uniquement dans 'em' dans ma page ?

Ci-dessus, nous avons utilisé des unités relatives, mais en nous basant sur des unités en pixels. Comment donc n'utiliser que des 'em', tout en sachant comment apparaîtra mon texte au final?

Rappelez-vous, les unités relatives se basent sur la taille de la police par défaut du navigateur. Et par chance, tous les navigateurs modernes (enfin quelque chose sur laquelle ils s'accordent) uilisent une taille de 16 pixels.

Donc si vous appliquez 'font-size:1em;' à votre élément '<body>', la taille du texte directement à l'intérieur du '<body>' sera de 16 pixels. Malheureusement, 16 pixels est une taille de police souvent trop grande. Il est donc recommandé d'appliquer sur votre '<body>' une taille relative afin de diminuer ces 16 pixels. Deux écoles :

body{
    font-size:62.5%;
}

Cette méthode est utile si vous avez besoin de réfléchir en pixels. En effet, 62.5% de 16 est égale à... 10 ! Votre '<body>' aura donc un texte de hauteur 10 pixels, ce qui est petit, mais pratique pour la suite ! En effet, supposons que vous insériez dans votre '<body>' un élément donc la taille devra être de 12 pixels. Le calcul est simple, il faudra simplement lui appliquer une propriété 'font-size:1.2em;'.

body{
    font-size:Xem; // Où X vaut en général entre 0.7 et 0.8;
}

body{
font-size:Xem; // Où X vaut en général entre 0.7 et 0.8;
}

Avec cette méthode, plus de calcul en pixels, car ils seraient trop compliqués. La taille de votre '<body>' vaut entre 70% et 80% de 16 pixels, ce que l'on considère comme une taille d'écriture raisonnable. On fixe ensuite la taille des sous-éléments, en regardant simplement le rendu pour ajuster les tailles.

Mais rien ne vous empêche de faire un mix des deux versions ! Si vous souhaitez une police de 14 pixels sur l'ensemble de la page, fixez le 'font-size' du '<body>' à 0.875em ou 87.5%.

Attention aux cascades d'éléments !

<h2>Sous-titre de ma page</h2>
<div id="section">
    <h2>Sous-titre de ma section</h2>
</div>
body{
    font-size:62.5%;
}

h2{
    font-size:1.5em;
}

Avec 'font-size:62.5%;', le texte par défaut de ma page vaut 10 pixels. Puisque j'applique 'font-size:1.5em;' à tous les éléments <h2> de ma page, mes deux sous-titres valent 15 pixels. Maintenant, supposons que je trouve le sous-titre de ma section trop petit. Mon réflexe va être d'appliquer :

#section h2{
    font-size:1.2em;
}

Mais au lieu d'être plus grand, le texte est bien plus petit ! En effet, le texte de l'élément parent (la <div>) a une hauteur de 10 pixels. J'applique 'font-size:1.2em;', donc le texte 'Sous-titre de ma section' a une hauteur de 10*1.2 soit 12 pixels. Il aurait fallu en fait appliquer un 'font-size' supérieur à 1.5em.

Cet exemple est tout simple. Mais sur page complexe, il faut bien faire attention lorsque l'on a beaucoup d'éléments en cascade. D'où l'intérêt de fixer une taille par défaut adéquate dans l'élément '<body>', pour minimiser l'utilisation de 'font-size' dans votre CSS.

Retour en haut de la page

Commentaires

<< Précédent | 1 | Suivant >>

1 commentaires pour l'instant (Répondre)

#2 Posté par adawdawd le 10/03/12 à 11:09

Visitez le site pour Microsoft Store. Trouver un téléchargement complet de
Windows 7 Activation, et plus encore. Utilisez le panier rapide et

facile pour tous vos besoins d'achat Windows 7 Clé

#1 Posté par claude le 30/07/11 à 07:07

Bonjour
je comprend mieux le pb, merci
PROBLEME :
Sur des liens dont la font-size est variable, je souhaiterai augmenter la taille de la police au passage de la souris (a:hover) dans mon css (en plus d'un surlignage).
En utilisant 1.2em ou 120%, ça marche lorsque le lien est en petite font-size, mais si le lien est de grosse taille, le passage de la souris diminue cette taille.
Y a-t-il un moyen pour toujours grossir la taille (uniquement en css, pas de javascript ou autre bidouillage)

<< Précédent | 1 | Suivant >>
Retour en haut de la page

Ajouter un commentaire

 
Règles
  • Merci d'écrire des commentaires en relation avec le billet et en français correct
  • Ces balises HTML sont autorisées : <a><b><i><em><strong><abbr><acronym><blockquote><code>
  • Tout message avec spam, langage SMS sera supprimé.
Inscrivez ici le nom de la capitale de la France
 
Retour en haut de la page


  • Lien vers la page Contact
  • Lien vers le flux RSS du blog
  • Lien vers la page Liens
Partenaire Rammstein World Partenaire Emigrate France
Page valide XHTML 1.0 Page valide CSS Level 2.1 Flux RSS Valide

Ce site respecte les standards du web du W3C.

Site optimisé pour une largeur d'écran supérieure ou égale à 1024 pixels.
Site testé sur Firefox, Internet Explorer 7+, Chrome, Opera, Safari.

contenu | menu | recherche

Ce site propose un blog qui parle d’informatique, notamment de développement et design.

Il a été créé, designé et est maintenu par Pierrick Dautrement.

© 2019 Pierrick Dautrement. Tous droits réservés.

Ce qu'il y a derrière