Seriously, (Don’t) Use Icon Fonts

Après avoir vu comment générer une font-icon en Rails, il est intéressant de se poser la question : Est-ce une bonne pratique d’utiliser une font-icon ?

Pour essayer d’y répondre, j’ai confronté ces deux articles, le second étant écrit en réaction au premier :

Dans son article, Tyler Sticka compare l’utilisation des font-icons à la mise en page HTML à partir de tableaux. Pour lui, une font n’est pas faite pour afficher des icônes. Ses arguments sont les suivants :

  1. Cela pose des problèmes d’accessibilité. En effet, la plupart des lecteurs d’écran lisent de la même façon les font-icons que le reste du texte, ce qui donne quelque chose d’incompréhensible. De plus, beaucoup de personnes dyslexiques remplacent la police des sites web par une police plus lisible pour eux, ce qui remplace également les font-icons, ce qui rend les icônes illisibles.
  2. Dans certains cas, les font-icons qui sont générées automatiquement et auxquelles ont affecte un caractère Unicode aléatoire sont chevauchées par des emoji, ce qui peut donner des trucs sympas.
  3. Le chargement d’une font-icon échoue souvent et les fallbacks ne sont pas parlantes.
  4. Les icônes en SVG ne sont pas plus difficile à gérer. Il est tout à fait possible de faire un sprite en SVG qui ne sera pas plus lourd qu’un fichier de font. De plus le SVG est tout autant supporté par les navigateurs qu’une font-icon (96% de support).

Les contres-arguments de Ben Frain sont les suivants :

  1. Les font-icons sont supportées par Android 2.3. Ce n’est pas le cas des SVG.
  2. Si on utilise le bon rang Unicode (« private use area » ou PUA), les caractères ne seront pas lus par les lecteurs d’écran. IcoMoon utilise ce PUA, à voir si fontcustom le fait aussi.
  3. Pour résoudre les problèmes de chargement d’une font-icon, on peut l’inclure dans le CSS grâce au data-uri.
  4. Il est plus facile d’appliquer du CSS (text-shadow, transition, …) sur les font-icons.
  5. Le rendu d’une page avec des font-icons est plus rapide que celui d’une page avec des SVG inline.

Lecture complémentaire : The Great Icon Debate: Fonts Vs SVG

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.