Définir la taille de la police, c'est définir la hauteur du corps des caractères.

Caractère typographique

### La propriété font-size

La taille de la police est spécifiée par la propriété font-size dont la valeur est un nombre d'unités.

    html { font-size: 13px; }
    body { font-size: 1em; }
    h1 { font-size: 160%; }
    p { font-size: 1rem; }

L'unité de taille est à choisir en fonction du dispositif d'affichage. Par exemple il ne faut pas utiliser des centimètres pour afficher sur un écran pour lequel on privilégiera le pixel CSS (`px`), le cadratin (`em`), le pourcentage (`%`) ou la référence à la racine du document (`rem`).

Par défaut les navigateurs utilisent une taille de caractères de 16 pixels.

La propriété font-size est héritée : elles est transmise automatiquement de l'élément parent à ses enfants, quelque soit le niveau de descendance.
On peut donc facilement gérer la taille de police d'une page en mettant la propriété font-size sur l'élément body, ou sur l'élément html.

### Taille en pixels

Spécifier une taille de police en `px` (pixels) définit une taille dans une valeur absolue. Cela permet de s'affranchir de la taille de base éventuellement choisie par l'utilisateur et peut parfois poser des problèmes pour les personnes souffrant d'un handicap visuel qui auront augmenté la taille par défaut.

Exemple : taille de polices
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu et le prince d'Azkaban</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
html { font-size: 13px; font-family: Tahoma, Geneva, Verdana, sans-serif; } h3 { font-size: 22px; } p:nth-of-type(2) { font-size: 15px; } p:nth-of-type(3) { font-size: 17px; } p:last-of-type { font-size: 19px; }

### Taille en em

Spécifier une taille de police en `em` (ou cadratin) définit une taille relativement à la taille de l'élément parent.

La taille de l'élément parent, quelle qu'elle soit, représente 1 `em`. Si on veut diminuer la taille de l'élément enfant on donne une valeur inférieure à 1 et si on veut augmenter la taille de l'enfant on donne une valeur supérieure à 1.
Par exemple, si la taille du parent est de 16 pixels, définir la taille d'un enfant à 0.8125 `em` donnera 13 pixels (16 * 0.8125), et définir la taille à 1.25 `em` donnera 20 pixels (16 * 1.25).

Exemple : taille de polices
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu et le prince d'Azkaban</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
body { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } h3 { font-size: 2em; /* 16px X 2 = 32px */ } p:first-of-type { font-size: 1em; /* 16px X 1 = 16px */ } p:nth-of-type(2) { font-size: 0.8125em; /* 16px X 0.8125 = 13px */ } p:nth-of-type(3) { font-size: 0.6875em; /* 16px X 0.6875 = 11px */ } p:last-of-type { font-size: 1.1875em; /* 16px X 1.1875 = 19px */ }

Utiliser l'unité `em` permet de modifier facilement les différentes tailles utilisées dans une mise en page en modifiant seulement la taille de l'élément parent de base.

Utiliser l'unité `em` permet de respecter la taille par défaut choisie par l'utilisateur qui constituera l'unité de base.

Il faut toutefois être très prudent car les imbrications risquent de cumuler les diminutions (ou les augmentations) donnant ainsi des résultats non souhaités et quelque fois difficiles à maîtriser.

L'exemple suivant est une imbrication de listes (qui pourrait constituer un menu). La taille de l'élément li est définie à 0.8125 `em` soit 13 pixels. Au fur et à mesure de l'imbrication la taille des éléments li diminue passant de 13 pixels à 11 pixels (13px X 0.8125) puis 9 (11 X 0.8125).

Exemple : cumuls à éviter
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul> <li>Le Seigneur des Anneaux <ul> <li>Les gentils <ul> <li>Gandalf</li> <li>Frodon</li> </ul> </li> <li>Les méchants <ul> <li>Sauron</li> <li>Saroumane</li> </ul> </li> </ul> </li> <li>Star Wars <ul> <li>Les gentils <ul> <li>Yoda</li> <li>Luke Skywalker</li> </ul> </li> <li>Les méchants <ul> <li>Palpatine</li> <li>Dark Vador</li> </ul> </li> </ul> </li> </ul> </body> </html>
Fichier CSS : styles.css
body { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } li { font-size: 0.8125em; }

#### Arrêter le cumul proportionnel

Reprenez l'exemple précédent et ajoutez la règle de style qui permet d'arrêter le cumul des diminutions. Tous les éléments li, quelque soit leur position dans la hiérarchie doivent avoir la même taille, soit 16 pixels X 0.8125 `em`.

Une solution possible

Exercice : arrêter le cumul proportionnel
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul> <li>Le Seigneur des Anneaux <ul> <li>Les gentils <ul> <li>Gandalf</li> <li>Frodon</li> </ul> </li> <li>Les méchants <ul> <li>Sauron</li> <li>Saroumane</li> </ul> </li> </ul> </li> <li>Star Wars <ul> <li>Les gentils <ul> <li>Yoda</li> <li>Luke Skywalker</li> </ul> </li> <li>Les méchants <ul> <li>Palpatine</li> <li>Dark Vador</li> </ul> </li> </ul> </li> </ul> </body> </html>
Fichier CSS : styles.css
body { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } li { font-size: 0.8125em; } li li { font-size: 1em; }

### Taille en rem

Pour éviter le problème des cumuls de tailles proportionnelles, une nouvelle unité a été introduite par le W3C : le `rem` permet de définir une taille relative à l'élément racine du document, soit l'élément html. On peut ainsi respecter la taille par défaut choisie par l'utilisateur et on a une taille de base invariante.

Exemple : cumuls à éviter
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <ul> <li>Le Seigneur des Anneaux <ul> <li>Les gentils <ul> <li>Gandalf</li> <li>Frodon</li> </ul> </li> <li>Les méchants <ul> <li>Sauron</li> <li>Saroumane</li> </ul> </li> </ul> </li> <li>Star Wars <ul> <li>Les gentils <ul> <li>Yoda</li> <li>Luke Skywalker</li> </ul> </li> <li>Les méchants <ul> <li>Palpatine</li> <li>Dark Vador</li> </ul> </li> </ul> </li> </ul> </body> </html>
Fichier CSS : styles.css
html { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } li { font-size: 0.8125rem;}

Si une taille est définie pour l'élément html c'est elle qui servira de taille de référence.

Si aucune taille n'est définie pour l'élément html mais qu'une taille est définie pour l'élément body, c'est elle qui servira de taille de référence.

Si aucune taille n'est définie pour les éléments html et body, c'est la taille définie dans la configuration du navigateur qui sera utilisée (généralement 16 pixels).

Exemple : taille de polices
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu et le prince d'Azkaban</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
body { font-size: 18px; font-family: Tahoma, Geneva, Verdana, sans-serif; } h3 { font-size: 1.5rem; /* 18px X 1.5 = 24px */ } p:first-of-type { font-size: 1rem; /* 18px X 1 = 18px */ } p:nth-of-type(2) { font-size: 0.888889rem; /* 18px X 0.088889 = 16px */ } p:nth-of-type(3) { font-size: 0.7222222em; /* 18px X 0.722222 = 13px */ } p:last-of-type { font-size: 0.6111111em; /* 18px X 0.611111 = 11px */ }

Le seul frein à l'utilisation du `rem` est la persistance des anciennes générations de navigateurs qui ne supportent pas cette unité. Voir http://caniuse.com/#feat=rem

### Taille en pourcentage

L'unité de taille `%` fonctionne de la même façon que l'unité `em`.

Spécifier une taille de police en pourcentage définit une taille relativement à la taille de l'élément parent.

La taille de l'élément parent, quelle qu'elle soit, représente 100%. Si on veut diminuer la taille de l'élément enfant on donne une valeur inférieure à 100 et si on veut augmenter la taille de l'enfant on donne une valeur supérieure à 100.
Par exemple, si la taille du parent est de 16 pixels, définir la taille d'un enfant à 81.25% donnera 13 pixels (16 * 81.25 / 100), et définir la taille à 125% donnera 20 pixels (16 * 125 / 100).

Exemple : taille de polices
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3>La Guerre des Etoiles du Milieu et le prince d'Azkaban</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la Fédération de l'Empire du Commerce de la République se battent contre les Méchants Gobelins de la Comté du Mordor de l'infâme Sauron. </p> <p>Les troupes droïdes sont en difficulté sur bien des planètes de la Galaxie envahies par des hordes de trolls et d'elfes nains.</p> <p>Tout semble perdu, mais sur la planète Coudbar le magicien Harry Cover a enfin pu épouser Laure Voldemort. Acompagné de ses fidèles Ron et Hermione il prend la tête d'une armée de Glandus pour reconquérir le trône de ses parents.</p> <p>De plus en plus portnawak les scénarios chez Disney.</p> </body> </html>
Fichier CSS : styles.css
body { font-size: 16px; font-family: Tahoma, Geneva, Verdana, sans-serif; } h3 { font-size: 200%; /* 16px X 200 / 100 = 32px */ } p:first-of-type{ font-size: 100%; /* 16px X 100 / 100 = 16px */ } p:nth-of-type(2) { font-size: 81.25%; /* 16px X 81.25 / 100 = 13px */ } p:nth-of-type(3) { font-size: 68.75%; /* 16px X 68.75 / 100 = 11px */ } p:last-of-type { font-size: 118.75%; /* 16px X 118.75 / 100 = 19px */ }

Comme le pourcentage fonctionne de la même façon que l'unité `em`, on a les mêmes travers pour le cumul de diminutions ou d'augmentations quand les éléments sont imbriqués trop profondément.