Famille de polices pour le Web

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

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.

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 d’écriture 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 d’écriture 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 d’écriture 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’écritures 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.

Même pour des polices d’écriture 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 d’écriture utilisée.

Les polices d’écriture 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 d’écriture 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 d’écriture, 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 d’écriture utilisée[10].

• Une partie de cet article est issue de la traduction de l’article Font family (HTML) sur Wikipédia anglophone.
• Presentational markup 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 d’écriture
  • 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.