Famille de polices pour le Web

 

Cette section a besoin d'être recyclée (mars 2020).
Une réorganisation et une clarification du contenu sont nécessaires. Améliorez-la ou discutez des points à améliorer.

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é.

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.

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).

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.

Dans de nombreuses installations, ces polices sont souvent absentes. Les polices cursives sont alors remplacées par une des polices génériques par défaut (avec ou sans empattement) du moteur de rendu (et éventuellement configurée par l’utilisateur dans les réglages du navigateur).

Dans de nombreuses installations, ces polices sont souvent absentes. Les polices décoratives sont alors remplacées par une des polices génériques par défaut (avec ou sans empattement) du moteur de rendu (et éventuellement configurée par l’utilisateur dans les réglages du navigateur). Dans certains cas (par exemple les polices décoratives dites « brisées », il peut être utile de préciser une famille générique préférée à celle de leur classification normale, afin de préserver leur lisibilité si elles sont substituées par une autre dans leur utilisation dans un texte normal.

Toutes les propriétés qui permettent de déterminer la police de caractères utilisée pour le rendu effectif du texte ne sont pas indiquées par la seule indication de la famille de polices en CSS. D’autres aspects sont contrôlés séparément^[2]:

Le style d’orientation des polices (normal pour les caractères droits ou « romains », italic ou oblique pour les caractères « penchés ») est indiqué séparément de la famille de polices par la propriété CSS font-style:. Ce style intervient en premier lieu pour sélectionner la police qui sera utilisée parmi celles candidates qui existent au sein d’une même famille de polices.

Cette propriété de style est utilisée indirectement en HTML avec la valeur font-style: italic par le balisage du texte avec les éléments cite (citation dans un paragraphe), address (indication d’une adresse postale), var (désignation symbolique d’une valeur variable), em (pour emphasize : mise en valeur) et i (pour italic : italique), selon les pratiques les plus courantes au sein des navigateurs, mais cette indication de style est modifiable dans une feuille de style séparée du document^[3].

Des familles de polices comprennent plusieurs variantes pour les lettres minuscules, permettant par exemple leur rendu en petites capitales. Les fichiers de polices numériques comprennent incluent souvent ces variantes sans leur assigner de nom de famille spécifique car ces variantes ne concernent qu’une partie du jeu de caractères que ces polices supportent en plusieurs variantes, mais les fichiers de polices peuvent aussi exister en variantes séparées au sein de la même famille. CSS définit la propriété font-variant permettant de sélectionner la variante normal ou smallcaps (petites capitales) à utiliser^[4].

La graisse des polices de caractères utilisées n’est pas déterminée par l’indication des familles de polices, mais se définit séparément en CSS par la propriété font-weight: qui peut prendre des valeurs numériques entre 100 et 900, ou symboliques^[5]:

• font-weight: normal (équivalent à font-weight: 400) pour la graisse normale ; les navigateurs utilisent parmi les polices candidates celle qui indique la valeur de graisse la plus approchante.
• font-weight: bold (équivalent à font-weight: 700) pour le style gras usuel.
• font-weight: bolder pour un niveau de graisse plus important, si disponible (sans jamais pouvoir excéder la valeur 900).
• font-weight: lighter pour un niveau de graisse moins important (caractères dits « légers »), si disponible (sans jamais pouvoir devenir inférieur à 100).

Cette propriété de style est utilisée indirectement en HTML avec la valeur font-weight: bolder par le balisage du texte avec les éléments strong (marque d’insistance sur un passage de texte important) et b (pour bold : gras), ainsi que par les balises de cellules d’entête de tableau (th pour table cell header : cellule d’entête) et les balises de titres de section (h1, ..., h1, pour heading : titre de section), selon les pratiques les plus courantes au sein des navigateurs, mais cette indication de style est modifiable dans une feuille de style séparée du document^[3].

Les familles de polices fantaisie ou décoratives « ultragrasses » (telles que celles citées ci-dessus) ont souvent par elles-mêmes un niveau de graisse élevé qui supporte mal un engraissement supplémentaire au-delà de la graisse normale, car cela nuit à la lisibilité de leurs traits qui alors se confondent, notamment si l’engraissement est produit artificiellement par le moteur de rendu par une surimpression simplement décalée horizontalement. Ces polices existent en tant que famille de police séparée en raison de limitation au sein des moteurs de rendu (qui souvent ne reconnaissent que deux niveaux de graisse : normal et bold) pour les classer parmi les autres polices composant leur famille de base et obtenir le niveau de graisse voulu.

Le corps des caractères est la propriété de style qui influence le moins la sélection de la police de caractères finalement utilisée pour le rendu du texte. Elle s’indique avec la propriété font-size:^[6] en CSS (ou indirectement avec l’attribut size de la balise dépréciée font en HTML^[7]).

Ce critère qui était déterminant pour sélectionner les anciennes polices bitmap (qui sont encore utilisées pour un rendu dans sur des dispositifs matériels ou logiciels simples), afin de préserver la lisibilité du texte, l’est beaucoup moins avec les polices vectorielles utilisées par les moteurs de rendu graphique actuels.

En revanche le corps influence légèrement les dimensions relatives des glyphes qui seront rendus : l’ajustement de taille des œils de glyphes n’est pas complètement proportionnel au corps indiqué et des substitutions de polices (ou des simplifications ou altérations visuelles de glyphes) peuvent avoir lieu à des corps différents.

Le moteur de rendu influence directement le choix de la police de caractères qui sera finalement utilisé, si les caractères à afficher ne sont supportés par aucune des polices indiquées dans la famille de polices. Dans certains cas, les polices génériques ne suffisent pas à trouver une police appropriée permettant d’afficher les caractères demandés, car elles se limitent souvent à définir une police appropriée uniquement pour certaines écritures alphabétiques (latine, grecque, cyrillique), lesquelles peuvent être configurées dans les paramètres personnalisables du moteur (dans les options de polices du navigateur Web par exemple). Si le moteur de rendu s’arrête là, il affichera les caractères manquants sous forme de point d’interrogation ou de rectangle, sélectionné dans la première police listée dans la famille de polices indiquée dans la feuille de style CSS.

Mais des moteurs de rendus plus intelligents peuvent aussi tenter de rechercher d’autres polices capables d’afficher ces caractères et procéder à des substitutions de polices supplémentaires n’entrant dans aucune des cinq familles de polices génériques standards, simplement en identifiant le système d’écriture (voire la langue si elle est déterminée) utilisé dans le texte codé (à partir des propriétés Unicode des caractères codés dans le texte). Certains moteurs de rendus permettent alors de définir les polices préférées pour chaque système d’écriture (éventuellement aussi en fonction de la langue si elle peut influer, notamment pour les sinogrammes), et de préciser encore une autre police par défaut (police dite « Unicode ») pour les systèmes d’écriture non encore définis parmi les autres paramètres.

Et si aucune police ne peut être trouvée par ce moyen, le moteur peut aussi tenter d’afficher un glyphe par défaut permettant d’identifier le caractère manquant ou le système d’écriture auquel il appartient (depuis une police interne, dite de « fallback »), grâce aux propriétés Unicode des points de code concernés trouvés dans le texte, plutôt qu’un simple point d’interrogation ou un rectangle.

Bien que ces propriétés n’influencent pas la sélection de la police de caractères qui sera utilisée en fonction des familles de polices indiquées, elles sont importantes à prendre à compte afin d’indiquer une liste de familles de polices prenant en compte correctement certains aspects visuels de leur rendu effectif par le moteur de rendu, et obtenir la mise en page souhaitée.

Même pour des polices de caractères appartenant au même groupe générique de familles de polices, et rendues avec le même style d’orientation, la même variante, la même graisse et le même corps, il existe des différences importantes de hauteur visuelle des œils des caractères, ce qui peut nuire à leur lisibilité notamment dans les petites tailles d’œil, en cas de substitution d’une police par une autre.

Le W3C définit une nouvelle propriété CSS (encore expérimentale) font-size-adjust:^[8] qui permet de régler la hauteur visuelle relative des caractères minuscules par rapport à leur taille spécifiée selon la hauteur de leurs majuscules (avec une valeur numérique appelée « rapport d’aspect »), afin de préserver la lisibilité et l’alignement vertical du texte mis en page. Bien que cette propriété ne soit pas encore finalisée, son introduction a été maintenue dans les différentes versions jusqu’à la spécification actuelle en cours de finalisation.

Si la propriété permet d’obtenir la hauteur visuelle souhaitée, elle agit en modifiant proportionnellement la taille d’œil des polices de substitution afin que son rendu dans la nouvelle taille corresponde avec la hauteur visuelle de la première famille de polices indiquée à sa hauteur visuelle normale (1em) dans la famille de polices. Par conséquent, elle modifiera aussi la largeur relative du texte rendu, mais elle n’influe pas sur la sélection de la police de caractères utilisée.

Les polices de caractères n’indiquent pas toujours la hauteur d’interlignage qui leur permet de s’afficher sans déborder sur une autre ligne. Le plus souvent l’interlignage est une propriété du système d’écriture utilisé (même si une valeur minimale égale à 20 % du corps suffit généralement), mais certaines polices décoratives ou créées pour permettre le rendu de plus nombreux signes diacritiques peuvent nécessiter :

1. soit un corps plus grand à taille d’œil égal (ce qui réduira aussi la taille des œils à corps égal, et donc peut nuire à la lisibilité du texte dans des tailles de corps insuffisantes),
2. soit un interlignage plus grand à corps égal (les tailles d’œils ne sont pas modifiées, mais un interlignage insuffisant les fera déborder sur les lignes adjascentes, ce qui peut ne pas être souhaitable pour la lisibilité).

La solution utilisée dépend de la conception de la police utilisée (il n’est pas encore possible en CSS de préciser la hauteur d’œil voulue, puisqu’on ne précise que le corps). Les typographes semblent préférer la seconde solution, plus générale, mais la première solution est courante dans les polices informatiques, notamment celles pour certaines écritures sud-asiatiques à la graphie complexe (dans lesquelles les œils sont proportionnellement plus petits à corps égal pour prendre en compte de plus nombreux et fréquents signes diacritiques ou des ligatures disposées verticalement dans le corps) car elle simplifie la détermination de l’interlignage nécessaire qui n’aura pas besoin d’être ajusté pour éviter les débordements.

D’autre part, des polices décoratives (ou des paramètres optionnels d’enrichissement de style) peuvent aussi faire déborder volontairement certains œils de caractères plus largement au-delà de leur corps et de l’interlignage standard, et donc sur les lignes adjascentes où ces œils étendus vont apparaître en surimpression.

L’interlignage ne participe pas à la sélection des polices de caractères utilisées au sein d’une même famille indiquée ; il sera précisé en CSS séparément de la famille de polices, au moyen de la propriété line-height: qui permet de préciser l’écart de position entre deux lignes de texte successives, c’est-à-dire la somme du corps et de l’interlignage^[9].

L’approche des polices à chasse fixe n’est pas toujours insensible aux styles gras ou italique utilisés en sus de l’indication de la famille, et peut produire du texte plus large que le style normal, notamment dans les petites tailles ou pour des valeurs de graisse importantes (la seule exception étant la famille « Courier » dans la table ci-dessus), et rien ne garantit qu’une police à chasse fixe sera utilisée en cas de substitution d’une police par une autre.

De plus, certains systèmes d’écriture (par exemple les sinogrammes et d’autres écritures essentiellement logographiques) ne sont rendus normalement qu’avec une chasse fixe, laquelle n’est pas celle préférée pour nombre d’écritures essentiellement phonographiques (comme l’alphabet latin). En revanche, la sous-classification W3C entre polices à empattement et celles sans empattement peut rester pertinente dans ces écritures qui peuvent distinguer ces deux styles (dont un sera souvent plus dépouillé et sans empattement, souvent préféré pour un rendu lisible à l’écran, et l’autre utilisé dans des présentations plus traditionnelles et un rendu imprimé avec une résolution suffisante). L’indication d’une chasse fixe n’influencera normalement pas l’affichage des écritures qui naturellement l’utilisent, mais empêchera de sélectionner le style d’empattement désiré. Toutefois, en raison de l’étendue des écritures logographiques (qui comprennent des jeux de caractères souvent très importants), il n’est pas toujours possible de faire une sélection pertinente entre les deux styles d’empattement, et la sélection se fera surtout en fonction des autres caractères alphabétiques présents dans le texte à mettre en forme avec les caractères logographiques qui conserveront leur chasse fixe « naturelle ».

Au sein d’un même groupe de familles ou même de la famille de polices générique associée, des différences considérables existent dans l’approche naturelle et la hauteur visuelle des caractères, selon la famille de police effectivement utilisée. Les familles de polices doivent donc être listées avec soin afin de vérifier que la substitution d’une famille de polices listée par une autre dans cette liste produira la mise en page attendue.

Au sein d’une police de caractères, les glyphes représentant les caractères définissent aussi chacun un interlettrage horizontal proportionnel par défaut, ainsi que des paramètres d’approche variable entre certaines paires de glyphes. Cet interlettrage détermine la dimension horizontale relative du texte par rapport à l’indication de la taille d’œil (l’approche n’est pas spécifiée par la seule indication de la famille de police). Une propriété de style séparée letter-spacing: permet de modifier l’approche entre les glyphes représentant les caractères ou leurs ligatures mais cela n’influe normalement pas sur la sélection de la police de caractères utilisée^[10].

• Une partie de cet article est issue de la traduction de l’article Font family (HTML) sur Wikipédia anglophone.
• Core fonts for the Web sur Wikipédia anglophone.

• Graisse (typographie)
• World Wide Web Consortium (W3C) ; standards associés :
  • Cascading style sheets (CSS)
  • Hypertext Markup Language (HTML)
  • Extensible HyperText Markup Language (XHTML)
  • Scalable Vector Graphics (SVG)
• Police numérique
  • Police de caractères
  • Format OpenType
  • Format TrueType
  • Fonte PostScript
  • Metafont, langage de description de polices, créé par Donald Knuth pour son système de mise en page TeX.

•   Portail de l’informatique
•   Portail de l’écriture
•   Portail de la typographie