Actualités WordPress, CSS & Webdesign, OceanWP & Elementor.

La typographie était le parent pauvre du web mais cette période est révolue !

Jusqu’à présent je n’utilise en intégration web que les polices de caractères dites « safe web », j’ai regardé il y a 1 ou 2 ans ce qu’il était possible de faire. Les solutions n’étaient pas légions et je n’était pas emballé par les includes Microsoft ou Mozilla. Étant partisan de la simplicité et surtout de la limitations des écueils d’affichage j’ai toujours privilégié les « safe font web » quitte à faire des bandeaux sous forme d’image pour les beaux titrages (header).

Aujourd’hui je me suis essayé à la solution @font-face proposé par les CSS, elle est correctement supportée par les navigateurs les plus récents et donne de bons résultats (sous PC comme sous Mac). La mise en place n’est très lourde et le fait de charger 2 à 3 polices en page d’index n’est pas trop limitatif si cela libère du chargement de parties graphiques consacrées à des titrages spécifiques (on peu d’ailleurs limité le chargement à la seule typo présente dans la page au besoin).

Mon navigateur de test Explorer est encore ie7 et même sous ie8 le moteur d’affichage n’est pas aussi bon qu’un Mozilla, Chrome ou Safari où l’on bénéficie d’un antialiasing de qualité. Je note un léger changement dans la ligne de base (3 à 4 pixels) mais rien de grave (corrigé avec un feuille Explorer supplémentaire).

Ce test m’a permis en quelques minutes de découvrir enfin d’autres typographie que les courantes Arial, Helvetica, Tahoma ou Lucida Grande que j’utilise quotidiennement.

Maintenant il reste la tambouille à faire pour obtenir : les bons formats de fontes, le code CSS d’import, etc… et là, une fois de plus, le web est notre sauveur.

FontSquirrelJ’ai découvert sur le site fontsquirrel.com un générateur de fontes et de styles pour la solution @font-face.
On télécharge sa ou ses typos (dont on possède les droits d’utilisation bien entendu), on laisse faire le générateur et on récupère un « kit » complet comprenant les 4 format courants  :

  • Le True Type Fonts (TTF) : Pour la plupart des navigateurs, sauf IE et iPhone,
  • Le Embedded OpenType (EOT) : pour Internet Explorer,
  • Le Web Open Font Format (WOFF) : une version compressée de la police, qui se veut un futur standard,
  • Le Scalable Vector Graphics (SVG) : pour iPhone et iPad.

Un fichier de démo contenant tous les caractères du kit + un fichier de CSS avec les différents imports déjà saisis.

Que demander de plus ?

Il faut noter que Safari mobile ne semble pas prendre en charge plus de 2 caractères simultanément présent dans une page (le cache semble très limité sur cette option).

Sources : yoyodesign / mozilla-developper / Convertprestige / Convertisseur Font-Face

Laisser un commentaire

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

Fermer le menu