Menu

Technocité
Nos formations
Nos services entreprise
Infos pratiques
Validation des Compétences
 
 

Nos projets

Avec le soutien de

 

La typographie a une longue histoire qui remonte aux premiers jours de l’imprimerie. L’invention de Gutenberg, qui a révolutionné le monde, ne se limitait pas aux caractères mobiles mais à un ensemble de techniques comprenant les caractères en plomb, la presse typographique et le procédé de fabrication de l’encre nécessaire à la reproduction. Aujourd’hui, une autre révolution – toutes proportions gardées - est en marche : celle des web fonts ! Longtemps attendues, elle concerne au premier plan la pratique du web designer.

Depuis l’avènement du web, les designers n’ont cessé de rivaliser en ingéniosité pour reproduire la créativité graphique que l’on retrouve dans la production d’imprimés de toutes sortes. Avec une certaine dose de frustration, il faut bien l’avouer…

Les implémentations parfois fantaisistes des navigateurs et leur rendu hasardeux mettait souvent à mal les plus belles mises en pages. À cela venait s’ajouter la variété de support de consultation et l’hétérogénéité du parc informatique des internautes qui rendaient toutes tentatives de présenter une mise en page unique pour le moins aléatoire.

Fort heureusement, les avancées techniques dans les navigateurs, qui respectent à présent mieux les standards, les nouvelles normes css3, les bonnes pratiques de programmation et les techniques de responsive design, ont permis de s’affranchir d’un grand nombre de ces problèmes du passé. Toutefois, il restait une épine de taille au pied du designer : les polices de caractères, indissociables d’un design graphique original et de qualité.
En résumé, jusqu’à une date récente, il était quasiment impossible, sans artifices (du type substitution de morceaux de textes par la méthode sIFR – scalable Imman Flash Replacement - ou via la création préalable de jpeg utilisant des polices exotiques, méthodes qui toutes deux amenaient leur lot de problèmes, en termes de référencement notamment), de sortir de la sainte trilogie Times – Arial – Verdana ou de toute autre police largement répandue sur nos machines. La logique prévalent était celle du plus petit dénominateur commun puisque pour que l’affichage de la police puisse se faire correctement, il était nécessaire que celle-ci ait été préalablement installée sur la machine de l’internaute. D’où le choix de caractères très répandus et pas forcément très originaux…

2010, l'année du changement pour les web fonts

Depuis 2010, la situation a évolué et les graphistes web commencent à prendre la mesure de ce changement. Avec l’arrivée sur le marché de polices de caractères spécialement conçues pour l’affichage sur écran et de navigateurs implémentant mieux les normes css, notamment les media queries, qui permettent au designer de savoir quel type de lecteur utilise l’internaute afin d’adapter son design en fonction, nous sommes entrés dans une nouvelle ère du design sur le web. La grande nouveauté introduite par les web fonts réside dans le fait qu’il n’est plus nécessaire que l’internaute dispose de la police installée sur sa machine au préalable mais que celle-ci peut être téléchargée à la volée à partir d’un serveur web distant.
Cette possibilité est offerte par la propriété @font-face en css.

@font-face {
    font-family: Delicious;
    src: url('Delicious-Roman.otf');
}

Bien que cette propriété existait déjà en css2, elle ne permettait, jusqu’il y a peu, que d’incorporer des polices propriétaires de format .eot, assez peu répandues. Les constructeurs de navigateurs et les fondeurs ne parvenant pas à se mettre d’accord sur un format de fontes commun. Aujourd’hui, il est possible de travailler avec n’importe quel format de police, Open Type (.otf), True Type (.ttf), Web Open Font Format (.woff) ou vectoriel (.svg). Toutefois, dans la pratique, les tests multi-navigateurs sont encore nécessaires, les implémentations divergeant sur un certain nombre de points.
Bonne nouvelle cependant, le format .woff est à présent accepté par les différents navigateurs, Mozilla, Safari, Chrome et IE (depuis mars 2011).

Graisses, italiques et largeur de caractère

L’un des avantages des web fonts, outre leur disponibilité gratuite sur de nombreux services comme Google WebFonts ou Fontdeck, est qu’elles permettent l’utilisation de différentes graisses ou du vrai italique et non, comme c’est souvent le cas, de faux-gras ou d’une version simplement oblique d’une fonte normale, ce qui rend les polices moins lisibles ou moins percutantes.

@font-face{
    font-family : "maFonte";

    src : url('maFonteGras.woff') format('woff'),
    font-weigth : 600;
}


De nombreuses web fonts proposent également des versions condensées ou, au contraire, élargies. Google Web Fonts met à disposition un outil très pratique pour sélectionner les polices selon différents critères, notamment leur largeur.

Les super familles de polices de caractères peuvent s’avérer utiles pour ce genre de considérations, car elles disposent de différents types de graisses et de largeur, pour un usage multiple sur une page et garantir une cohérence graphique à l’ensemble, du titre au corps de texte ou à la légende d’image.

En conclusion

Quelle que soit la police utilisée au final, il reste fondamental, pour une création graphique réussie, de retenir et d’appliquer les bonnes pratiques de mise en page et les usages typographiques de base. Fontdeck a mis au point un outil pratique permettant de tester et comparer les polices les unes par rapport aux autres. Mais rien ne remplacera jamais les règles de bonne composition et l’œil expert du graphiste web.