1. Accueil
  2. Réflexion
  3. Tribune d'expert
  4. La typo dans tous ses états

La typo dans tous ses états

La typo dans tous ses états
Introduction
Les évolutions du web bouleversent la typographie. Nombreuses sont les transformations qu’ont subi les offres dans ce domaine. Comment vous y retrouver ? Le point sur les bonnes pratiques avec l'agence Ultranoir.

Le webdesign : le renouveau du print

Ces derniers mois, l’importance de l’utilisation de la typographie dans le webdesign a considérablement évolué : qualité des titres, des rendus, diversité des graisses et des tailles, le web s’inspire du « papier ». Si d’apparence le web et le print sont aux antipodes, ils n’en restent pas moins similaires par les différentes problématiques qu’ils abordent : mise en page, lisibilité, rythme, espace, etc.

On fonctionne désormais avec une “Grille de Mise en page” en CSS qui définit une structure qualitative, équilibrée et évolutive (cf. Responsive Design). L’introduction des respirations/des espaces aérés dans les compositions, la structure en colonnes, les grands titres, les chapeaux ainsi que les éditos rythment le design de toute page web.

 

Quelles polices, avez-vous le droit d’utiliser ?

Rappelons que l’un des objectifs premiers du webdesigner est de concevoir des sites qui s’affichent de la même façon, quels que soient les plateformes, les navigateurs et les machines des internautes.

L’utilisation des polices dites «web safe» consiste à n’utiliser que des polices installées par défaut sur tous les systèmes d’exploitation (Windows, Linux, Mac OS, etc), et ainsi limiter les différences de rendus sur chaque machine.

Cette liste étant très courte (5 polices) et ne proposant que très peu de variations (gras, italique) la personnalisation des créations s’est vue rapidement limitée.

Pendant un temps, on a donc remplacé ces polices par des images, au détriment du référencement et de l’actualisation rapide du texte.

 

Utiliser n’importe quelle police, sur n’importe quel navigateur 

Avec CSS3, c’est le grand come back des fonts web : la propriété @font-face refait surface en créant une petite révolution dans le domaine de la typographie web. Cette technique permet d’afficher une police dans n’importe quel navigateur sans qu’elle soit installée sur la machine de l’utilisateur, simplement en plaçant le fichier de la police sur le serveur du site.

 

Néanmoins, son emploi connaît des limites. Lorsque vous téléchargez une police, vous devez prendre en compte les licences et la gestion des droits d’auteurs. En effet, une police de caractères est protégée au même titre que l’est une chanson. Dans cette optique, son utilisation se fait après l’achat d’une licence auprès de la personne gérant ses droits. Vous pouvez ainsi acheter une police pour l’utiliser à des fins commerciales, à des fins personnelles, etc. A cela s’ajoute un manque de sécurité. La protection des fichiers n’est pas garantie car n’importe qui peut les télécharger.

 

Vous ne pouvez pas trouver meilleure solution

Trois mots suffisent à la définir : Web server-font. Ces services web mettent à la disposition des webdesigners des catalogues de polices.

Ils proposent ainsi d’afficher sur des pages web, des polices qui ne sont pas installées sur les machines des internautes, en hébergeant eux-mêmes ces polices sur différents serveurs. Les webdesigners utilisent ensuite la propriété @font-face, pour permettre l’affichage sur les pages web.

 

Typekit.com : Le site propose une solution au problème de la gestion des licences en présentant 4 offres tarifaires de 25$/an (soit 17€) à 250$/an (soit 175€) pour la première année d’utilisation. Plus la police va être utilisée et vue, plus le prix va augmenter.

Myfonts.com : Le site propose des fonts en version web.

 

Conclusion

La diversité des offres typographiques donne aux webdesigners la possibilité d’enrichir le contenu des pages qu’ils conçoivent et leur offre plus de choix lors de la phase de conception graphique. Toutefois, la sélection de la typographie doit rester en accord avec l’univers de la marque et les objectifs du projet.

 

Rubrique créée en partenariat avec Ultranoir.