Essayer des polices de caractères pour son site Web

La typographie est un élément important à prendre en compte quand il s’agit d’optimiser et d’améliorer la lisibilité des textes sur son blog ou sur son site Web. Le choix est toujours difficile et délicat à faire dans la mesure où il existe un nombre incalculable de polices (pas toujours conçues pour les pages Web) et que le processus de test est particulièrement fastidieux à mettre en œuvre pour bien évaluer les résultats obtenus.
Avec l’outil en ligne Typetester, on dispose d’un moyen rapide et simple pour tester et comparer en même temps le rendu visuel de plusieurs polices de caractères qui vont être appliquées sur un texte d’exemple ou sur un texte à taper ou à copier dans la zone de saisie sample text. Le texte servant d’échantillon test est alors reproduit à l’identique sur trois colonnes sur lesquelles les changements de typographie vont pouvoir être appliqués pour être immédiatement pris en compte. Les comparaisons sont alors très faciles à faire ce qui va rendre le choix définitif plus évident à faire. Le même texte est affiché dans des paragraphes pour les différentes déclinaisons (affichage normal, en gras, en italiques, en majuscules, etc.) de la police de caractères : regular, bold, italic , bold italic, uppercase regular, uppercase bold, uppercase italic, uppercase italic bold, small caps regular, small caps bold, samll caps italic et small caps bold italic.

typetester

La typographie à essayer s’applique sur une colonne individuellement des autres. Outre la police de caractères qui se modifie dans le menu Choose typeface from list (on y trouve les polices les plus courantes ; celles qui sont sûres, celles qui existent par défaut sur Windows et Mac ainsi que quelques Google Fonts) et dans le menu Specify your own (qui affiche celles qui sont installées sur votre propre système), d’autres propriétés (ce sont des propriétés CSS) sont modifiables : taille (exprimée en unités relatives em ; par rapport à une taille de base de 10px modifiable en haut à droite à partir du menu base font size), alignement, couleur du texte, hauteur de ligne, espacement entre les mots, couleurs de fond, espacement entre les lettres, décoration (none, underline, overline ou line-through)  et couleur de fond du texte. Toutes les unités de tailles sont exprimées en em.
Les propriétés du texte d’une colonne se copient sur une autre colonne en cliquant sur les numéros 1, 2 ou 3 sous l’intitulé apply to column. Une fois que les modifications sont jugées satisfaisantes, on récupère les règles CSS correspondantes à une colonne en cliquant sur un des boutons Get CSS for 1st, 2nd ou 3nd qui va ouvrir une fenêtre dans laquelle les règles CSS pourront être récupérées par copier-coller.

typetester-css

Typetester fera donc gagner un temps précieux à tous ceux qui doivent choisir et sélectionner avec soin une typographie adaptée à leur site Web en essayant de multiples combinaisons avant d’en adopter une à mettre en place.

Source : Typetester

Publicités

Les commentaires sont fermés.

%d blogueurs aiment cette page :