À quoi ça sert : les types de polices web

Un écueil que je rencontre bien souvent en rendez-vous : La typographie et le choix des polices.

Aujourd’hui, je te propose de voir deux choses. D’une part, quels types de polices choisir au moment de designer un site et d’autre part, comment défendre tes choix (ou ceux de ton designer).

1 – Plusieurs types de polices

Quand on parle d’un sujet moderne, j’aime assez potasser le contexte historique. Ça permet de comprendre un peu plus de choses.

Premièrement, les empattements en typographie viendraient des marques que laissaient les outils d’écritures (encres et gravures). C’est ce qui aurait probablement donné le style “sérif”.

D’ailleurs, il semblerait que les Romains utilisaient les empattements pour créer des effets de lumière sur les grandes gravures. Cela donnerait une grande visibilité à distance sur les bâtiments.

Pour ce qui est du style “sans-sérif”, autrement dit, sans empattements, sa popularité est beaucoup plus récente. J’ai trouvé 1920 sur cet article de Wikipédia, notoriété apparemment issue du Bauhaus.

Cependant, les polices sans-sérif ont été retrouvées dans les styles humanistes et même gothiques.

Aux débuts de l’informatique, du fait des faibles résolutions d’écrans, le sans-sérif était beaucoup plus utilisé que le sérif. Cela dit, ce dernier revient peu à peu, au grès des améliorations techniques.

2 – Différences entre écran et papier

Au niveau de la typo, la différence majeure entre les deux supports est, selon moi, l’encre. Sur écran, pas d’encre. Alors que le papier, lui, va boire cette dernière. Par conséquent, la police ne ressort pas exactement pareil.

Voilà pourquoi certaines polices sont faites et pensées pour de l’impression (avec cette contrainte d’encre qui ne rendra pas le même effet une fois bue et sèche).

Les polices pour écrans sont déjà conçues en mode “rendu-final”.

Pour plus de précisions, je vous conseille le fabuleux livre Typographie Web de Jason Santa Maria, proposé par la superbe collection A Book Apart. Je précise que, bien que je voue un culte à cette série de livres, ce n’est pas un placement de produit.

Sur-ce, c’est parti pour les 4 types de polices les plus utilisés et dans quels cas les choisir.

3 – Sérif, fais-moi peur

Au menu, on va parler de sérif, de sans-sérif, de cursive et de slab. Bon appétit !

La sérif

Je commence par te présenter la forme la plus utilisée, la plus traditionnelle (les Romains, tout ça, tout ça…)

C’est la forme la plus répandue dans les livres, de part sa grande lisibilité sur de longs paragraphes de textes.

  • Utilisée pour les titres et le corps de texte
  • Essaie de la limiter à une police sérif par design
  • Se paire très bien avec une sans-sérif (l'une en titre ou en call to action, l'autre en corps, par exemple)

La sans-sérif

Le style sans-sérif paraît plus simple et plus épuré. C’est un type de police qui offre un bon rendu lorsqu’on veut jouer entre différentes épaisseurs et tailles de textes.

Comme je l’ai souligné plus haut, c’est le style dominant du web. D’abord historiquement (résolution d’écran …) puis pour des raisons pratiques (jeu sur les tailles et les épaisseurs plus impactant).

  • Utilisée pour les titres et le corps de texte
  • Évite d'utiliser une graisse trop fine sur des petites tailles de textes
  • Se marie très bien avec tous les autres types de polices
polices

La cursive

Polices beaucoup plus rares sur les écrans et sur les impressions. Pour des raisons évidentes :

  • Elles ne sont pas toutes évidentes à lire
  • Leur intégration au sein d’un design a beaucoup d’impact, mais est plus dure à marier
  • C’est difficile de choisir une cursive qui traduise bien l’intention du design. En effet, c’est le type de police le moins neutre.

Cependant, je pense que l’évolution des définitions d’écrans et la production de cursives de meilleure facture et plus lisibles les rendra plus usités.

En outre, ce type de polices est très représentatif de la mouvance actuelle en design qui penche de plus en plus vers l’émotionnel. Je ne serais pas étonné de les rencontrer de plus en plus souvent.

  • Utilisée pour les titres cours et gros, slogans
  • Je les déconseille sur de longs corps de textes​
  • Se marie très bien avec une sans-sérif​

La slab

Je ne connais pas trop l’histoire de la slab. Il semblerait qu’elle vienne d’Allemagne, mais je n’ai pas de sources sûres là-dessus.

Quoiqu’il en soit, c’est à la base un sous-genre de la sérif. Cette dernière se caractérise par des traits uniformes de même épaisseur (un peu comme la sans-sérif), mais gardant les empattements, en les épurant.

C’est une police pratique qui peut être remplie par une couleur, une image ou un motif. Quand tu n’es pas convaincu par une sérif ou une sans-sérif pour un effet percutant, essaie une slab bien épaisse !

  • Principalement utilisée pour le display (gros titres, infographies, etc.)​
  • À éviter pour de petites tailles​
  • Se marie bien avec une sérif ou une sans-sérif​
polices

Conclusion

Ce n’est pas parce que je t’ai présenté 4 familles des polices qu’il faut à tout prix les utiliser toutes dans tes designs. J’ai souvent remarqué que les designs que j’apprécie le plus se limitent à 2 voire 3 polices différentes.

Qui plus est, ce n’est pas non plus une sacro-sainte loi ce que j’ai écrit. Le mieux reste de tester, cela dit, tu peux t’en servir pour argumenter et te baser sur des éléments compréhensibles pour détailler tes choix de polices.

Tu as besoin d’aide pour développer ton site ?

N’hésite pas et appelle-moi