CSS et typographie : historique

Changer la typographie du texte affiché dans une page web était une fantaisie inutile pour Tim Berners-Lee lorsqu’il crée le langage html. Les 20 années suivantes vont donc voir se succéder des solutions bricolées.

Précédent | 7/11 | Suivant

1991 : HTML 1.0 et la gestion par le navigateur

Dans les premières années du web, le choix de la police des pages web était laissée au navigateur lui-même. Ce qui veut dire que la personne qui surfait sur le web (c’est le terme employé à cette époque) pouvait choisir sa typo préférée disponible dans le navigateur, et toutes les pages qu’il visualisait l’étaient avec cette police. C’est une logique que l’on retrouvera dans les premiers liseuses, qui emploie grosso modo le html pour afficher des livres électroniques. Les créateurs de page web ne disposent alors d’aucune possibilité de contourner ce fonctionnement du navigateur.

1995 : Le tag <font> et la création du langage CSS

La possibilité pour le créateur d’une page web d’imposer la typographie de son choix n’apparaitra qu’en 1995, 4 ans après la création du html donc. Alors que la guerre des navigateurs commence, Netscape qui ouvre cette possibilité en créant le tag <font>. Le tag sera introduit dans la norme HTML 3.2 en 1996.
Il est donc possible de demander au navigateur, via ce tag, d’utiliser une typographie spécifique pour toute la page et/ou des portions de celle-ci. Mais attention, la police choisie doit être présente dans le système de l’ordinateur qui affiche la page. PC, Mac, Unix et les systèmes utilisés à l’époque possèdent quelques typos en commun, le choix est donc assez restreint : times, times new roman, arial, helvetica, courier sont alors quasiment les seuls choix.

Le tag <font> est une aberration pour Tim Berners-Lee, parce qu’il ne correspond sémantiquement à rien. Il n’est pas donc étonnant que 1996 soit aussi l’année de la création du langage CSS par le W3C, l’organisme qu’il vient de créer en revenant travailler sur le sol américain (au prestigieux MIT). La première version du langage CSS permet donc comme la balise <font> de changer taille, couleur et typographie de portions de la page, sans devoir ajouter de balise non-sémantique. Mais la balise <font> sera longtemps utilisée, au grand désespoir de Tim Berners-Lee.

Avec <font> ou l’attribut css font-family, on peut donc spécifier une typo. Comme on ne peut jamais vraiment être sûr que la typo se trouve bien dans le système de visiteur du site, il est recommandé de déclarer plusieurs polices, par ordre de préférence. On termine par un terme générique : serif, sans-serif, monospace, fantasy ou cursive, qui laissent le navigateur choisir parmi les polices dont il dispose qui correspondent à ces catégories.

<font face="helvetica,arial, sans-serif">texte</font>

Remarquons que le tag font est obolète depuis xhtml 1 et html 5. Il n’est plus possible de l’utiliser dans les navigateurs contemporains.

h1 {
font-family: helvetica,arial, sans-serif;
}

Le code css est quand à lui toujours d’actualité.

1996 : Microsoft tente une uniformisation des typographies

Guerre des navigateurs oblige, Microsoft reprend la main de l’innovation et propose en 1996 un pack de typo pour le web (le projet Core fonts for the Web), téléchargeable gratuitement, et qui se compose d’un ensemble de typos true type libres de droit, ce qui ne lui ressemble pas. Il s’agit des typos Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings. Effet secondaire, ces typos seront beaucoup utilisées dans le graphisme de bureau depuis. Tout le monde connait le destin de la Comic Sans MS, par exemple. Ce projet sera abandonné en 2002.
L’idée généreuse est d’uniformiser les typos disponibles sur l’ensemble des ordinateurs de la planète, facilitant ainsi le travail des graphistes web. C’est une des premières prises en compte du fait que le web est devenu un media mondial, avec des problèmes spécifiques liés à cette échelle sans précédent.

1997 : Courte incursion des polices téléchargées

C’est encore Microsoft qui fera l’avancée technologique suivante : en 1997, Internet Explorer 4.0 propose l’utilisation de polices téléchargées depuis un site web, permettant d’ouvrir complètement le choix de typographies utilisables dans une page web. La norme CSS2 incorporera cette avancée en 1998, avec la déclaration @fontface.
Mais les risques d’atteinte à la propriété intellectuelle font reculer les concepteurs de navigateurs et le W3C, qui retire cette possibilité dans la norme CSS 2.1. On entendra plus parler de polices téléchargées pendant les 15 années suivantes !

La seule manière d’utiliser des typos "exotiques" dans une page web sera alors d’en faire une image via photoshop et d’inclure cette image à l’endroit requis. Cette méthode laborieuse sera marginalement utilisée pendant la première décennie des années 2000, surtout pour les titres.

1995-2010 : Web safe fonts

On parlera donc, entre 1995 et 2010, de "Web safe fonts", qui désigne l’ensemble des typographies présentes sur la plupart des ordinateurs, et dont utilisables "sans risque" dans le design web. En fait, ce terme ne signifie pas grand chose, puisque l’on peut toujours déclarer des familles génériques (serif, sans-serif, etc.) et qu’au pire, le navigateur utilise sa typographie par défaut.

2010 : CSS3 et le retour des polices téléchargées

En 2010, le format de compression de typographie WOFF est soumis au W3C par la Mozilla Foundation, Opera Software et Microsoft. Il s’agit d’un format permettant de compresser des typographies true type et open type. Plus légères à télécharger que les formats non compressés (qui peuvent peser plus d’un MO), elles signent aussi le retour de la typo téléchargée. Internet explorer, Chrome et Firefox l’intègre aussitôt.
En 2010 également, le site google font est créé, permettant d’ajouter facilement plusieurs centaines de typographies à ses pages web.

Ce qui a surtout changé entre 1995 et 2010, c’est la culture de la gratuité : de nombreuses typographies sont mise sous divers types de licences permettant leur usage libre et même leur modification. De nombreuses plateformes permettent leur partage également, comme c’est le cas pour les logiciels et les images. La barrière mentale de la propriété intellectuelle s’est considérablement abaissée, et des sites web permettent aussi l’utilisation sous licence de typographies propriétaires dans des sites web.

Le format WOFF est reconnu par tous les navigateurs contemporains. Entretemps, une version 2 de cette norme a été proposée, avec une meilleure compression, un décompression plus rapide et plusieurs améliorations typographiques comme la gestion des accents. Voir un article à ce sujet.

L’utilisation de fontes téléchargées de CSS3 répond la demande des designers web. Les prochaines évolutions de CSS amélioreront probablement le rendu ainsi que certaines subtilités typographiques encore absente actuellement.