COMMUNICATION - CREATION DE SITE INTERNET - REFERENCEMENT

Les normes du web évoluent, et l’on parle beaucoup de CSS3 (entre webmasters / webgraphistes, bien sûr !). L’une des nouveautés apportées par cette nouvelle mouture est de pouvoir utiliser (enfin !) des typographies un peu plus créatives que les éternelles Arial / Verdana / Times  qui sont depuis les débuts du web les seules à pouvoir être affichées.
Et quand je lui annonce ça, mon graphiste esquisse un sourire incrédule…

Pourquoi seulement l’Arial et le Times ?

Historiquement, seules 7 typos sont admises sur un site internet :
Arial, Verdana, Helvetica, Georgia, Times, Trebuchet et Courrier.

Pourquoi une telle réduction de moyens alors qu’il existe des milliers de fonts, payantes ou libres de droit ?

Parce qu’une page web n’encapsule pas les polices (= ne s’approprie pas), mais utilise celles qui sont installées sur l’ordinateur de l’internaute. Les polices installées dépendent du système d’exploitation, il y a donc peu de typos qui soient disponibles à la fois sur des postes équipés des différentes versions de Windows, de Mac OS ou de Linux. En fait il n’y en a que 7, dont acte.

Si un concepteur de site internet s’amuse à mettre une font qui ne serait pas disponible sur le poste d’un internaute, celle-ci ne s’afficherait pas, ce qui poserait vraiment un problème !

Depuis des années, mon graphiste râle, et s’accommode tant bien que mal de cette poignée de polices utilisables, mais franchement, tout cela manquait cruellement de créativité…

Différents formats de font

De plus, il existe plusieurs formats de fichiers de font, certains libres, et d’autres propriétaires. Les plus courants sont OTF (Open Type Font), TTF (True Type Font) et EOT (Embed Open Type) qui est un format propriétaire de Windows, et le seul format lu par les différentes versions d’Internet Explorer.

Voici les formats reconnus par les différents navigateurs :

• Safari : TTF et OTF
• Chrome : TTF et OTF
• Firefox : TTF et OTF)
• Opéra : TTF, OTF et SVG (format propriétaire Mac OS)
• Internet Explorer : EOT

CSS3 et la propriété @font-face

Le web évolue, et de nouvelles normes se mettent en place au fur et à mesure de cette évolution. Ainsi, on parle de la 5^ème version de la norme HTML (langage qui permet d’afficher le contenu d’une page web), et de la 3^ème version de CSS (langage qui permet de mettre en forme les contenus).

La dernière mouture de CSS comble enfin ce manque de typos, grâce à la propriété @font-face, qui permet au navigateur de trouver la police non plus sur le poste client, mais sur le serveur, dans les fichiers du site internet.

Il est donc normal que les acteurs du web se réjouissent, et en parlent beaucoup.

Utiliser @font-face

Comment utiliser cette fameuse propriété dans son site web ?
Rien de plus simple, mais quelques pré-requis sont nécessaires :

• une connaissance basique des langages HTML et CSS
• la police que l’on souhaite utiliser en format TTF ou OTF et en EOT
• la page HTML de contenu à afficher
• la feuille de style qui met en forme le contenu

Dans le HTML

<p class= ‘texte1’>Lorem Ipsum Dolor Sit Amet</p>

Dans le CSS

Il faut d’abord déclarer la police que l’on va utiliser

@font-face {
font-family: 'ZendaRegular';
src: url('zenda-webfont.eot');
src: local('ZendaRegular'),
url('zenda-webfont.ttf') format('truetype'),
url('zenda-webfont.svg#webfont') format('svg');
}

Une petite explication?

La première ligne donne le nom sous lequel sera appelée la police,
La deuxième ligne indique à Internet Explorer (qui ne lit que le format EOT) où trouver la font sur le serveur,
La troisième ligne indique au navigateur où trouver la font sur le poste client,
Les quatrième et cinquième lignes indiquent là où trouver la font sur le serveur.

Les petits malins auront noté que j’ai supprimé la mention local qui indique au navigateur là où il doit chercher la font sur le poste client (au cas où la typo serait déjà installée). C’est parce que Chrome a du mal avec la mention local et n’affiche pas du tout la nouvelle police. Or, nous voulons que n’importe quel internaute, quel que soit son choix en matière de navigateur, puisse admirer notre choix typographique, pour lequel nous nous donnons tant de mal !

Il nous reste à attribuer à notre class texte1 la propriété de police :

Dans le CSS

.texte1 {
font-family: "ZendaRegular", "Arial", "Helvetica", sans-serif;
}

Au cas où, il faut tout de même indiquer un choix typographique alternatif, c’est pourquoi nous ajoutons à la font ZendaRegular l’Arial et l’Helvetica, qui sont des fonts sans-serif (= sans empâtement).

Avec cette petite manipulation, on peut obenir de jolis effets de texte, qui n’étaient avant possibles qu’en insérant des images ou des animations flash, ce qui n’était tout de même pas très pratique.

Faisons un petit test

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu pharetra massa. Duis porta facilisis eros, sit amet ultrices sapien dapibus eu. Donec scelerisque nisi a magna pellentesque sit amet varius lacus faucibus. Integer vitae suscipit leo. Suspendisse dapibus lectus sit amet mauris ullamcorper aliquam. Suspendisse potenti. Praesent leo purus, placerat in ornare malesuada, ullamcorper ac est. Nullam eget nulla eget nunc malesuada ultricies vitae sed velit. Integer at justo mauris. Ut sed mollis risus. Integer id purus diam. Etiam massa felis, tempor ac sollicitudin in, tincidunt a lectus.

Si le paragraphe s’affiche en typo gothique, c’est gagné!

Où trouver des typos ?

Maintenant qu’on sait insérer une nouvelle police à son site web, il s’agit de le faire !

Et là, la question qui se pose, c’est comment trouver la police qui ira bien, dans les différents formats (in)compatibles ?

Je préconise de faire un petit tour sur les sites de fonts, voire ce qui est proposé. Vérifiez toujours d’avoir le format EOT en plus du TTF / OTF !

Il existe des utilitaires qui permettent de transformer une typo en différents formats. J’en ai testé deux trois, et… je conseille de faire un petit tour sur les sites de fonts !

Faciliter la lecture de vos contenus web

Juste un rappel pour finir :

N’oubliez pas que les contenus de votre site doivent rester LISIBLES !!! Plus la police d’écriture est compliquée, ornementée, tarabiscotée, et plus elle sera fatigante pour les yeux.
Pensez à vos lecteurs, et utilisez des fonts classiques pour les contenus généraux de votre site. Vous réserverez les polices « artistiques » pour certains titres, éléments visuels importants… et garderez votre lectorat !

Droit d’auteur

Un deuxième rappel, finalement ;)

Comme toute création, les typographies sont protégées par le droit d’auteur. Il existe des typos libres de droit, des sous licence GNU/GPL, d’autres sont payantes.

En général, les sites qui distribuent des polices fournissent les termes d’utilisation, veillez donc bien  à avoir l’autorisation d’utiliser la ou les fonts choisies !

Liens utiles 

Font Squirrel

http://www.fontsquirrel.com/fontface

ils proposent des packs de typos tout prêts à utiliser sur internet, vraiment génial!