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.

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.

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.

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 :

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.