Navigation

Toutes les catégories

Filtrer par auteur

Voir les derniers articles

CSS : 8 bonnes pratiques pour gérer la taille de votre texte en em

Vous n’êtes pas sans savoir que 60 % des visites internet se fond aujourd’hui depuis un smartphone. Il est devenu indispensable de soigner...

Publié par Morgane Ponton

Vous n’êtes pas sans savoir que 60 % des visites internet se fond aujourd’hui depuis un smartphone. Il est devenu indispensable de soigner l’expérience de ces internautes mobiles et de développer votre site web en responsive design.

Beaucoup plus agile qu’une « version mobile » statique, cette notion de responsive indique que le design s’adapte à la taille de l’écran de votre utilisateur. Et l’un des premiers enjeux du responsive, c’est le texte ! En effet, il faut que la taille de votre texte s’adapte pour être toujours lisible. Une technique encore peu utilisée par les webdesigner, pourtant très astucieuse, consiste à utiliser les em pour redimensionner votre texte.

Voyons comment utiliser cette méthode pour vos textes et rendre vos sites web plus accessibles.

Définition de l’unité « em »

  • L’em est une unité relative utilisée en CSS très utile pour redimensionner les textes.
  • On l’appelle unité relative en opposition aux pixels qui sont une unité absolue peu flexible.
  • L’em se base sur la configuration de l’utilisateur (son navigateur, son appareil) pour adapter dynamiquement la taille du texte.
  • 1em est une unité type correspondant grosso modo à la taille d’un Ç majuscule.
Le saviez-vous ?
L’objectif majeur pour utiliser l’em consiste à augmenter la lisibilité de vos textes pour satisfaire tous les besoins des utilisateurs, quel que soit leur appareil.

1. Comprendre la notion de ratio

Pour intégrer les em dans votre code, ajoutez la propriété CSS font-size suivi du ratio en em.

La taille Xem signifie que la hauteur du texte sera X fois supérieures au texte initial de votre body.

Grâce à cette notion, vous ne fixez pas une taille de texte arbitraire, mais plutôt une proportion au regard de la taille de base de votre body. Vous suivez ?

L’em joue comme un effet multiplicateur et réducteur par rapport à un ratio de base : 1em. Des blocs conteneurs, éléments intermédiaires, les en-têtes seront des héritiers du body sur lesquels vous pourrez décider de changer le ratio.

  • Html {font-size : 100 % ;}
  • Body {font-size : 0.75em ;}
  • div#en-tete {font-size : 1.4em ;}

2. Fini les pixels

code em

Remplacez toutes vos tailles de texte en pixel par les em.

Jouez le jeu, vous ne devez plus avoir aucun indicateur en pixel in fine !

3. Utilisez les navigateurs

Avec les em, nul besoin de calculer vous-même le rendu de votre texte, cela serait bien trop fastidieux.

La meilleure option pour avoir un aperçu est de laisser la main au système d’exploitation qui va dimensionner automatiquement le texte en fonction de l’appareil sur lequel il consulte votre site internet. Quelle que soit sa configuration, il aura une bonne lisibilité du texte, définie par défaut par le navigateur.

Attention
Méfiez-vous des configurations par défaut. Un utilisateur pourrait avoir fixé à la main une taille de texte minimum dans ses paramètres.

4. Maîtrisez la taille : ni trop grand…

taile em CSS graphiste freelance

Il faut savoir que la taille par défaut de 1em a pour vocation d’améliorer l’accessibilité des sites et la lisibilité des textes.

Mais on est pas forcément habitué à voir des textes si grands donc vous pouvez fixer votre body à 0,8em. Dans tous les cas, limitez la grandeur de votre texte à 2em grand maximum.

Bien qu’il n’y ait pas de limite officielle, vous devrez garder une cohérence graphique sur votre page.

5. …ni trop petit !

Respectez le critère de lisibilité.

Pour que la lecture de votre texte reste agréable pour tous, ne choisissez pas un ratio em inférieur à 0,75.

6. Comment gérer Internet Explorer ?

taille em CSS graphiste rédacteur freelance

Pour ce navigateur, certains dysfonctionnements ont été constatés lors de l’utilisation des em pour redimensionner automatiquement un texte.

Par précaution, pensez donc à rajouter le paramètre  {font-size : 100 %} sur l’élément HTML.

7. Attention à l’effet multiplicateur

Attention à ne pas multiplier les propriétés CSS font-size em systématiquement, car vous risqueriez de vous perdre dans les ratios et vous retrouver avec un texte géant !

Dans les div notamment, vous serez tenté de renseigner une nouvelle taille. Contentez-vous d’une fois et uniformisez ainsi toutes vos polices.

8. Utilisez ce ratio pour le web

N’oubliez pas que ce ratio est simplement web. Les pixels et surtout l’unité pt sont indispensables en print.

Prenez l’accessibilité de votre site web en main avec l’utilisation des em pour gérer la taille de votre texte. Ce ratio est très utile et simple d’utilisation en suivant ces quelques règles de base.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Articles similaires

Graphisme

Comment réaliser une analyse concurrentielle en 5 étapes ?

À plusieurs reprises nous avons évoqué le fait de s’intéresser à la concurrence : que ce soit dans le processus de design thinking,...

Publié le par Charlotte Chollat
Graphisme

Inspiration : 15 affiches publicitaires sur lesquelles prendre exemple

Dans une ère de plus en plus digitale, de nombreuses entreprises ont axé leur stratégie de communication vers le numérique avec cette envie de toucher...

Publié le par Charlotte Chollat