@font-face – doing it right

Tous les graphistes avec lesquels j’ai travaillé sur des sites web durant ces dernières années ont insisté pour utiliser des polices de caractères spécifiques. Des polices autres que Arial, Helvetica, Verdana, Times New Roman etc. qui sont les polices installées par défaut sur les ordinateurs des personnes qui accèdent à une page web (voir aussi : safe list du typetester et la page Wikipedia Core Fonts For The Web).
(Souvent d’ailleurs, c’est parce qu’on peut utiliser des polices de caractère spécifiques que certains graphistes préfèrent faire des sites avec  Macromedia Adobe Flash…)

Utilisation de polices standard en CSS

La spécification CSS1 permettait déjà de désigner une police de caractère à utiliser, sa taille, la graisse, le style. De plus, il est conseillé d’utiliser un fallback. En CSS, cela ressemble à quelque chose comme ça :

body {
    font-family: Arial, sans-serif;
    font-size: 1em;
}

A l’ancienne

Jusqu’à il n’y a pas si longtemps, vouloir utiliser des polices de caractère spécifiques impliquait de désigner des zones importantes, comme des menus ou des titres (pour ne pas alourdir trop les pages), et d’y implémenter des images statiques que le ou la graphiste devait préparer auparavant à l’aide d’un logiciel de traitement d’image. (Ces images devaient avoir la bonne taille, de préférence un fond transparent (PNG24) – ce qui posait problème à son tour dans le navigateur alors le plus répandu : IE6..)
Cette méthode devient assez vite pénible, par exemple, quand on a plus que 3 langues différentes – et donc autant d’images différentes – à gérer. Ou encore dès lors qu’on veut modifier un mot…
Continue reading

Cauchemar graphique : le rendu des polices sur Mac diffère de celui d’autres systèmes

J’ai mis quelques années à me rendre compte que le rendu des polices de caractère dans les navigateurs sous Mac OS différait à ce point du rendu des navigateurs sur Windows et sous GNU/Linux – parce que je n’ai pas de Mac, sûrement.

Esthétique versus fonctionnalité

Un navigateur sous Mac OS, que ce soit Safari ou Mozilla Firefox, va tenter de rendre la police comme prévu par le créateur de la police (vive l’esthétique) tandis que les autres systèmes d’exploitation vont rendre la police après l’avoir ajustée pour rentrer dans la grille de pixels de l’écran (vive la fonctionnalité).
Cela fait que sous Mac OS, toutes les polices de caractère vont paraître plus grosses, un peu floues, avec des lettres qui bavent. (Voir quelques images et explications ici et .)

Cette différence est supportable avec les polices par défaut (Arial, Helvetica, Verdana) mais ça devient lourd quand on utilise une police particulière via @font-face.

Personellement, je suis du côté de la fonctionnalité, non pas parce que je n’aime pas Apple (quoique..), mais parce que je préfère la lisibilité avant l’esthétique.

Cela dit, ce «problème» – ou cette différence de philosophies – devrait disparaître avec les écrans du futur.

Entre temps, on peut utiliser jQuery et ce plugin pour déterminer si le client est sous Mac OS (j’ai comme un a priori que les gens qui ont des Macs ne désactivent jamais le Javascript) – et dans ce cas on pourrait appeller un ligne de CSS supplémentaire (qui modifierait la police ou sa taille).

(Evidemment, on peut aussi faire le contraire, en attendant les écrans du futur.)

Lire aussi : @font-face-doing-it-right

Suitable font replacements for standard non free fonts on free operating systems

When writing and testing stylesheets while working on a free operating system like GNU/Linux, you will most likely have to install the msttcorefonts package, as typical typefaces like Arial, Verdana, Times New Roman etc. are not included with the distribution of your operating system, as they are not free.  Even worse, you may have to purchase fonts that are included with the Mac operating system, but expensive for anyone else in the world, like the Helvetica. Wait. Are we making websites only for Windows and Mac users?

Why use free software, write free software but conform to non free web design?

Consider a font style like this one:

font-family: "Helvetica", sans-serif;

On a freshly installed GNU/Linux system this will use the fallback « sans-serif » default font, which is most likely Bitstream Vera Sans. Although Bitstream Vera Sans is a very beautiful font, it is really much bigger and wider than Helvetica or Arial. Some designs may not fit anymore or lose their particular character, when viewed on systems without the « right » font. Continue reading