Web Font Specimen – La police des polices

screenshot-webfontspecimen.jpg

Tester le rendu d’une police de caractère sur les navigateurs est une étape trop souvent négligé par les Webdesigners, en effet l’aspect d’une typographie peut varier d’un moteur de rendu à l’autre et desservir complètement le design. Web Font Specimen est une solution assez complète qui va nous permettre de tester nos polices avant de les intégrer à un design.

Fermons les yeux et remontons quelques années en arrière… dans les tumultes du continuum espace-temps nous laissons dernières nous le responsive design, le CSS3, les API HTML5 et traversons la singularité qui nous ouvre la porte d’un univers ou les Web Fonts ne font pas encore partie de notre quotidien de Webdesigner et de développeur Front end.
Le vieille adage « c’était mieux avant » est encore une fois démenti.

Un choix de police restreint

En effet, il y a quelques années, les designers n’avaient le choix qu’entre une dizaine de polices de caractère pour concevoir leur design.
Screenshot_2.png
Et… le Comic Sans qu’il n’est pas utile de présenter… d’ailleurs oublions le tout de suite !

Face à cette limitation, les designers devaient avoir recours à des images pour styliser du texte ce qui avait l’avantage de permettre la réalisation de compositions originales mais l’inconvénient d’augmenter les requêtes http, et de créer une dépendance vis-à-vis du graphiste…

Qu’est-ce qu’une Web Font

Une Web Font n’est rien d’autre qu’une police de caractère appelé directement depuis la feuille de style CSS via la propriété CSS3 @font-face qui maintenant est correctement supporté par la plupart des navigateurs :
Screenshot_1.png

Structure

La feuille de style de WFS reprend la plupart des structures de textes, de paragraphes, de casse et de graisse que vous pourrez rencontrer sur un site Web.

Les différents niveaux de gris ne sont pas oublié cependant n’en tenez pas compte, n’oubliez pas qu’une des contraintes d’accessibilité recommande que le contraste entre le fond d’une page et le texte soit correcte.

Voici un outil parmi temps d'autre qui vous permettra de faire ces vérifications : http://leaverou.github.io/contrast-ratio/

Screenshot_3.png

Petite précision à l’intention des designers, n’oubliez pas de vérifier la licence de la police que vous utiliser et la possibilité ou non de la passer dans le @font-face generator de Fontsquirrel

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

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