Par , le 15 octobre 2015

Parlons des Web Fonts !

Design | Webdesign | 0

La typographie a une place très importante dans le webdesign d’aujourd’hui et on ne s’en lasse pas. Elle offre désormais les mêmes possibilités de créativité et de rigueur typographique que dans le print. Souvent accompagnée d’un très beau visuel en plein écran, elle donne du ton, du caractère et est essentielle pour avoir un site moderne et de qualité avec une bonne visibilité.

Il y a quelques années, avoir un beau site avec une belle typo était peu fréquent. Aux origines du web, les polices de caractère dites « standard » sont très limitées car pour qu’une police s’affiche dans le navigateur d’un internaute, il fallait que celle-ci soit installée sur son ordinateur. L’utilisation des polices Arial, Verdana ou Georgia était donc très répandue…

Après des premières solutions bancales, sont apparues les propriétés CSS @font-face, qui permettent de contourner cette limitation et d’utiliser de nouvelles polices présentes sur le web. Autre point d’honneur, elles sont de plus en plus reconnues par les différents navigateurs (Firefox, Chrome, Opera, Safari et Internet Explorer) ce qui permet un affichage quasi identique d’un navigateur à un autre.

De ce fait, les bibliothèques de polices fleurissent et nous permettent, nous créatifs, une multitude de choix pour laisser libre cours à notre imagination. Parmi elles, on retrouve des typographies open-source comme Google Fonts et Font Squirrel, très pratiques et faciles à mettre en place, et des services « d’hébergement » de polices comme Typekit, Fontdeck, Fonts Live, Fontspring…

Parlons des Google Web Fonts

L’utilisation de Google Web Fonts est en plein essor et est notamment très prisée par les webdesigners pour ses nombreux avantages :

  • les polices sont gratuites et libres de droits
  • elles sont hébergées sur le serveur de Google
  • un vaste choix, une liste de plus de 700 familles de polices que l’on peut filtrer selon différents critères :
    • Serif/ Sans Serif/ Display/ Handwriting/ Monospace (avec empattement/ sans empattement/ affichage/ manuscrit)
    • Thickness (graisse)
    • Slant (inclinaison)
    • Width (largeur)
    • Différents tris sont également proposés comme « Trending » (tendance) ou « popularity » (popularité)

Typographies

  • la possibilité de télécharger les fichiers polices et de les utiliser dans les maquettes web statiques sous Photoshop, Fireworks, Illustrator…
  • une intégration rapide

Google Fonts

Cependant il faudra faire attention à ne pas appeler un trop grand nombre de familles et de déclinaisons de polices, le risque étant de pénaliser la vitesse de chargement de la page. De plus, les règles typographiques conseillent généralement de ne pas dépasser un maximum de trois polices différentes sur un site.

La collection Google permet donc de créer un design personnalisé et accessible pour tous comprenant moults polices de qualité. Voici quelques exemples de nos réalisations :

Nutislab : Roboto

Nutislab

Moderne, sobre et lisible dans tous les corps possibles, la Roboto vient compléter les couleurs vives et chaleureuses, sans oublier le caractère médical et technologique de Nutislab.

La Redoute (site corporate) : Merriweather + Source Sans Pro

La Redoute

Très proches de leurs cousines issues de la charte print de La Redoute, elles en gardent la féminité, la modernité, la variété de styles et de graisses, tout en étant parfaitement adaptées à la lecture sur écrans.

Éphéméert : Questrial + Lora

Éphéméert

Rétros et gourmandes, statuantes et nostalgiques, la Questrial et la Lora se sont imposées comme de parfaites représentantes de la séculaire maison Méert.

Montres and Co : Roboto Slab + Ubuntu

Montres and Co

Masculines, structurées et franches, épurées et évocatrices de la mécanique horlogère Suisse, la Roboto Slab et la Ubuntu ont été choisies comme ambassadrices de la boutique en ligne Montres and Co.

Typekit

Racheté par Adobe en 2011, Typekit s’est très rapidement imposé comme l’une des meilleures alternatives payantes. Les polices proposées sont soumises à des règles d’utilisation strictes : en effet, le catalogue est enrichi (actuellement 4 200) par plusieurs grandes fonderies (Dalton Maag, FontFont, T-26, Typofondrie, …) dont certaines ne sont pas libres de droits.

L’intérêt principal de Typekit réside dans le caractère « haut de gamme » de son catalogue. On y retrouve notamment la prestigieuse Futura, l’impertinente Brandon Grotesque ou encore la très sérieuse Proxima Nova.

La tarification de Typekit repose sur le nombre de pages vues par mois : de 500 000 vues à des offres spéciales pour les entreprises.

Du côté des fonderies

En marge de ces offres, certaines fonderies ont décidé de lancer leurs propres services. Hoefler & Co., par exemple, a lancé Cloud.typograhy en complément de la vente de ses polices. Les tarifs sont ici largement plus élevés que sur Typekit tel est le prix à payer pour utiliser des polices telles que la Gotham, la Didot ou encore la Landmark sur un serveur.

Les Icon Fonts

Après avoir fait le tour de l’univers de la typographie, il semble important d’évoquer les Icon Fonts. Pour ceux qui ne connaissent pas, c’est tout simplement une police d’écriture dont les caractères sont remplacés par des icônes. Afin de modifier aisément leurs tailles, couleurs, ombres, opacités, elles se présentent sous la forme d’un fichier de police qui est géré par CSS.

Certains sites permettent de créer des icônes en les personnalisant directement via des plates-formes (ex : IcoMoon). Il suffit juste de designer son icône dans Illustrator et de l’exporter en fichier vectoriel SVG pour une bonne utilisation CSS. Cela permet donc de respecter les normes d’accessibilité avec des icônes de bonne qualité quelle que soit la définition de notre écran (ex : PREAM Immobilier).

PREAM Immobilier

Pour conclure

Les choix de polices sont donc stratégiques pour différentes raisons :

  • la vitesse de chargement
  • la qualité d’affichage
  • la personnalité et le ressenti sur lesquels on souhaite communiquer

L’utilisation des Web Fonts permet donc un vaste choix typographique mais il faut garder en tête que chaque caractère utilisé sur votre site nécessite le téléchargement d’un fichier. Pour éviter de perdre l’utilisateur, le temps du chargement ou à cause d’un débit réduit, il est possible de charger les polices de manière asynchrone. Il s’agit de permettre au lecteur de cette page d’accéder avant tout à son contenu avec une police système, dans les meilleures conditions possibles le temps que la page se charge. On peut donc allier modernité et performance, les deux ne sont plus dissociables… alors lancez-vous !

Co-écrit avec Camille Raviart du pôle studio.

Partager l'article :

Vous souhaitez réagir ?

En soumettant ce commentaire vous donnez à Silicon Salad le droit de citer vos propos ainsi que votre nom/site. Tous commentaires dégradants ou hors-sujet peuvent-être supprimés par décision de l’auteur. Votre e-mail, ne sert qu’à des fins d’authentification, il ne peut-être ni partagé ni diffusé.
Vous pouvez commenter avec la syntaxe Markdown. En savoir plus

Article précédent
+180% de conversions en ligne pour Planète OUI #optimisation