Responsive Web design et CSS

La première partie de notre Digital Guide visait à démontrer l’importance des polices de caractères adaptatives en Responsive Web design. Cette deuxième partie a pour objectif de se pencher sur l’aspect technique et explique comment mettre en place une police de caractères adaptative via CSS.

Nom de domaine
Votre domaine en un clic
  • Domaine .eu ou .fr + éditeur de site gratuit pendant 6 mois
  • 1 certificat SSL Wildcard par contrat
  • Boîte email de 2 Go

Quelles polices de caractères sont adaptatives ?

Pour que chaque texte s’affiche de manière optimale sur des écrans de tailles différentes, vous aurez besoin d’une police de caractères adaptative basée sur une grille fluide. Pour cela, vous pouvez utiliser des fontes en ligne comme celles de Google Fonts et Font Squirrel. Ces deux plateformes offrent un large choix gratuit. En choisissant votre police d’écriture, veillez à ce qu’elle soit lisible et corresponde à l’impression que vous souhaitez véhiculer au lecteur. En ce qui concerne les titres, la police de caractères peut être plus ludique que dans le corps de texte qui doit être très lisible pour faciliter la lecture. Pour la couleur des caractères, il est recommandé d’en choisir une qui contraste avec la couleur de fond de votre site Web et qui ne doit pas être trop pâle, pour que la lecture reste agréable. Vous disposez d’outils sur votre navigateur comme le Colour Contrast Check ou encore le WebAIM afin de vérifier si le choix du contraste entre la couleur de la police et la couleur de fond est adaptée. Ces outils vous permettent également d’essayer différentes combinaisons de couleurs.

Police de caractères adaptative avec CSS et les media queries

C'est grâce aux media queries (requêtes média) en CSS3 que vous pouvez adapter votre police d’écriture aux différentes tailles d’écran. Les media queries sont des règles à appliquer pour reconnaître les différentes caractéristiques d'un écran, comme sa résolution, la largeur et la hauteur de la fenêtre du navigateur, ou si l’écran est en position verticale ou horizontale.

Une police de caractères adaptative doit pouvoir être flexible et c’est pourquoi les unités en em (cadratin) et en rem (root em) doivent déterminer l’unité de mesure de la police d’écriture. Cette technique permet de modifier la taille du texte de base à l’aide de pourcentages, qui sont une autre unité de mesure permettant également de déterminer la taille des caractères. 

La mise en place d’une police de caractères adaptative via les media queries s’effectue à l’aide de commandes CSS.

  • Avec @font-face, vous pouvez  intégrer la police souhaitée.
  • Pour que la police d’écriture puisse s’adapter au format de l’écran sur lequel votre site est affiché, la requête média @media est nécessaire. En combinant @media et screen ou min-width (largeur minimale) ou max-width (largeur maximale), il vous est possible de déterminer le format de la police de caractères en fonction de différentes tailles d’écran. Par exemple avec : @media screen and (min-width: 800px).
  • La propriété font-size définit la taille affichée de la police d’écriture, en pixels ou en unités de mesure comme em. Cette unité de mesure se rapporte à la taille de la police et permet d’avoir des feuilles de style plus facilement adaptables d’un média à l’autre. Si la taille de la police de caractères est définie en em, alors elle s’adapte en fonction de la taille de l’élément parent.

Les parties suivantes du Digital Guide IONOS se consacrent à l’implémentation de ces commandes CSS.

Paramétrer la taille des titres grâce aux media queries

Sur CSS, les titres sont appelés h1, h2, h3… (« h » pour « header » en anglais). La taille de ces titres peut être exprimée en em. L’exemple ci-dessous montre comment différentes tailles peuvent être attribuées au premier titre (h1). Ces tailles s’adaptent en fonction (font-size: 100%) de l’élément parent du <body> : 

body {font-size: 100%}
h1 {font-size: 3em;}
@media screen and (max-width: 64em) {
h1 {
        font-size: 2.5em;
    }
}
@media screen and (max-width: 50em) {
h1 {
        font-size: 2em;
    }
}
@media screen and (max-width: 30em){
h1 {
        font-sitze: 1.5em;
    }
}

Cet exemple appliqué au h1 permet de donner quatre variantes du font-size (taille de la police de caractères) du h1 (3em; 2.5em; 2em; 1.5em). Vous pouvez déterminer la taille de la police de caractères en fonction de la largeur du navigateur qui l’affichera. Pour cela, déterminez la taille maximale (max-width). Dans cet exemple illustratif, la largeur est déterminée par l’unité de mesure em. Sa valeur est définit en fonction de la taille standard du navigateur, généralement de l’ordre de 16 pixels. En suivant cette logique, notre exemple donne 1em = 16px. Ainsi, vous pouvez calculer les différentes tailles d’em en pixels en fonction des largeurs des fenêtres d’écran (min-width/max-width). Calculez la largeur de la fenêtre en pixels et divisez (ou multipliez) la donnée tout simplement par 16. Dans l'exemple, la taille du h1 se base sur quatre tailles de la fenêtre différentes :

  • plus de 1024 pixels
  • jusqu’à pixels (1024 : 16 = 64em)
  • jusqu’à 800 pixels (800 : 16 = 50em)
  • jusqu’à 480 pixels (480 : 16 = 30em)

Bien entendu, vous pouvez modifier le code et l’appliquer au cas par cas (breakpoints). Les breakpoints seraient par exemeple en 480, 800 ou 1024 pixels. Ainsi, il vous sera possible d’adapter au plus près vos titres.

Il peut arriver qu’une partie du titre soit coupée sur les écrans les moins larges lorsque les titres sont trop longs. Dans ce cas de figure, veillez à ce que l’interligne soit modifiée et découvrez comment ce faire dans le prochain paragraphe.

Un corps de texte adaptatif en em

Tout comme pour les titres, choisissez une taille de police de caractères de l’ordre de 100% pour un paragraphe (p). Ici aussi, la taille de police est définie en em. L’implémentation de différentes tailles de polices ressemble à cela en fonction de l’exemple précédent :

body {font-size: 100%}
p {font-size: 1.5em;}
@media screen and (max-width: 64em) {
 body {
      font-size: 90%;
   }
}
@media screen and (max-width: 50em) {
 body {
       font-size: 75%;
   }
}
@media screen and (max-width: 30em) {
   body {
        font-size: 50%;
  }
}

La valeur du corps de texte (body) est fixée à 100% et est de l’ordre de 16 pixels sur la plupart des navigateurs. La taille de base des polices de caractères du texte (font-size: 1.5em) est de 24 pixels (1,5 x 16 = 24) dans cet exemple. A partir des commandes font-size (90%, 75%, 50%) en rapport avec le body, la taille de polices de caractères s’adapte à la largeur de la fenêtre. Cette courte manipulation permet de rendre votre police de caractères adaptative pour des projets en Responsive Web design.

Mais dès lors que le corps de texte est adaptatif, il va de soi qu’il est important de veiller à ce que les interlignes le soient aussi. Une des règles de base en typographie consiste à équilibrer l’espacement des interlignes en fonction de la longueur des lignes du texte. Une autre règle approximative à observer est la suivante : la hauteur des lignes devrait être compris entre 120 et 140 pour cent en fonction de la taille des caractères (1.2 em jusqu’à 1.4 em) dans le texte courant. Cette valeur dépend toujours de la police de caractères utilisée. Comme 1 em correspond à la taille de la police de caractères, la hauteur des lignes est de 20% à 40% de la taille de la police de caractères.

En utilisant l’unité de mesure em, il vous est possible d’effectuer cet équilibrage. Pour cela, utilisez la commande line-height (hauteur des lignes) :

body {font-size: 100%}
p {
    font-size: 1.5em;
    line-hight: 1.3 em;
}
h1, h2, h3 {line-height: 1.2em;}

Un corps de texte adaptatif avec l’unité rem

L’unité relative de mesure rem (« root em ») est également adaptée aux corps de textes adaptatifs. Cette unité est orientée en fonction de l’élément racine html (au regard des unités comme les em). Par conséquent, la taille de la police d’écriture est directement liée au contenu racine. Les commandes CSS en rem peuvent ressembler à cela : 

html {font-size: 100%;}
p {font-size: 1.5rem;}
h1 {font-size: 3rem;}
h2 {font-size: 2.5 rem;}
h3 {font-size: 2rem;}

Toutefois, on observe une problématique de compatibilité de l’unité rem avec les anciennes versions de navigateurs. Cette unité est néanmoins compatible avec Firefox, Chrome, Safari, Edge ou encore Opera. Pour Internet Explorer, une assistance des unités rem n’est seulement disponible qu’à partir de la Version 9. Pour que les utilisateurs des anciennes versions d’Internet Explorer puissent tout de même bénéficier d’une navigation agréable sur votre site Web, il est possible d’intégrer un fallback, qui est une solution de repli. Cette substitution pour les navigateurs ressemble à cela dans notre exemple :

html {font-size: 100%}
p{
    font-size: 24px;
    font-size: 1.5rem;
}
h1 {
        font-size: 48px;
        font-size: 3rem;
}
h2 {
        font-size: 40px;
        font-size: 2.5rem;
}
h3 {
        font-size: 32px;
        font-size: 2rem;
}

Encoder une police de caractères adaptative via CSS Viewport

Une variante pour la mise en place d’une police de caractères adaptative consiste à utiliser des unités de CSS Viewport (c’est-à-dire la taille de la fenêtre en Web design). CSS Viewport permet également d’adapter et de redimensionner les éléments de contenus de la page à la largeur de la fenêtre. L’avantage de cette solution par rapport aux média queries réside dans sa rapidité et une prise en main plus facile. Les unités de CSS Viewport sont exprimées en vw (« viewport width »), en vh (« viewport height »), parfois en vmax (« viewport maximum ») et en vmin (« viewport minimum »). Ces deux dernières permettent d’adapter la police de caractères soit à la hauteur, soit à la largeur de la fenêtre. La valeur minimale est déterminée par vmin, la valeur maximale par vmax. Ces quatre unités Viewport sont également exprimées en pourcentages. Toujours à titre d’exemple : 10vw = 10% de la largeur de la fenêtre. Avec un Viewport de 640 x 480 pixels, le vmax serait de 640 pixels (la valeur maximale). Avec une fenêtre de navigateur de cette taille, la valeur 10vmax est équivalente à 64px (640 : 10). De manière similaire aux unités de mesure rem, les unités Viewport ne sont pas compatibles avec toutes les versions de navigateurs. Retrouvez un aperçu ici :

Mise en place des titres et des corps de texte adaptatifs avec CSS Viewport

Les unités de mesure relatives de CSS Viewport sont adaptées à la fois aux titres et au corps de texte. Les unités Viewport s’effectuent de la même manière que les unités rem avec les requêtes média : Ces deux unités de mesure sont relatives. L’extrait de code ci-dessous a été conçu avec des unités Viewport de manière à rentre le corps du texte (p) et les titres (h1, h2, h3) adaptatifs : 

p {font-size: 2vmin;}
h1 {font-size: 5vw;}
h2 {font-size: 4vh;}
h3 {font-size: 3vmin;}

Ces commandes CSS permettent de faire en sorte que la police du corps de texte (p) soit définie comme suit : (font-size: 2vmin) en fonction de la plus petite valeur, soit 2% de la largeur ou la hauteur de la fenêtre. On garantit avec cela que les différentes écritures gardent la même proportion selon la taille de la fenêtre du navigateur.

La taille du titre principal (h1) reste à 5% de la largeur de la fenêtre de l’écran (font-size: 5vw) tandis que la deuxième (h2) s’adapte à 4% de la hauteur de la fenêtre (font-size: 4vh). Le troisième et dernier titre (h3) est défini par la valeur (3vmin) et est toujours plus grand que le corps de texte (en 2vmin), à hauteur de 1%. Ces quatre commandes CSS permettent de veiller à ce que la taille de la police de caractères s’adapte toujours à la teille de la fenêtre.

Créer un site Internet
Votre site en un éclair grâce à l'intelligence artificielle
  • Éditeur de site intuitif avec fonctions d'IA
  • Générateur d'images et de textes avec optimisation SEO
  • Domaine, SSL et boîte email inclus

La police de caractères adaptative ne peut être négligée

L’application de quelques commandes CSS suffit à vous procurer un design adaptatif pour vos polices de caractères. Pensez à vérifier leur bon fonctionnement sur différents appareils (ou émulateurs) avant de lancer votre site Web.

Le recours aux requêtes média ou bien à CSS Viewport dépendra de la nature de votre projet. En ce qui concerne les media queries, leur échelonnage prend un peu plus de temps qu’avec les unités Viewport et sont bien plus flexibles. Vous pouvez également utiliser des Element Queries ou une extension jQuery pour adapter la taille de votre police de caractères. Toutes ces solutions permettent d’adapter la taille de la police d’écriture à celle de la fenêtre. La dernière partie de notre série sur les polices de caractères en Responsive Web design dévoile quelques sources en ligne de polices gratuites adaptatives et comment les utiliser pour votre site Web.

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