Type Rendering Mix : mieux contrôler @font-face ?

Publié le Mis à jour le Par

Vous connaissez Type Rendering Mix ?

C’est un plugin JavaScript qui analyse le type de text rasterizer et d’aliasing que chaque navigateur utilise : en fonction de ça, il applique des classes au document HTML, classes que l’on peut ensuite utiliser en CSS pour peaufiner le rendu @font-face d’une police.

Mes impressions à chaud :

  • Un bon rendu @font-face ne peut être obtenu que si les fichiers typo de base sont optimisés pour le web (voir mon article Optimiser le rendu de @font-face : tout un programme ! à ce sujet) ;
  • Testons déjà le rendu multi-navigateurs de chaque typo web avec Web Font Specimen (par exemple) ;
  • Les auteurs de Type Rendering Mix, Tim Brown et Bram Stein, justifient leur plugin en disant que grâce aux classes appliquées sur le DOM, on pourra utiliser des trucs comme -webkit-font-smoothing: antialiased ou -moz-osx-font-smoothing: grayscale. Autant de propriétés CSS qui non seulement ne sont pas encore standards, et s’adressent à des navigateurs modernes. Or, souvent, ce qui nous pose problème, c’est justement le rendu d’une police affichée avec @font-face (en particulier les typos très fines) sous Internet Explorer, dont les vieilles versions – qu’on doit pourtant encore supporter (coucou IE8) – ne proposent pas ce genre de béquille pour améliorer le rendu. Même remarque lorsque Brown et Stein donnent pour exemple l’utilisation de font-weight: 100; : ce type de syntaxe ne fonctionne pas dans tous les navigateurs.
  • Quid des performances ?

Du coup, j’ai un a priori : ce plugin sent un peu trop le « pixel perfect » pour être honnête, et même si la compatibilité annoncée commence à IE6, dans les faits on dispose de très peu d’outils dans IE6 et consorts pour véritablement contrôler le rendu d’une police @font-face.

Ce type de plugin apporte sans doute un vrai plus aux maniaques de la typo, qui ont conscience que leurs réglages ultra fins ne seront pris en compte que par la toute dernière version d’un Chrome ou d’un Firefox (pour caricaturer).

Mais cela pourrait aussi amener les web designers, D.A. et clients à penser que, parce que ce type de plugin existe, alors « les intégrateurs n’ont plus qu’à » faire de la magie.

Commençons déjà par acheter les licences de chaque police utilisée, par travailler avec des fichiers typo optimisés pour le web et par tester abondamment le rendu avant d’utiliser une police exotique sur un projet : cela évacuera selon moi les principaux problèmes de rendu typographique.

En bref : le rendu typo sur le web est par essence fluctuant, deal with it.


  • CSS

  • font-face

  • intégration web

  • JavaScript

  • Typographie