Définir des tailles de police dynamiques cohérentes avec CSS
Par Robert Nyman
Pour un développeur de sites web, il est naturel d'offrir à ses visiteurs la possibilité d'ajuster la taille du texte à loisir, quel que soit leur navigateur. J'aimerais vous présenter ici la manière la plus cohérente que j'ai trouvé pour y parvenir en CSS.
Le problème
Comme bien souvent, le problème vient des navigateurs. En effet, Internet Explorer ne permet pas à l'utilisateur de redimensionner du texte dont la taille de police est définie en pixels (px). Les unités relatives (em, pourcentages, etc.) ne sont pas affectées. Ce défaut n'a pas été corrigé dans IE7, bien que cette version permette de zoomer sur l'ensemble de la page (même si ce n'est pas du tout la même chose).
C'est un vrai problème, parce que la plupart des mises en page et des résultats attendus se mesurent en pixels, et qu'il y a plus d'une façon d'y arriver.
La solution que j'utilise
Tout d'abord, il faut choisir une unité de mesure pour les tailles de police. J'ai opté pour l'em, parce qu'elle me semble la plus stable et la mieux implémentée. Appliquer une taille d'1 em revient à donner à un élément la même taille que son parent.
Commençons par le commencement.
La taille de texte par défaut dans la plupart des navigateurs (j'aimerais pouvoir affirmer « dans tous » mais on ne sait jamais) est de 16 px, et nous allons partir de là. Pour être sûrs que toutes les tailles de police héritent correctement de cette valeur, définissons pour commencer une taille de 100% pour l'élément HTML.
HTML{
font-size: 100%;
}
L'étape suivante consiste à déterminer la taille de texte par défaut pour l'ensemble du site, celle qui sera appliquée à la majorité du texte. Elle nous fournira également un bon point de départ pour calculer la taille des autres éléments. Prenons une page web pour laquelle nous désirons une taille de texte de 10px. Si nous divisons cette taille par celle précédemment appliquée par le navigateur, cela donne 10 / 16 = 0,625. Nous utiliserons donc cette valeur, en em, sur la balise body.
body{
font: 0.625em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
Avec cette règle, le texte de la page fera 10px sauf si nous en décidons autrement. Par exemple, si vous voulez changer la taille des différents niveaux de titres (ce qui est assez probable), le calcul s'effectue maintenant à partir de la valeur définie pour body.
Grâce aux règles précédentes, définir pour un élément une taille d'1em le fera s'afficher à 10px. Si vous souhaitez que les éléments h1 fassent 17px, il faut calculer leur taille comme ceci : 17 / 10 = 1,7. Le code pour la taille des h1 devient donc :
h1{
font: 1.7em/1em Arial, Helvetica, sans-serif;
}
Voila, vous avez fait le plus dur. Assurez-vous de toujours faire vos calculs après avoir fixé la taille par défaut (ici, 10 px) et de vérifier les arrondis à la calculatrice : ils peuvent différer d'un navigateur à l'autre.
Remarque : les éléments de formulaires
Pour que les éléments de formulaires s'affichent correctement, je vous recommande de leur donner une taille de 100%.
input, select, textarea{
font-size: 100%;
}
Expérience utilisateur
Le code ci-dessus définit une taille de police de 10px dans les navigateurs où ce paramètre est à sa valeur habituelle. Si l'utilisateur augmente ou diminue la taille de police, l'ensemble du texte de la page s'adaptera automatiquement de manière équilibrée, améliorant ainsi son expérience.
Exemple de feuille de style
Dans mes projets, je sépare généralement les règles typographiques des autres, en les plaçant dans des fichiers différents. Cela m'aide à distinguer les règles utilisées pour la typographie de celles utilisées pour la mise en page. Voici un exemple de feuille de style typographique :
/* Spécifique à cette balise */
HTML{
font-size: 100%;
}
body{
/* La taille de base sera de 10px avec les valeurs par défaut de police du navigateur */
font: 0.625em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
input, select, textarea{
font-size: 100%;
}
h1{
/* Par défaut, ce texte s'affichera à 20px */
font: 2em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
h2{
/* Par défaut, ce texte s'affichera à 15px */
font: 1.5em/1em Arial, Helvetica, sans-serif;
}
h3{
/* Par défaut, ce texte s'affichera à 12px */
font: bold 1.2em/1em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
http://www.robertnyman.com/2007/02/27/how-to-specify-dynamic-font-sizes-consistently-with-css/