Si aucune indication n'est donnée sur la police de caractères et la taille à utiliser, les textes sont affichés avec les éléments de la configuration du navigateur.
Par défaut, la police sera généralement "Times new roman" pour la famille serif et "Arial" pour la famille sans-serif. La taille par défaut est quant à elle définie à 16 pixels.

Pour que la police choisie par l'auteur soit utilisée par le navigateur, il faut que cette police soit installée sur l'ordinateur du navigateur. Si ça n'est pas le cas, le navigateur utilisera la police par défaut de sa configuration. Il faut aussi que l'utilisateur n'ait pas précisé dans la configuration que ses propres choix sont prioritaires sur ceux de l'auteur des pages HTML. Configuration police dans Chrome | Configuration police dans Firefox Configuration police dans Internet Explorer

### La propriété font-family

Le choix d'une police de caractères pour afficher un texte se fait avec la propriété font-family dont la valeur est le nom d'une police.

    body {
    	font-family: Verdana;
    }

Si le nom de la police est un nom composé qui contient des espaces, le nom doit être entouré avec des guillemets.

    body {
    	font-family: "Lucida Grande";
    }

La casse n'a pas d'importance dans le nom des polices.

Exemple : famille 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</h3> <p>Il y a bien longtemps dans une lointaine galaxie, les Gentils Jedis de la <a href="gentils.html">Fédération de l'Empire du Commerce de la République</a> se battent contre les <a href="mechants.html">Méchants Gobelins de la Comté du Mordor</a> de l'infâme Sauron.</p> </body> </html>
Fichier CSS : styles.css
h3 { font-family: courier; } p { font-family: verdana; } a { font-family: "times new roman"; }

fontfamily.io donne des informations sur la présence de telle ou telle police sur tel ou tel OS.

### Liste de polices

Pour avoir plus de chance que la police spécifiée soit présente sur l'ordinateur du navigateur, on précise généralement plusieurs polices de caractères avec la propriété font-family. .

Les noms des polices doivent être séparés par une virgule.

    body {
    	font-family: Verdana, "Bitstream Vera Sans", "DejaVu Sans",
    				"Lucida Sans", "Lucida Grande", sans-serif;
    }

Voir aussi Les polices de caractères pour plus d'informations sur les familles de polices.

La déclaration sera interprétée par le navigateur de la façon suivante : si la police Verdana est sur le système il l'utilise, sinon si "Bitstream Vera Sans" est sur le système il l'utilise, sinon etc. Finalement si aucune des polices n'est installée, il utilisera la police sans-serif par défaut de sa configuration.

Terminez toujours votre liste avec l'un des mot-clés suivants selon la famille de polices que vous définissez :

- `serif` pour une famille de polices avec empattement,
- `sans-serif` pour une famille de polices sans empattement,
- `monospace` pour une famille de polices à espacement fixe,
- `cursive` pour une famille de polices cursive ou script,
- `fantasy` pour une famille de polices décoratives.

### Ratio d'aspect

Suivant la police utilisée, et à taille égale, un texte n'aura pas le même encombrement (espace occupé). C'est parce que toutes les polices n'ont pas le même ratio d'aspect (facteur de forme, rapport de forme ou rapport d'aspect). Certaines polices, et spécialement celles conçue pour l'affichage écran, sont plus larges et plus hautes que d'autres.

Différences de rapport d'aspect
Exemple : emcombrement
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h3 class="verdana">Texte en Verdana</h3> <p class="verdana">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> <h3 class="arial">Texte en Arial</h3> <p class="arial">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> <h3 class="times">Texte en Times New Roman</h3> <p class="times">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> </body> </html>
Fichier CSS : styles.css
.verdana { font-family: verdana; } .arial { font-family: arial; } .times { font-family: "Times New Roman"; } p { width: 300px; border: 1px solid #aaa; }

Quand on définit la liste des polices pour une font-family il faut mieux utiliser des polices qui ont un ratio d'aspect identique ou approchant pour que le passage éventuel d'une police à une autre par le navigateur n'ait pas d'effets trop visibles.
On peut faire par exemple les associations suivantes.

Familles sans-serif

- Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif
- Futura, "Trebuchet MS", Arial, sans-serif
- "Gill Sans", "Gill Sans MT", Calibri, sans-serif
- "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif
- "Helvetica Neue", Helvetica, Arial, sans-serif
- Verdana, Geneva, sans-serif
- "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif
- Geneva, Tahoma, Verdana, sans-serif
- Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif
- Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif
- Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif
- "Franklin Gothic Medium", Arial, sans-serif
- Tahoma, Geneva, Verdana, sans-serif

Familles serif

- Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif
- "Lucida Bright", Georgia, serif
- "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif
- "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif
- "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
- Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif
- "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif
- "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif
- "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif
- Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif
- Cambria, Georgia, serif
- "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif

Il ne faut jamais baser une mise en page sur le rendu visuel obtenu ponctuellement lors de la création de la page, et surtout ne jamais forcer des sauts de ligne pour " faire tenir" un texte dans un espace prédéfini. Si le navigateur passe d'une police à une autre, vous risqueriez d'avoir un texte mal affiché.

### Propriété héritée

La propriété font-family 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 police principale d'une page en mettant la propriété font-family sur l'élément body, ou sur l'élément html.

Exemple : héritage
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Les CSS</title> <link href="styles.css" rel="stylesheet"> </head> <body> <h4>Titre sans police précisée =&gt; Verdana héritée de body</h4> <p>Paragraphe sans police précisée =&gt; Verdana héritée de body</p> <h4 class="arial">Titre en Arial, définie par la classe</h4> <p class="arial">Paragraphe en Arial, définie dans la classe.</p> <div> Bloc div sans police précisée =&gt; Verdana héritée de body <p>Paragraphe dans le div, sans police précisée =&gt; Verdana héritée de body</p> </div> </body> </html>
Fichier CSS : styles.css
body { font-family: verdana; } .arial { font-family: arial; }