Décorez un peu plus ses textes en CSS

by Entraks



En matière de polices sur le net, force est de constater qu’on retrouve souvent les mêmes de site web en site web : Arial, Arial Black, Verdana, Trebuchet MS, Courrier New, “Times New Roman” … la propriété font-family à ses classiques.

Cela relève moins d’un manque d’imagination de la part des webmasters à piocher dans la multitude des polices existantes que de l’impératif de toujours penser que les autres ne voient pas forcement la même chose que vous sur leurs écrans.
billo_dream0

En effet, aussi sexy que puisse paraître cette police billo dream, parfaite pour rédiger mon blog sur les sixties, elle n’est surement présente que dans les abisses de mon disque dur et la grande majorité de mes visiteurs ne l’ayant pas installé, leur navigateur internet la remplacera soit par un Arial ou encore un Times New Roman. Beaucoup moins groovy.
A moins d’inciter vos visiteurs à télécharger les polices manquantes pour l’affichage correcte de votre site, ce qui serait une grossière erreur, il existe deux solutions que j’utilise sur le web.
La première c’est Typechart. Ce site liste plusieurs propriétés CSS à insérer dans vos classes qui utilisent les mêmes polices que je citais plus haut et qu’on pouvait trouver peu funky. En modifiant la font-size, le font-style ou en jouant avec text-transform, on obtient des choses assez sympa et parfois on ne reconnaît pas la police utilisée. Par exemple :

font-family: Verdana,sans-serif;
font-size: 13px; font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: normal;
line-height: 1.6em;
Cela donne un résultat bien différent du classique font-family:Verdana;font-size:10px :)
Deuxième solution, utiliser un script qui génère des images (gif ou png) contenant votre texte avec une police et une mise en page précise. Par exemple, pour les titres de ce blog, j’utilise un plugin WordPress permettant d’écrire du texte avec la font Rockwell. Ce plugin se nomme TTFTitle et il suffit de placer sur votre hébergement, la police que vous souhaitez utiliser. Il faut cependant ne pas perdre à l’esprit que ce “texte” en image n’est lu que par les humains.
A vous de trouver un système qui fait lire aux robots ce texte :)