La première partie de notre Digital Guide visait à démontrer l’im­por­tance des polices de ca­rac­tères adap­ta­tives en Res­pon­sive 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 ca­rac­tères adap­ta­tive via CSS.

Nom de domaine
Votre domaine en un clic
  • 1 cer­ti­fi­cat SSL Wildcard par contrat
  • Fonction incluse Domain Connect pour une con­fi­gu­ra­tion DNS sim­pli­fiée

Quelles polices de ca­rac­tères sont adap­ta­tives ?

Pour que chaque texte s’affiche de manière optimale sur des écrans de tailles dif­fé­rentes, vous aurez besoin d’une police de ca­rac­tères adap­ta­tive 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 pla­te­formes offrent un large choix gratuit. En choi­sis­sant votre police d’écriture, veillez à ce qu’elle soit lisible et cor­res­ponde à l’im­pres­sion que vous souhaitez véhiculer au lecteur. En ce qui concerne les titres, la police de ca­rac­tè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 ca­rac­tères, il est re­com­mandé 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 na­vi­ga­teur 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 per­met­tent également d’essayer dif­fé­rentes com­bi­nai­sons de couleurs.

Police de ca­rac­tères adap­ta­tive 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 dif­fé­rentes tailles d’écran. Les media queries sont des règles à appliquer pour re­con­naître les dif­fé­rentes ca­rac­té­ris­tiques d'un écran, comme sa ré­so­lu­tion, la largeur et la hauteur de la fenêtre du na­vi­ga­teur, ou si l’écran est en position verticale ou ho­ri­zon­tale.

Une police de ca­rac­tères adap­ta­tive doit pouvoir être flexible et c’est pourquoi les unités en em (cadratin) et en rem (root em) doivent dé­ter­mi­ner l’unité de mesure de la police d’écriture. Cette technique permet de modifier la taille du texte de base à l’aide de pour­cen­tages, qui sont une autre unité de mesure per­met­tant également de dé­ter­mi­ner la taille des ca­rac­tères. 

La mise en place d’une police de ca­rac­tères adap­ta­tive 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é­ces­saire. En combinant @media et screen ou min-width (largeur minimale) ou max-width (largeur maximale), il vous est possible de dé­ter­mi­ner le format de la police de ca­rac­tères en fonction de dif­fé­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 fa­ci­le­ment adap­tables d’un média à l’autre. Si la taille de la police de ca­rac­tè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 con­sacrent à l’im­plé­men­ta­tion de ces commandes CSS.

Pa­ra­mé­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 dif­fé­rentes tailles peuvent être at­tri­bué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 ca­rac­tères) du h1 (3em; 2.5em; 2em; 1.5em). Vous pouvez dé­ter­mi­ner la taille de la police de ca­rac­tères en fonction de la largeur du na­vi­ga­teur qui l’affichera. Pour cela, dé­ter­mi­nez la taille maximale (max-width). Dans cet exemple il­lus­tra­tif, la largeur est dé­ter­mi­née par l’unité de mesure em. Sa valeur est définit en fonction de la taille standard du na­vi­ga­teur, gé­né­ra­le­ment de l’ordre de 16 pixels. En suivant cette logique, notre exemple donne 1em = 16px. Ainsi, vous pouvez calculer les dif­fé­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 mul­ti­pliez) la donnée tout sim­ple­ment par 16. Dans l'exemple, la taille du h1 se base sur quatre tailles de la fenêtre dif­fé­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 (break­points). Les break­points 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’in­ter­ligne soit modifiée et découvrez comment ce faire dans le prochain pa­ra­graphe.

Un corps de texte adaptatif en em

Tout comme pour les titres, choi­sis­sez une taille de police de ca­rac­tères de l’ordre de 100% pour un pa­ra­graphe (p). Ici aussi, la taille de police est définie en em. L’im­plé­men­ta­tion de dif­fé­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 na­vi­ga­teurs. La taille de base des polices de ca­rac­tè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 ca­rac­tères s’adapte à la largeur de la fenêtre. Cette courte ma­ni­pu­la­tion permet de rendre votre police de ca­rac­tères adap­ta­tive pour des projets en Res­pon­sive 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 in­ter­lignes le soient aussi. Une des règles de base en ty­po­gra­phie consiste à équi­li­brer l’es­pa­ce­ment des in­ter­lignes en fonction de la longueur des lignes du texte. Une autre règle ap­proxi­ma­tive à observer est la suivante : la hauteur des lignes devrait être compris entre 120 et 140 pour cent en fonction de la taille des ca­rac­tères (1.2 em jusqu’à 1.4 em) dans le texte courant. Cette valeur dépend toujours de la police de ca­rac­tères utilisée. Comme 1 em cor­res­pond à la taille de la police de ca­rac­tères, la hauteur des lignes est de 20% à 40% de la taille de la police de ca­rac­tères.

En utilisant l’unité de mesure em, il vous est possible d’effectuer cet équi­li­brage. 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 adap­ta­tifs. Cette unité est orientée en fonction de l’élément racine html (au regard des unités comme les em). Par con­sé­quent, la taille de la police d’écriture est di­rec­te­ment liée au contenu racine. Les commandes CSS en rem peuvent res­sem­bler à 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 pro­blé­ma­tique de com­pa­ti­bi­lité de l’unité rem avec les anciennes versions de na­vi­ga­teurs. Cette unité est néanmoins com­pa­tible avec Firefox, Chrome, Safari, Edge ou encore Opera. Pour Internet Explorer, une as­sis­tance des unités rem n’est seulement dis­po­nible qu’à partir de la Version 9. Pour que les uti­li­sa­teurs des anciennes versions d’Internet Explorer puissent tout de même bé­né­fi­cier d’une na­vi­ga­tion agréable sur votre site Web, il est possible d’intégrer un fallback, qui est une solution de repli. Cette subs­ti­tu­tion pour les na­vi­ga­teurs 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 ca­rac­tères adap­ta­tive via CSS Viewport

Une variante pour la mise en place d’une police de ca­rac­tères adap­ta­tive 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 re­di­men­sion­ner 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 per­met­tent d’adapter la police de ca­rac­tères soit à la hauteur, soit à la largeur de la fenêtre. La valeur minimale est dé­ter­mi­née par vmin, la valeur maximale par vmax. Ces quatre unités Viewport sont également exprimées en pour­cen­tages. 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 na­vi­ga­teur de cette taille, la valeur 10vmax est équi­va­lente à 64px (640 : 10). De manière similaire aux unités de mesure rem, les unités Viewport ne sont pas com­pa­tibles avec toutes les versions de na­vi­ga­teurs. Retrouvez un aperçu ici :

Mise en place des titres et des corps de texte adap­ta­tifs 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’ef­fec­tuent 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) adap­ta­tifs : 

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

Ces commandes CSS per­met­tent 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 dif­fé­rentes écritures gardent la même pro­por­tion selon la taille de la fenêtre du na­vi­ga­teur.

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 per­met­tent de veiller à ce que la taille de la police de ca­rac­tères s’adapte toujours à la teille de la fenêtre.

Créer un site Internet
Votre site en un éclair grâce à l'in­tel­li­gence ar­ti­fi­cielle
  • Éditeur de site intuitif avec fonctions d'IA
  • Gé­né­ra­teur d'images et de textes avec op­ti­mi­sa­tion SEO
  • Domaine, SSL et boîte email inclus

La police de ca­rac­tères adap­ta­tive ne peut être négligée

L’ap­pli­ca­tion de quelques commandes CSS suffit à vous procurer un design adaptatif pour vos polices de ca­rac­tères. Pensez à vérifier leur bon fonc­tion­ne­ment sur dif­fé­rents appareils (ou ému­la­teurs) 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 éche­lon­nage 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 ca­rac­tères. Toutes ces solutions per­met­tent 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 ca­rac­tères en Res­pon­sive Web design dévoile quelques sources en ligne de polices gratuites adap­ta­tives et comment les utiliser pour votre site Web.

Aller au menu principal