Comment gérer la taille des caractères en responsive design ?
Si les dimensions de l'écran peuvent influer sur la taille des éléments Web, grâce aux CSS, ce n'est pas le cas de la taille de la police.
Avec la multiplicité du nombre de périphériques pouvant se connecter à Internet, il est devenu intéressant pour un site web de s'adapter selon l'appareil qui l'affiche (smartphone, tablette, ordinateur). Le responsive design permet de modifier son site internet selon le périphérique qui y accède. Mais si les dimensions de l'écran influent sur la taille des éléments, grâce notamment aux dimensions en CSS qui peuvent être fixées avec des pourcentages, ce n'est pas le cas de la taille de la police, qui est généralement renseignée en pixels. Le langage CSS fournit heureusement des outils pour pouvoir par exemple diminuer la taille d'un titre lorsque l'écran est plus petit.
Si votre site internet se destine à un public utilisant les derniers navigateurs, vous pouvez utiliser les valeurs en viewport pour les polices. Le viewport correspond à la résolution du périphérique que vous utilisez. Il est possible de paramétrer la taille de la police avec 2 unités liées au viewport : viewport-width, qui se base sur la largeur que peut afficher l'écran, et viewport-height, qui est liée à la hauteur. Pour ces 2 unités de mesure, le rapport est le même : 1 unité correspond à 1% de la largeur ou de la hauteur du viewport. Il existe aussi les unités vmin et vmax, qui prennent le plus petit ou le plus grand entre la largeur et la hauteur, ce qui permet de tenir compte des différentes orientations possibles pour un smartphone ou une tablette.
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Si vous souhaitez bénéficier d'une meilleure prise en charge des navigateurs, vous pouvez utiliser les media queries. Ce sont des conditions utilisées dans le langage CSS3 pour définir le comportement de la feuille de style en fonction du périphérique qui l'affiche. On peut notamment choisir le type de média (screen pour un écran, print pour une imprimante) ou la largeur de l'affichage. On peut donc utiliser ces conditions pour redimensionner les titres lorsque l'écran est petit :
/* Taille normale des titres sur un ordinateur */
h1 {
font-size: 5em;
}
/* Si on utilise un petit écran (que ce soit avec un ordinateur dans une petite fenêtre ou avec un smartphone), les titres sont réduits */
@media only screen and (max-width: 320px) {
h1 {
font-size: 3em;
}
}