Typographie Web - Web typography
La typographie Web fait référence à l'utilisation de polices sur le World Wide Web . Lorsque HTML a été créé pour la première fois, les polices et les styles étaient contrôlés exclusivement par les paramètres de chaque navigateur Web . Il n'y avait aucun mécanisme permettant aux pages Web individuelles de contrôler l'affichage des polices jusqu'à ce que Netscape introduise l' fontélément en 1995, qui a ensuite été normalisé dans la spécification HTML 3.2. Cependant, la police spécifiée par l' fontélément devait être installée sur l'ordinateur de l'utilisateur ou une police de secours, telle que la police sans-serif ou monospace par défaut d'un navigateur , serait utilisée. La première spécification des feuilles de style en cascade a été publiée en 1996 et offrait les mêmes fonctionnalités.
La spécification CSS2 a été publiée en 1998 et a tenté d'améliorer le processus de sélection des polices en ajoutant la correspondance, la synthèse et le téléchargement des polices. Ces techniques n'ont pas été très utilisées et ont été supprimées dans la spécification CSS2.1. Cependant, Internet Explorer a ajouté la prise en charge de la fonctionnalité de téléchargement de polices dans la version 4.0 , publiée en 1997. Le téléchargement de polices a ensuite été inclus dans le module de polices CSS3 et a depuis été implémenté dans Safari 3.1 , Opera 10 et Mozilla Firefox 3.5 . Cela a par la suite accru l'intérêt pour la typographie Web, ainsi que l'utilisation du téléchargement de polices.
CSS1
Dans la première spécification CSS, les auteurs spécifiaient les caractéristiques des polices via une série de propriétés :
font-familyfont-stylefont-variantfont-weightfont-size
Toutes les polices ont été identifiées uniquement par leur nom. Au-delà des propriétés mentionnées ci-dessus, les concepteurs n'avaient aucun moyen de styliser les polices et aucun mécanisme n'existait pour sélectionner les polices non présentes sur le système client.
Polices sécurisées pour le Web
Les polices sécurisées pour le Web sont des polices susceptibles d'être présentes sur un large éventail de systèmes informatiques et utilisées par les auteurs de contenu Web pour augmenter la probabilité que le contenu s'affiche dans la police choisie. Si un visiteur d'un site Web n'a pas la police spécifiée, son navigateur essaie de sélectionner une alternative similaire, basée sur les polices de secours et les familles génériques spécifiées par l'auteur ou il utilise la substitution de police définie dans le système d'exploitation du visiteur.
Les polices de base de Microsoft pour le Web
Pour s'assurer que tous les utilisateurs du Web disposent d'un ensemble de polices de base, Microsoft a lancé l' initiative Core fonts for the Web en 1996 (terminée en 2002). Les polices publiées incluent Arial , Courier New , Times New Roman , Comic Sans , Impact , Georgia , Trebuchet , Webdings et Verdana — en vertu d'un CLUF qui les rendait librement distribuables mais limitait également certains droits à leur utilisation. Leur taux de pénétration élevé en a fait un incontournable pour les concepteurs Web. Cependant, la plupart des distributions Linux n'incluent pas ces polices par défaut.
CSS2 a tenté d'augmenter les outils disponibles pour les développeurs Web en ajoutant une synthèse de polices, une meilleure correspondance des polices et la possibilité de télécharger des polices à distance.
Certaines propriétés de police CSS2 ont été supprimées de CSS2.1 et incluses plus tard dans CSS3.
Polices de remplacement
La spécification CSS permet à plusieurs polices d'être répertoriées comme polices de secours. En CSS, la font-familypropriété accepte une liste de polices séparées par des virgules à utiliser, comme ceci :
font-family: "Nimbus Sans L", Helvetica, Arial, sans-serif;
La première police spécifiée est la police préférée. Si cette police n'est pas disponible, le navigateur Web tente d'utiliser la police suivante dans la liste. Si aucune des polices spécifiées n'est trouvée, le navigateur affiche sa police par défaut. Ce même processus se produit également caractère par caractère si le navigateur essaie d'afficher un caractère non présent dans la police spécifiée.
Familles de polices génériques
Pour donner aux concepteurs Web un certain contrôle sur l'apparence des polices sur leurs pages Web, même lorsque les polices spécifiées ne sont pas disponibles, la spécification CSS autorise l'utilisation de plusieurs familles de polices génériques . Ces familles sont conçues pour diviser les polices en plusieurs catégories en fonction de leur apparence générale. Elles sont généralement spécifiées comme la dernière d'une série de polices de secours, en dernier recours dans le cas où aucune des polices spécifiées par l'auteur n'est disponible. Pendant plusieurs années, il y avait cinq familles génériques :
- Polices qui n'ont pas de marques décoratives, ou empattements, sur leurs lettres. Ces polices sont souvent considérées comme plus faciles à lire sur les écrans.
- Les polices qui ont des marques décoratives, ou empattements, présentes sur leurs caractères. Ces polices sont traditionnellement utilisées dans les livres imprimés.
- Polices dans lesquelles tous les caractères sont de largeur égale.
- Des polices qui ressemblent à une écriture cursive. Ces polices peuvent avoir un aspect décoratif, mais elles peuvent être difficiles à lire dans les petites tailles, elles sont donc généralement utilisées avec parcimonie.
- Polices qui peuvent contenir des symboles ou d'autres propriétés décoratives, mais qui représentent toujours le caractère spécifié.
Les polices CSS fonctionnent en brouillon 4 avec une prise en charge moindre du navigateur
Système-ui
- Polices par défaut sur un système donné : le but de cette option est de permettre au contenu Web de s'intégrer à l'apparence du système d'exploitation natif.
ui-serif
- Polices par défaut sur un système donné dans un style serif
ui-sans-serif
- Polices par défaut sur un système donné dans un style sans empattement
ui-monospace
- Polices par défaut sur un système donné dans un style monospace
ui-arrondi
- Polices par défaut sur un système donné dans un style arrondi
- Polices utilisant des emoji
- Polices pour formules et expressions mathématiques complexes.
- Caractères chinois qui se situent entre les formes Song serif et les formes cursives Kai. Ce style est souvent utilisé pour les documents gouvernementaux.
Polices Web
Histoire
Une technique pour se référer et télécharger automatiquement des polices distantes a été spécifiée pour la première fois dans la spécification CSS2, qui a introduit la construction. À l'époque, la récupération de fichiers de polices sur le Web était controversée, car les polices destinées à être utilisées uniquement pour certaines pages Web pouvaient également être téléchargées et installées en violation de la licence de police.
@font-face
Microsoft a d'abord ajouté la prise en charge des polices EOT téléchargeables dans Internet Explorer 4 en 1997. Les auteurs devaient utiliser l' outil propriétaire WEFT pour créer un fichier de polices de sous-ensemble pour chaque page. EOT a montré que les polices Web pouvaient fonctionner et que le format était utilisé dans des systèmes d'écriture non pris en charge par les systèmes d'exploitation courants. Cependant, le format n'a jamais été largement accepté et a finalement été rejeté par le W3C.
En 2006, Håkon Wium Lie a lancé une campagne contre l'utilisation d'EOT et a plutôt demandé aux navigateurs Web de prendre en charge les formats de police couramment utilisés. La prise en charge des formats de polices TrueType et OpenType couramment utilisés a depuis été implémentée dans Safari 3.1 , Opera 10 , Mozilla Firefox 3.5 et Internet Explorer 9 .
En 2010, la méthode de compression WOFF pour les polices TrueType et OpenType a été soumise au W3C par la Fondation Mozilla , Opera Software et Microsoft , et les navigateurs ont depuis ajouté la prise en charge.
Google Fonts a été lancé en 2010 pour servir des polices Web sous des licences open source . D'ici 2016, plus de 800 familles de polices Web sont disponibles.
Les polices Web sont devenues un outil important pour les concepteurs de sites Web et, depuis 2016, la majorité des sites utilisent des polices Web.
Formats de fichiers
En utilisant une technique d'intégration CSS spécifique , il est possible d'intégrer des polices telles qu'elles fonctionnent avec IE4+, Firefox 3.5+, Safari 3.1+, Opera 10+ et Chrome 4.0+. Cela permet à la grande majorité des internautes d'accéder à cette fonctionnalité. Certaines fonderies commerciales s'opposent à la redistribution de leurs polices. Par exemple, Hoefler & Frere-Jones affirment que, bien qu'ils « ... avec enthousiasme [soutiennent] l'émergence d'un Web plus expressif dans lequel les concepteurs peuvent utiliser en ligne de manière sûre et fiable des polices de haute qualité », la fourniture actuelle de polices utilisant est considérée comme « distribution illégale » par la fonderie et n'est pas autorisée. Au lieu de cela, Hoefler & Co. propose un système de livraison de polices propriétaire enraciné dans le cloud. De nombreuses autres fonderies de type commercial abordent la redistribution de leurs polices en proposant une licence spécifique, appelée licence de polices Web, qui permet l'utilisation du logiciel de polices pour afficher du contenu sur le Web, une utilisation normalement interdite par les licences de bureau de base. Naturellement cela n'interfère pas avec les fontes et fonderies sous licences libres.
@font-face@font-face
TrueDoc
TrueDoc , bien qu'il ne s'agisse pas spécifiquement d'une spécification de polices Web, a été le premier standard pour l'intégration de polices. Il a été développé par la fonderie de types Bitstream en 1994 et est devenu supporté nativement dans Netscape Navigator 4, en 1996. En raison des restrictions de licence open source, Netscape n'ayant pas pu publier le code source de Bitstream, le support natif de la technologie a pris fin lorsque Netscape Navigator 6 a été publié. Un ActiveX plugin était disponible pour ajouter le support TrueDoc à Internet Explorer , mais la technologie a dû rivaliser avec Microsoft de Embedded OpenType polices, qui avait pris en charge en mode natif dans le navigateur Internet Explorer depuis la version 4.0. Un autre obstacle était le manque d'outil open-source ou gratuit pour créer des polices Web au format TrueDoc, tandis que Microsoft a mis à disposition un outil gratuit de polices d'intégration Web pour créer des polices Web dans leur format.
OpenType intégré
Internet Explorer prend en charge l'incorporation de polices via la norme propriétaire Embedded OpenType depuis la version 4.0. Il utilise des techniques de gestion des droits numériques pour empêcher la copie et l'utilisation des polices sans licence. Un sous-ensemble simplifié d'EOT a été formalisé sous le nom de CWT ( Compatibility Web Type , anciennement EOT-Lite )
Image Vectorielle
La typographie Web s'applique au SVG de deux manières :
- Toutes les versions de la spécification SVG 1.1, y compris le sous-ensemble SVGT , définissent un module de polices permettant la création de polices dans un document SVG. Safari a introduit la prise en charge de bon nombre de ces propriétés dans la version 3. Opera a ajouté une prise en charge préliminaire dans la version 8.0, avec la prise en charge de plus de propriétés dans la 9.0.
- La spécification SVG permet à CSS de s'appliquer aux documents SVG de la même manière qu'aux documents HTML, et la règle peut être appliquée au texte dans les documents SVG. Opera a ajouté la prise en charge de cela dans la version 10, et WebKit depuis la version 325 prend également en charge cette méthode en utilisant uniquement les polices SVG .
@font-face
Polices graphiques vectorielles évolutives
Les polices SVG étaient une norme W3C de polices utilisant des graphiques SVG qui sont devenus un sous-ensemble des polices OpenType. Il autorisait les polices multicolores ou animées. C'était d'abord un sous-ensemble des spécifications SVG 1.1, mais il a été déprécié dans la spécification SVG 2.0. Les polices SVG en tant que format indépendant sont prises en charge par la plupart des navigateurs, à l'exception d'IE et de Firefox, et sont dépréciées dans Chrome (et Chromium). C'est maintenant généralement obsolète; la norme acceptée par la plupart des fournisseurs de navigateurs est le sous-ensemble de polices SVG inclus dans OpenType (puis le super-ensemble WOFF, voir ci-dessous), appelé SVGOpenTypeFonts . Firefox prend en charge SVG OpenType depuis Firefox 26.
TrueType/OpenType
La liaison aux polices TrueType (TTF) et OpenType (TTF/OTF) standard de l'industrie est prise en charge par Mozilla Firefox 3.5+, Opera 10+, Safari 3.1+ et Google Chrome 4.0+. Internet Explorer 9+ ne prend en charge que les polices dont les autorisations d'intégration sont définies sur installable.
Format de police Web ouvert
Le Web Open Font Format (WOFF) est essentiellement OpenType ou TrueType avec compression et métadonnées supplémentaires. WOFF est pris en charge par Mozilla Firefox 3.6+, Google Chrome 5+, Opera Presto et est pris en charge par Internet Explorer 9 (depuis le 14 mars 2011). Le support est disponible sur Safari de Mac OS X Lion à partir de la version 5.1.
Polices Unicode
Seules deux polices disponibles par défaut sur la plate-forme Windows , Microsoft Sans Serif et Lucida Sans Unicode , offrent un large répertoire de caractères Unicode . Un bogue dans Verdana (et la gestion différente de celui-ci par divers agents utilisateurs ) entrave sa facilité d'utilisation lorsque la combinaison de caractères est souhaitée.
Sur les plates - formes logicielles libres et open source telles que Linux , GNU Unifont et GNU FreeFont fournissent une large gamme de caractères Unicode .
Alternatives
Un obstacle courant dans la conception Web est la conception de maquettes qui incluent des polices qui ne sont pas sécurisées pour le Web. Il existe un certain nombre de solutions pour des situations comme celle-ci. Une solution courante consiste à remplacer le texte par une police Web sécurisée similaire ou à utiliser une série de polices de secours similaires.
Une autre technique est le remplacement d'image . Cette pratique consiste à superposer du texte avec une image contenant le même texte écrit dans la police souhaitée. C'est bon à des fins esthétiques, mais empêche la sélection de texte, augmente l'utilisation de la bande passante, est mauvais pour l' optimisation des moteurs de recherche et rend le texte inaccessible pour les utilisateurs handicapés.
L'utilisation de solutions basées sur Flash telles que sIFR est également courante . Ceci est similaire aux techniques de remplacement d'image, bien que le texte soit sélectionnable et rendu sous forme de vecteur. Cependant, cette méthode nécessite la présence d'un plugin propriétaire sur le système d'un client.
Une autre solution consiste à utiliser Javascript pour remplacer le texte par VML (pour Internet Explorer) ou SVG (pour tous les autres navigateurs).
Les services d'hébergement de polices permettent aux utilisateurs de payer un abonnement pour héberger en ligne des polices non sécurisées pour le Web. La plupart des services hébergent la police pour l'utilisateur et fournissent la déclaration CSS nécessaire .
@font-face
Un exemple de configuration CSS :
@font-face
@font-face {
font-family: 'Journal';
src: url('http://your-own.site/fonts/journal/journal.woff') format('woff'),
url('http://your-own.site/fonts/journal/journal.svg#Journal') format('svg'),
url('http://your-own.site/fonts/journal/journal.ttf') format('truetype'),
url('http://your-own.site/fonts/journal/journal.eot'),
url('http://your-own.site/fonts/journal/journal.eot?#iefix') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
Considérations pratiques
Dans la pratique, le navigateur Web utilisé par le public importe non seulement, mais également la façon dont son système d'exploitation est configuré. En 2010, le concepteur de caractères et consultant Thomas Phinney (vice-président de FontLab et anciennement d'Adobe) a écrit un processus étape par étape pour trouver la meilleure solution de rendu, qui, plus ou moins en plaisantant, utilise un grand nombre d' instructions goto . Un organigramme plus orienté visuellement a été publié la même année sur le forum Typophile par Miha Zajec.
Voir également
- Remplacement évolutif du flash Inman
- Liste des RFC comme mentionné dans WOFF (ébauche du 2009-10-23):
Remarques
- ^ Voir les polices de caractères open source et les listes de polices de caractères Unicode du logiciel libre pour ces polices.
Les références
Liens externes
- Spécification des polices CSS du W3C
- Typoscan est un outil de conception qui vous aide à numériser la typographie de n'importe quel site Web en moins d'une seconde.