Famille de polices pour le Web

Dans les documents numériques mis en page et enrichis avec des indications de style CSS (Cascading Style Sheet) (par exemple HTML, XHTML, ou SVG) selon les standards du World Wide Web Consortium (W3C), une famille de polices ou famille de fontes (propriété font-family: en CSS, ou l’ancien attribut face de l’élément HTML déprécié font) sert à préciser la police de caractères qui sera finalement utilisée par le moteur de rendu (d’un navigateur Web par exemple) pour mettre en forme le texte du document. La famille de polices peut servir aussi bien pour l’affichage du texte à l’écran, que pour le rendu imprimé du texte ou sa reproduction graphique sur un autre dispositif.

Si ce bandeau n'est plus pertinent, retirez-le. Cliquez ici pour en savoir plus.

Cet article sur l'informatique doit être recyclé (juillet 2010).

Une réorganisation et une clarification du contenu paraissent nécessaires. Améliorez-le, discutez des points à améliorer ou précisez les sections à recycler en utilisant {{section à recycler}}.

Cette section a besoin d'être recyclée (mars 2020).
Une réorganisation et une clarification du contenu sont nécessaires.

La famille de polices indiquée, conjointement avec d’autres attributs ou propriétés de style de présentation (dont notamment la hauteur d’œil, le niveau de graisse, ou des variantes de style de police), ainsi que la nature du texte ainsi mis en forme (notamment l’écriture codée dans le texte lui-même, ou le balisage de la langue utilisée, qui peuvent influencer le choix de la police finalement sélectionnée) sera utilisée pour déterminer une police de caractères adéquate, puis la fonte de caractères supportée par cette police et à appliquer au texte présent dans le document pour son rendu final et sa mise en page. Par exemple :

<style>
.text { font-family: times, serif; font-size:14pt; font-style:italic; }
</style>
<p class="text">
</p>

<p style="font-family: Times, serif; font-size:14pt; font-style:italic; font-variant: normal">
Exemple de texte formatté avec CSS en ligne.
</p>

<p><i><span style="font-family: Times, serif;font-size: 3;">
Exemple de texte formatté avec la balise FONT dépréciée.
</span></i></p>

En CSS (Cascading Style Sheet), une famille de polices (indiquée par la valeur de la propriété font-family: ou celle de l’attribut face en HTML) consiste en fait en un jeu informel de polices informatiques, mentionnées par un de leurs noms possibles (certaines polices peuvent avoir plusieurs noms simultanément pour différentes langues), et qui des apparences typographiques comparables, ou disposent au minimum du support de la même écriture ou des caractères référencés par le texte.

La même famille de polices inclut ses différentes tailles et ses différents styles (romain, italique, petites capitales, décorations cursives supplémentaires, variantes traditionnelles), ainsi que ses différents graisses (telle que régulier, fin, ou gras).

Le navigateur Web ne sera capable d’appliquer une police informatique que si celle-ci est disponible, ce qui n’est pas toujours le cas. Les créateurs de documents peuvent cependant mentionner une liste de polices, dans un ordre préférentiel, à utiliser pour le rendu du texte et la mise en page. La liste des polices est séparée par des virgules (comme dans l’exemple ci-dessus).

Pour éviter des résultats inattendus, la liste peut se terminer par l’indication d’une ou plusieurs des 5 familles de polices génériques standards qui permettent généralement de classer les différentes familles de polices. Toutefois, ces familles génériques ne sont souvent bien adaptées qu’aux systèmes d’écriture alphabétiques qui disposent de ces différences possible de style pour un même texte. Certaines écritures n’offrent pas toujours une telle variété, et finalement le moteur de rendu pourra souvent, si aucune police indiquée ne convient pour rendre correctement le texte, opter pour une police par défaut dont le choix lui sera propre ou dépendra des réglages et préférences de l’utilisateur.

Selon les moteurs de rendu utilisés (dans un navigateur par exemple), un utilisateur peut parfois outrepasser la police définie par l’auteur du document. Cela peut être fait pour des raisons personnelles de goût, mais peut aussi être nécessaire à cause de limitations physiques de l’utilisateur — par exemple le besoin d’utiliser une taille d’œil différente, ou éviter certaines combinaisons de couleurs — ou pour des raisons culturelles — par exemple les difficultés à lire certains styles auquel l’utilisateur n’a pas été habitué.

Syntaxe et valeurs possibles parmi les familles de polices

Les noms de polices indiqués, s’ils contiennent autre chose que des lettres ou chiffres et ne permettent pas de les traiter comme des identificateurs, par exemple des espaces ou ponctuations, doivent être mentionnés entre marques de citation simples ou double (apostrophe ou guillemets doubles, dans leur forme dépouillée issue du jeu de caractères ASCII), conformément à la syntaxe attendue en CSS ou HTML. La virgule sert cependant de séparateur obligatoire si plusieurs noms de familles de police sont listés.

De plus les versions récentes de CSS permettent aussi, grâce à la propriété @font-face{ ... } incluse dans une feuille de style, de définir des noms de familles de polices supplémentaires utilisables dans un document, à partir d’une collection de polices et de leurs propriétés, afin :

d’améliorer la sélection de la police informatique qui sera finalement utilisée parmi les polices supportées sur la machine de l’utilisateur, ou
d’éviter d’avoir à répéter ces listes de polices dans différentes règles de style ou dans le document lui-même, ou
d’inclure une police plus précise et spécifique qui sera transportée avec le document incorporant la feuille de style (lorsque les restrictions de droit d’auteur relatif au fichier de police informatique l’y autorisent).

Tout autre nom listé dans les valeurs de la propriété font-family: indique un des noms de polices informatiques spécifiques installées sur la machine de l’utilisateur. Une famille de police peut ainsi mentionner un nom de police spécifique mais le résultat dépendra fortement des polices installées sur la machine de l’utilisateur et du logiciel utilisé pour le rendu final du document (un logiciel pourra ne pas reconnaître certains formats de fichiers de police installés sur la même machine pour un autre logiciel)^[1].

Les polices informatiques possèdent parfois simultanément plusieurs noms synonymes (par exemple des traductions, ou translittérations), qui doivent être reconnus de façon identique par les moteurs de rendus^[1].

De plus, pour des raisons de compatibilité avec d’autres logiciels ou systèmes, les moteurs de rendu peuvent reconnaître des synonymes supplémentaires. Par exemple, une installation par défaut de Microsoft Internet Explorer, affichera toujours serif ou Times avec la police Times New Roman, et sans-serif ou Helvetica avec la police Arial.

Familles de polices génériques

Les cinq familles de polices génériques prédéfinies en CSS sont les suivantes^[1] (pour des raisons de simplification, elles ne sont présentées ici que dans un style normal et une taille unique).

Davantage d’informations Description, Exemple (dépendant des polices installées) avec faux-texte ...

Famille (CSS)	Description	Exemple (dépendant des polices installées) avec faux-texte
`sans-serif`	Famille générique comprenant des polices sans empattement pour le texte d’usage général (souvent préférées pour le rendu à l'écran à cause de limitations de résolution d’affichage). La chasse sera le plus souvent proportionnelle, mais pourra être fixe avec certains systèmes d’écriture ou sur certains dispositifs.	The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
`serif`	Famille générique comprenant des polices à empattement pour le texte d’usage général (souvent préférées dans les documents imprimés). La chasse sera le plus souvent proportionnelle, mais pourra être fixe avec certains systèmes d’écriture ou sur certains dispositifs.	The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
`monospace`	Famille générique comprenant des polices à chasse fixe (permettant d’aligner verticalement les caractères de lignes successives, notamment dans la présentation de données et certains codes sources). Les polices peuvent avoir une présentation avec ou sans empattement selon leur destination.	The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
`cursive`	Famille générique comprenant des polices dites « cursives », cherchant à imiter l’écriture manuscrite (jointive ou non).	The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
`fantasy`	Famille générique comprenant des polices dites « fantaisies » ou décoratives (comprenant des enrichissements ou formes inhabituelles), et habituellement non destinée à la lecture de longs textes.	The quick brown fox jumps over the lazy dog. 0123456789. Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Fermer

Ne sont présentées ici que des familles de polices pour les écritures alphabétiques (latine, grecque ou cyrillique) qui sont souvent (mais pas toujours) supportées simultanément dans les mêmes polices informatiques, et qui sont fournies avec les systèmes d'exploitation les plus courants. De nombreuses autres familles sont disponibles, soit distribuées gratuitement (certaines sont libres), soit vendues séparément ou avec certains logiciels spécialisés.

Toutes les familles de polices sont présentées avec les mêmes hauteurs d’œil (propriété font-size: en CSS). On notera qu’en dépit de leur classification (renforcée ici par l’utilisation alternative d’une famille de polices générique si la première famille de polices mentionnée n’est pas installée) et des mêmes tailles d’œil, ces polices présentent des variations considérables de leur taille visuelle car le rapport de hauteur entre capitales et minuscules dépend du style effectif de conception de chaque famille de police présentée.

En cas d’absence d’une des familles de polices, une des autres familles de polices du même groupe ou une famille de police générique devrait être utilisée, produisant une apparence identique. Dans les tables ci-dessous, les noms de familles génériques sont indiqués en italique et ne représentent aucune famille de polices précise.