Donnez un vrai style à vos titres avec Facelift

Les internautes qui ne connaissent pas les contraintes du webdesign s’étonnent souvent du fait que l’on retrouve toujours les mêmes polices de caractères sur le web, notamment dans les blogs ou les sites d’information. Les webmasters connaissent bien cette problématique, qui les conduit régulièrement à expliquer aux clients que non, il n’est pas recommandé d’utiliser

Les internautes qui ne connaissent pas les contraintes du webdesign s’étonnent souvent du fait que l’on retrouve toujours les mêmes polices de caractères sur le web, notamment dans les blogs ou les sites d’information.

Les webmasters connaissent bien cette problématique, qui les conduit régulièrement à expliquer aux clients que non, il n’est pas recommandé d’utiliser n’importe-quelle typo exotique pour la titraille, principalement pour 3 raisons :

  • la lisibilité : la typo souhaitée par le client n’est pas forcément présente sur tous les ordinateurs, or – chose étonnante et assez peu logique pour un novice, ne l’oublions jamais – une page web s’affiche avec les typos présentes sur l’odinateur du visiteur, et non pas celles du concepteur…
  • l’accessibilité : si l’on veut afficher la fameuse typo exotique du client, il faut « dessiner le texte », soit faire des titres au format image. Les titres en image c’est bien, c’est parfois nécessaire pour enrichir le design d’une page, mais ils ne seront pas forcément lisibles de façon confortable par un navigateur n’affichant pas les images, ou un lecteur d’écran, même si on les accompagne de la balise descriptive qui va bien.
  • le référencement : accessibilité et bon positionnement dans Google étant souvent liés (en tout cas quand on fait du SEO naturel et propre), un titre en image n’est pas non plus la meilleure façon de bien référencer son site, quand on connait l’impact d’un bon titre emballé dans une balise H1.

Il existe cependant des solutions permettant d’utiliser les polices que l’on souhaite au moment de la conception du site sans pour autant pénaliser celui-ci, ni plonger le visiteur dans des abîmes de perplexité. sIFR fait partie de celles-ci, et j’en avais déjà parlé ici.

Autre solution, qui ne fait pas appel à Flash mais à JavaScript et PHP (disponible aussi avec jQuery et Scriptaculous), voici Facelift, un script gratuit qui permet d’afficher dynamiquement la police de son choix sur tous les navigateurs. Une fois le script installé, il suffit de déclarer les balises que l’on souhaite personnaliser, et le programme se charge de le faire pour vous, ce qui vous permet de coder vos pages comme vous le faites d’habitude sans vous soucier de l’implantation des polices spéciales.

Facelift possède en revanche un inconvénient notoire par rapport à sIFR : le texte converti en image n’est pas sélectionnable partiellement, contrairement au texte généré par sIFR. Avec Facelift, vous pouvez quand même faire un copier-coller de texte, mais uniquement avec une sélection par bloc, à l’aide d’un Ctrl+C.

Une solution intéressante pour enrichir le design de son blog, la typo étant un élément fondamental du design, point sur lequel – une fois n’est pas coutume – la presse écrite possède un avantage incontestable sur le web.


Nos dernières vidéos

9 commentaires

  1. « Facelift possède en revanche un inconvénient notoire par rapport à sIFR : le texte converti en image n’est plus sélectionnable, contrairement au texte généré par sIFR. »

    Le texte est sélectionnable et copiable avec Facelift mais pas par partie. Il faut sélectionner tout le texte et faire un bon vieux ctrl-c. Bon, c’est sûr que la plupart des internautes ne s’en serviront pas mais c’est possible…

  2. Très bon article simplement, je reviens sur un point.
    sIFR a un gros inconvénient, il est constitué de Flash et donc n’est pas lisible sur certains appareils mobiles tels que l’iPhone.
    Conclusion, pour moi même si on ne peut pas sélectionner le texte avec Facelift est mieux que sIFR dans le sens où il est plus « accessible ».

  3. Hello,

    Sinon, y’a une autre solution, je ne sais pas trop si elle est viable mais c’est ce que j’applique sur mes sites pro pour le moment : je fais Mon titre que je cache soit en font-size: 0px soit en display: none; et je mets dans le premier cas, une image en background avec la police exotique, et dans le deuxième cas, je mets ce background un cran au dessus, style une div.

    Niveau référencement, j’aimerais savoir ce que ca donne… quelqu’un sait ?

    Merci

  4. Pingback: Doudoum’s | Mettre en forme ses titres - Facelift

  5. « l’accessibilité : si l’on veut afficher la fameuse typo exotique du client, il faut “dessiner le texte”, soit faire des titres au format image. Les titres en image c’est bien, c’est parfois nécessaire pour enrichir le design d’une page, mais ils ne seront pas forcément lisibles de façon confortable par un navigateur n’affichant pas les images, ou un lecteur d’écran, même si on les accompagne de la balise descriptive qui va bien. »

    Bah si au contraire, pour les deux cas de figure citer, tant qu’il y a un texte alternatif porteur de la même information que l’image, il n’y a aucun problème d’accessibilité. Là où il peut y avoir problème c’est pour les gens ayant la vue basse et qui ont besoin de grossir les textes. Avec les navigateurs plus anciens c’est impossible, donc parfois illisible ; et avec les navigateur plus récent, si l’utilisateur active le page zoom, le rendu pixelisé rend parfois la lecture impossible.

  6. @Charliend
    « sIFR a un gros inconvénient, il est constitué de Flash et donc n’est pas lisible sur certains appareils mobiles tels que l’iPhone. »

    Il me semble que sIFR se dégrade très bien sans flash, puisque le titre est tout de même dans le html. Ensuite il est remplacé grace a du js par du flash, mais il y a une detection du plugin flash avant cela.

    Normalement, si pas de flash sur le navigateur, on a un affichage hmtl de base (et donc avec les polices de base).

Répondre