Rich Typography / Design et typo - with/avec CSS

Par typographie riche, on entend un usage intense de différentes polices de caractères qui nuisent toujours à la lisibilité quand celle-ci est mal maîtrisée.

Avec les CSS et la règle @font-face qui permet de spécifier une police de caractères indépendante des OS, les designers typographes vont pouvoir se régaler.
Les autres, bien bousiller leurs mises en pages.

• • •

La mise en oeuvre est simple :
Dans une feuille de style séparée (pour bien ranger ses affaires), désigner la police que vous voulez :


@font-face {  
font-family: yourFontName ;  
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype") /* non-IE */    
}
/* Indiquer ici la police que vous souhaitez utiliser */  
.yourFontName { font-family: yourFontName, verdana, helvetica, sans-serif}  

Cette police est bien sûr disponible sur votre espace Web.
Le visiteur va l'importer dans le cache de son navigateur qui va l'afficher.
Vous noterez que dans la ligne .yourFontName, il y a d'autres polices.
C'est ce qu'on appelle un « fallback », que l'on peut traduire par... euh... fallback ?
Pourquoi ce fallback ? Parce que tous les navigateurs ne sont pas modernes et qu'il faut, pour ceux qui sont trop anciens, leur dire qu'il faut utiliser une autre police parmi celles présentes dans son système d'exploitation.

Microsoft se distingue encore. IE, dans ces dernières versions (7 et 8) ne sait pas lire ses propres polices.
Ça c'est dingo ! True Type, ils ont commencé à bosser dessus en 1989 (j'étais à l'annonce -September 20-23, 1989, Moscone Center, San Francisco) pour contrer Adobe et ses Type 1.
Et là il faut leur indiquer un autre format pour nous rendre la vie plus facile : ce sont les polices EOT.
Du coup il faut rajouter une ligne pour IE :


@font-face {  
font-family: yourFontName ;  
src: url( /location/of/font/FontFileName.eot ) /* IE */  
src: local(" real FontName "), url( /location/of/font/FontFileName.ttf ) format("truetype") /* non-IE */    
}
/* Indiquer ici la police que vous souhaitez utiliser */  
.yourFontName { font-family: yourFontName, verdana, helvetica, sans-serif}  

Des polices @font-face, il y en a plein partout, mais chez Fontsquirrel il y a les packages avec les EOT, les TTF... Prenez le soin de lire les conditions d'utilisation dans la licence pour respecter l'auteur et ses droits.
Pour ma titraille ce sera DroidSerif-Regular.


Les commentaires pour ce billet sont fermés