Le chemin vers un texte réactif élégant

Les feuilles de style en cascade (CSS) constituent un fondement essentiel de l'interface utilisateur pour les applications web, mobiles et de bureau. Ce langage de mise en forme permet d'attribuer divers styles et propriétés grâce à un éventail de valeurs et de paramètres. Parmi ces valeurs, REM est fréquemment rencontrée lors de la mise en page de pages web avec CSS.

Cet article explorera en détail le concept de REM en CSS, soulignera l'importance d'une typographie adaptative dans la conception web, décrira le mode de calcul des unités REM et présentera les avantages de leur utilisation dans CSS.

Qu'est-ce que l'unité REM en CSS ?

Root-EM (REM) est une unité de mesure indiquant la taille d'une police d'un élément par rapport à la taille de police de l'élément racine. En tant qu'unité relative, toute valeur basée sur REM évolue en fonction des modifications apportées à la taille de la police de l'élément racine. La taille de police par défaut de la plupart des navigateurs est de 16 pixels, ce qui signifie qu'une valeur REM de 1 équivaut à 16 pixels.

Contrairement aux unités absolues comme les pixels, les unités REM offrent une flexibilité. Illustrons cela avec l'exemple de code suivant :

  <div>Bonjour le monde</div>

Voici le style CSS associé :

  div {
    border: 1.5px solid black;
    width: 200px;
  }

Dans cet exemple, la largeur du bloc, définie à 200 pixels, reste constante quelles que soient les variations de taille de l'écran. Cette largeur est indépendante de tout élément HTML dans le document.

De même, la bordure du conteneur, fixée à 1,5 pixel, conserve sa dimension, quel que soit l'environnement d'affichage.

Importance de la typographie adaptative dans la conception web

La typographie adaptative englobe différents aspects tels que la disposition, la taille et l'espacement du texte. Les concepteurs de sites web adoptent une conception web adaptative pour les raisons suivantes :

Expérience utilisateur améliorée : Les utilisateurs sont attirés par des applications faciles à naviguer. Une application qui s'ajuste à différentes tailles d'écran offre une expérience utilisateur agréable et fluide.
Ajustement aux différentes fenêtres : La typographie adaptative optimise l'espace disponible sur chaque fenêtre, évitant les problèmes de texte trop étiré sur les grands écrans ou trop petit sur les écrans compacts.
Lisibilité optimisée : Un site web efficace doit être facilement accessible et lisible. La mise en œuvre d'une typographie adaptative garantit que le texte s'ajuste en fonction de la taille et de l'orientation de l'écran.
Cohérence de l'image de marque : Avec l'augmentation de la complexité du code source, des incohérences de polices peuvent survenir. La conception adaptative assure une approche de conception uniforme, quel que soit l'écran ou le comportement de l'utilisateur.
Intégration avec les requêtes multimédias : La typographie adaptative se combine harmonieusement avec les requêtes multimédias. Cela permet aux concepteurs web de définir différents styles en fonction de caractéristiques telles que l'orientation et la taille de l'écran.
Accessibilité améliorée : La typographie adaptative est un pilier de l'accessibilité web. Les utilisateurs ayant des capacités diverses peuvent ajuster la taille de l'écran et les polices en fonction de leurs besoins.

Comment calculer les unités REM

Les unités REM se basent sur la taille de police de l'élément <html> (racine). Cette caractéristique permet de créer des mises en page uniformes et évolutives en définissant des valeurs relatives à une valeur de référence unique.

Bien que la plupart des navigateurs définissent par défaut une taille de police de 16 pixels, il est possible de modifier cette valeur, par exemple à 10 pixels. Dans ce cas :

  html {
    font-size: 10px;
  }

Ainsi, 10 pixels équivalent à 1 REM.

Prenons l'exemple suivant :

  <html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
    <h1>Bienvenue sur toptips.fr</h1>
  </body>
  </html>

Ce code sans style comprend un seul élément, un titre H1, affichant "Bienvenue sur toptips.fr".

La taille de police par défaut sera de 16 pixels, donc 1REM équivaut à 16 pixels. Voici le rendu initial :

Ajoutons maintenant une feuille de style, styles.css, pour illustrer l'utilisation des unités REM. Le lien entre les fichiers styles.css et index.html s'effectue dans la section <head> :

  <link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">

Le code CSS peut être :

  html {
    font-size: 10px;
  }

Dans ce scénario, les valeurs REM sont relatives à une taille de référence de 10 pixels. La taille de la police du H1 diminue, comme le montre la capture d'écran.

Modifions ensuite la taille du titre H1 en utilisant des valeurs REM :

  h1 {
    font-size: 3.5rem; /* Equivalent à 35 pixels (3.5rem * 10px = 35px) */
  }

Le titre H1 est maintenant plus grand, avec une taille de 35 pixels (3,5 REM).

Avantages de l'utilisation de REM en CSS

L'utilisation de pixels (px) et de pourcentages est courante lors de l'écriture de code CSS. Pourquoi privilégier les unités REM à ces options ? Voici quelques arguments en faveur de l'utilisation des unités REM :

Évolutivité accrue : La possibilité de modifier la taille de la police de l'élément racine rend les unités REM évolutives. Cette approche permet des ajustements proportionnels des unités REM. Elles s'adaptent également lorsque les utilisateurs modifient la taille des polices de leur navigateur.
Gestion simplifiée : La modification de l'élément racine, dans la balise <html> ou <body>, ajuste automatiquement les unités REM. Cette approche évite d'avoir à modifier chaque élément CSS individuellement. Il est par exemple possible de modifier la taille de la police de tous les titres H1 d'un seul coup.
Dimensionnement homogène : Les unités REM assurent la cohérence de la taille et de l'espacement des polices. L'uniformité des tailles de police est ainsi garantie sur l'ensemble des pages web, car elles sont relatives à l'élément racine.
Conceptions adaptatives : Il devient possible de créer des mises en page qui s'ajustent aux différentes tailles d'écran et aux différents appareils. Combinées aux requêtes multimédias, les unités REM permettent d'ajuster la taille de police de l'élément racine, entraînant l'adaptation proportionnelle des autres éléments.

CSS REM vs EM vs Pourcentages

Lors de l'écriture de code CSS, différentes unités sont rencontrées, telles que les pixels, les REM, les EM et les pourcentages. Bien que toutes ces unités servent à définir la taille et l'espacement des polices, elles s'utilisent dans différents scénarios et ont des caractéristiques distinctes. Comparons les REM à ces autres unités :

REM contre EM

Les unités REM et EM sont relatives, ce qui signifie qu'elles évoluent en fonction d'une valeur donnée. Cependant, les REM sont relatives à l'élément racine (<html>), tandis que les EM dépendent de l'élément parent (conteneur). Par exemple, considérons un conteneur div agissant comme parent et un autre div à l'intérieur de ce parent agissant comme enfant :

  <div class="parent">
    <p>Ceci est l'élément parent.</p>
    <div class="child">
      <p>Ceci est l'élément enfant.</p>
    </div>
  </div>

Les unités EM peuvent être définies comme suit :

  .parent {
      font-size: 1.5em;
    border: 1px solid #ccc;
    padding: 10px;
      margin-bottom: 20px;
  }
  .child {
    font-size: 1.2em;
      color: #333;
  }

La classe .parent a une taille de police de 1,5em. L'élément .child a une taille de police de 1,2em, relative à la classe parent. Toutes les modifications apportées à la classe parent sont automatiquement répercutées sur l'élément enfant.

REM vs pourcentages

Les pourcentages sont relatifs à la taille ou à l'espacement de l'élément parent. Si l'élément <body> a une taille de police de 16 pixels, un élément enfant, comme un paragraphe <p>, avec une taille de police de 50 %, correspond à 8 pixels (50/100 * 16 = 8 px).

Voici un exemple illustratif :

  body {
      font-size: 16px;
  }
    p {
      font-size: 50%;
    }

Le tableau ci-dessous résume les relations entre les unités REM, EM et les pourcentages :

Fonctionnalité	REM	EM	Pourcentage
Relative à	Élément racine	Élément parent/conteneur	Élément parent/conteneur
Héritage	De l'élément racine	De l'élément parent	De l'élément parent
Cas d'utilisation	Adapté aux mises en page uniformes	Adapté aux tailles relatives	Adapté aux conceptions adaptatives
Évolutivité	Oui	Oui	Relatif

Quand ne pas utiliser les unités REM

En raison de leurs nombreux avantages, l'utilisation systématique des unités REM pourrait être tentante. Voici quelques cas où leur utilisation serait inappropriée :

Impressions : Lors de l'impression, il est préférable d'utiliser des valeurs absolues. Les pouces ou millimètres offrent un contrôle précis sur les dimensions.
Contrôle précis : Lorsque le contrôle précis de la taille d'un élément en fonction de son parent est nécessaire, les unités REM ne sont pas recommandées. Les unités absolues comme les pixels sont plus appropriées.
Animations et transitions : Les unités REM ne conviennent pas lorsque des animations et des transitions avec des changements progressifs sont recherchées. Les changements de taille de police de l'élément racine entraînent des ajustements brusques lors de transitions et d'animations.
Navigateurs anciens : Certains navigateurs plus anciens ne prennent pas en charge les unités REM, il est alors préférable d'utiliser des pourcentages ou des pixels.

Conclusion

Vous devriez maintenant avoir une bonne compréhension du fonctionnement des unités REM, de leur calcul et de leurs utilisations. Les unités REM sont relatives, permettant ainsi d'assurer des tailles de police cohérentes dans vos applications.

Par ailleurs, les pixels sont des valeurs absolues, qui ne varient pas en fonction de la taille de la fenêtre ou des éléments environnants.

Néanmoins, les valeurs REM ne sont pas adaptées à tous les cas et les pourcentages ou les pixels peuvent être de meilleures options dans certains contextes.

N'hésitez pas à explorer les ressources CSS pour approfondir vos connaissances sur le style web.

Cet article vous a-t-il été utile ?

Merci pour votre avis !