Choisir une typographie web est souvent un véritable parcours du combattant : pas assez lisible, trop sérieuse, pas assez classe, trop ronde, pas assez moderne… un casse-tête sans fin qui amène parfois nos chers amis webdesigners à négliger cette étape au profit d’une bonne vieille typo « ARIAL», « HELVETICA » ou « OPEN SANS », intemporelle et sans risque…mais aussi sans originalité ! N’oubliez pas que la typographie de votre site fait partie intégrante de son design !
Face à cette « flemme créative », le maitre Google a lancé en 2010 Google Web Fonts, rebaptisé depuis Google Fonts, une ressource complète de typographies web open source, avec un objectif affiché : « making the web more beautiful, fast and open ».
Google Fonts, c’est quoi exactement ?
Jusque là, les designer utilisaient principalement des polices commerciales qui, au-delà d’être payantes, pouvaient poser des problèmes de compatibilité avec certains navigateurs – obligeant les développeurs à prévoir une police alternative en cas de problème d’affichage (on ne peut quand même pas forcer l’internaute à télécharger et installer une typo spécifique, juste pour le plaisir de lire votre contenu).
Avec l’évolution du web et de la technique (par exemple, l’utilisation massive de la propriété @font-face en CSS), il était devenu indispensable de définir des polices « compatibles web ». Google est allé encore plus loin en proposant une collection de plus en plus riches de typographies web gratuites (+ de 800 actuellement), avec la possibilité de copier-coller directement un bref extrait de code dans l’en-tête du site pour en profiter.
On peut aussi tout simplement télécharger une archive contenant toutes les polices sélectionnées et les installer pour les rendre disponibles dans tous les logiciels utilisant des polices.
C’est peut-être un détail pour vous… mais pour les pros du digital, ça veut dire beaucoup !
« We believe the best way to bring personality and performance to websites and products is through great design and technology. Our goal is to make that process simple, by offering an intuitive and robust directory of open source designer web fonts. By using our extensive catalog, you can share and integrate typography in to any design project seamlessly—no matter where you are in the world. »
C’est ainsi que Google explique sa démarche, reposant sur la conviction que “le meilleur moyen d’apporter du caractère et de la performance aux sites web passe par la technologie et un top design”, tout en précisant que leur but est ici de “rendre le processus simple, en proposant un répertoire intuitif et riche de polices open source“.
Une ergonomie soignée, pour un choix de typographie web simplifié !
Google Font se veut un outil pratique et performant… et il faut bien le reconnaître, la nouvelle interface du site va complètement dans ce sens !
Visualisation instantanée des polices, dans n’importe quelle taille et avec sa vue en mode grille, tri par catégories, critères de sélection affinés… les webdesigners auraient tort de ne pas s’en inspirer.
Les typographies compatibles web, une limite pour la créativité ?
La police fait partie intégrante du design et vous n’imaginez pas à quel point son choix peut jouer sur la perception globale d’un site. Alors effectivement, se dire que l’on doit puiser sa typographie web dans un catalogue de fonts compatibles peut faire peur…mais rassurez vous, les créatifs ont encore de quoi vous surprendre :
- Le choix est vaste et de plus en plus large… avant d’avoir fait le tour, vous pouvez y aller !
- La tendance est à l’épuré… alors si vous ne trouvez pas une typographie complètement farfelue, dites vous que c’est pour votre bien !
- Pour des visuels très spécifiques, vous pouvez toujours utiliser votre bonne vieille typo en image. En veillant évidemment à le faire avec parcimonie et à respecter les bonnes pratiques du web et autres contraintes du responsive.
L’astuce du jour : intégrer une Google Font directement dans photoshop
L’évolution de la suite adobe vous permet désormais, via le module FONTEA, d’intégrer directement votre typographie web dans photoshop, sans avoir à multiplier les manipulations.
Pour en savoir plus, nous vous invitons à lire cet article bien détaillé sur le sujet.
