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;
}    

Fiche technique

À propos de l'auteur

Robert Nyman est un développeur Web vivant à Stockholm, en Suède. Vous trouverez sur son blog des articles sur le développement web, les nouvelles technologies mais également des considérations plus personnelles.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Intermédiaire

Accessibilité

CSS

© 2001-2016 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site