La typographie au premier plan.

Depuis la création du web, les polices utilisées étaient presque toujours les mêmes. On utilisait les arial, helvetica et tahoma afin de s'assurer du rendu visuel de notre site, car ces polices sont instalées de base dans la grande majorité des ordinateurs.

Ce temps fait parti du passé du web grâce à @fontface, une propriété css qui permet d'ajouter des polices plus personnalisées à notre site. Comme évoquait Rocio dans un article précédent, @fontface est maintenant compatible avec tous les navigateurs modernes, ce qui crée des sites web plus attrayant tout en restant accessible.

Comment ça marche

Le principe de base, derrière @fontface, est de permettre au client de télécharger temporairement une police, tout comme on le fait pour une image. De cette façon, l’intégrateur web s’assure du rendu visuel des textes. 

Google web fonts et Font Squirrel sont 2 des ressources les plus répandus pour utiliser @fontface.

Googlefont web fonts vous propose un éventail de polices open source, qui signifie libre de droits, donc vous détenez les droits de les utiliser là où vous le désirez. En seulement quelques lignes de code, l’intégrateur pourra faire en sorte que la police choisie s’affiche sur l’ordinateur du client.

Font Squirrel repose sur le même principe;  des polices open source téléchargées temporairement par le client. Ce qui le différencie de google web fonts, c’est qu’il permet aussi de télécharger vos propres polices afin de les utiliser avec @fontface. Assurez-vous de détenir les droits afin d’utiliser la police avant de la télécharger.

Limitations de @fontface

Cependant, utiliser @fontface pour l’ensemble du texte du site web n’est pas une bonne option, car le procédé pourrait augmenter le temps de réponse de votre site, pensez à l’utiliser sur les titres et autres éléments importants.

Vous devrez aussi faire attention au différent rendu visuel de certains navigateurs. IE7 et IE8 peuvent modifier certaines polices les rendants un peu moins attrayantes. Assurez-vous de bien choisir vos polices et de faire vos propres essais.

A propos de l'auteur // About the author