Ce document vous aidera à mieux distinguer les polices d'écriture et comment les utiliser sur le Web.

1. La typographie sur
le web
Avec l’informatique, le scribe du web se voit doté d’une très large palette de polices. Devant
ce foisonnement, comment les distinguer ?
Pour mieux comprendre les jeux typographiques, il est d’abord nécessaire de revoir son
vocabulaire !
Sommaire
Les caractéristiques : .................................................................................................................... 2
Ligatures ................................................................................................................................ 2
Monospace ............................................................................................................................ 2
La taille ................................................................................................................................... 2
Serif ........................................................................................................................................ 3
Sans serif ................................................................................................................................ 3
La taille ................................................................................................................................... 3
Les caractères spéciaux ......................................................................................................... 3
Comment s’y retrouver ? .............................................................................................................. 4
Notre avis : ...................................................................................................................................... 5
Le lecteur ............................................................................................................................... 5
Avec ou sans serif ?................................................................................................................ 5
L’interligne : ........................................................................................................................... 5
La Comic sans MS .................................................................................................................. 6
La Gotham.............................................................................................................................. 8
Calibri ..................................................................................................................................... 8
Myriad pro ............................................................................................................................. 8
Les icônes ............................................................................................................................... 8
La règlementation.................................................................................................................. 9
Le mot de la fin .............................................................................................................................. 9

2. Les caractéristiques :
Ligatures : liaisons entre certaines lettres,
effet visuel plus propre ou plus design selon
les cas.
Monospace : chaque caractère utilise un
espacement unique
La taille des caractères se définissent généralement en px (px = pixels) c’est-à-dire sa hauteur
en pixels.
Il ne faut pas confondre px et pt (point)

3. Chaque ligne est séparée de la précédente par un interligne (désigné par « em »).Par exemple
1.5 em = 150% de la hauteur des caractères.
Serif : avec empatements
Sans serif : sans empatements
Cet aspect est important dans la création web car certaines typographies ne sont pas
compatibles avec certains logiciels. C’est la raison pour laquelle sur le web, les feuilles de
style comportent au moins deux typographies : la première est celle souhaitée, et la seconde
est celle par défaut dans le cas où la première n’est pas comprise par le logiciel ; il s’agira d’une
typo sans serif, car elle est la plus anciennement utilisée sur les postes informatiques.
La taille standard des caractères dans un document est de 16px (px = pixels) et chaque ligne est
séparée de la précédente par un interligne (désigné par « em »).
Les caractères spéciaux comme « é » « è » « ç » ne sont pas automatiquement inclus dans les
polices d’écritures ; veillez donc à ce qu’ils soient pris en charge par la police choisie.

4. Comment s’y retrouver ?
Un outil vous permettra de faire un tour d’horizon des typographies : la classification VoxAtypi. Elle constitue un repère chronologique des grandes familles de police d’écriture. Dans
cette taxinomie, on peut relever plusieurs familles intéressantes pour le web :
-
Mécanes : issues de la révolution industrielle, aspect brut et sérieux.
-
Linéales : très populaires sur le web (sans serif).
-
Didones : utilisées dans le domaine de la mode.
-
Incises : rappellent l’écriture à la main, les temples grecs ; ne convient pas sur le web
car elle est difficile à lire.
Pour vous procurer des polices d’écritures, il y a Google fonts (en anglais) qui répertorie un
vaste choix de typographies que l’on peut sélectionne en fonction de critères tels que : avec ou
sans serif, pour les titres ou non (display), effet « écrit à la main », l’épaisseur des lettres
(thinkness), la largeur des caractères (width), plus ou moins en italic (slant), et les faire
apparaître sous la forme de phrases (sentence), de paragraphes, etc.

5. Notre avis :
L’écriture est un outil qui a 5000 ans d’existence et les différents courants typographiques
apparus depuis cette ère sont aujourd’hui imprimés dans nos esprits avec toutes sortes de
références associées. De ce fait, les typographies constituent un élément important de la
communication au sens où elles agissent comme des repères d’utilisation.
La typographie est pour certains une vrai passion, avec des calculs géométriques précis qui
relèvent quasiment de l’architecture. On peut vite être submergé. Mais dans la réalité, la
personne qui travaille quotidiennement avec les polices d’écriture, sélectionne une dizaine de
typographies qui lui semble les plus intéressantes et avec lesquelles elle va travailler.
Le lecteur est évidemment au cœur de la réflexion sur le choix d’une police. Il faut se mettre à
sa place : la tranche d’âge, les sujets abordés, le thème général du site.
Avec ou sans serif ?
-
L’écriture avec empâtements est plus reposante pour l’œil car les lettres sont plus
« liées » ; elle est donc à privilégier pour les textes de plusieurs lignes (paragraphes,
textes longs ou explicatifs comme les mémoires, les livres).
-
A l’inverse, les lettres sans empâtements ont été créées pour être bien lisibles sur les
premiers écrans d’ordinateurs. Elles sont « hachées », on passe plus de temps à les lire
et elles attirent rapidement l’œil ; cela conviendra donc plutôt aux titres, noms de
catégorie et phrases courtes (comme sur twitter).
L’écriture serif est un repère d’utilisation d’une toute autre dimension, car elle rappelle les
textes officiels, l’écriture à la main des scribes, l’effet « gravé dans la roche ».
L’interligne : 1.5 em (150% de la hauteur des caractères) est l’interligne généralement utilisé
sur le web. On peut aller jusqu’à 1.3 em pour les textes, mais en dessous on arrive sur un effet
« paté » qui ne donne pas envie de lire ; en revanche pour les titres avec des grandes polices,
c’est tout à fait possible. 1.25 em est l’interligne que l’on retrouve dans les livres.

6. La Comic sans MS : cette police est très souvent usitée mais elle doit être choisie avec
précaution, car elle est porteuse, comme pour les autres polices, d’une histoire ;
Vincent Connare, son auteur, travaillait dans la création de typographies pour les enfants, et il
s’inspira directement des bandes dessinées et de l’écriture manuscrite. Bien que Comic sans
MS fasse partie des outils d’édition de texte, elle n’était prévue que pour les phylactères dans
microsoft bob* (les bulles de dialogues) et les livres pour enfants.
** Attention, minute culture et effet mes rides !
Microsoft Bob est une interface créée en 1995 pour faciliter l’utilisation de l’ordinateur.

7. Ainsi est apparu COMIC sans MS :
Vous reconnaissez le chien ?

8. La Gotham : très bien pour le web, cette
police peut s’appliquer sur beaucoup de
contenu web, elle est neutre et sérieuse, elle
fait partie de la famille des mécanes, mais elle
est sous licence.
Calibri : est la police idéale sur le web pour tous vos textes.
Myriad pro : est la police web la plus usitée
sur le web
Les icônes sont des repères visuels souvent utilisés et ils permettent au lecteur de décrypter
rapidement la nature du bouton/catégorie/paragraphe qu’ils désignent. Une base donnée est
proposée par Fontello et IcoMoon dont l’avantage est de disposer d’icônes finement détaillées
qui ne deviendront pas floues si vous zoomez sur la page web.
Veillez à ne pas en abuser pour ne pas allonger le temps de chargement de la page !

9. La règlementation est complexe en France et il est nécessaire de bien se renseigner sur la
licence qui couvre telle ou telle typographie.
Par exemple, les polices de logos peuvent être reprises mais seulement pour le second degré
(détourner) mais pas à but commerciaux.
Le mot de la fin
La variété des typographies est telle qu’elle nous pousserait à en utiliser plusieurs ; Néanmoins,
il est sage de se limiter à 2 typographies pour un même site, afin de garder de la cohérence et
suivre une certaine charte graphique.
Le plus important sur un site reste le contenu et il doit être lisible.
Merci de votre attention.
Formateur : Damien SENGER
Rédactrice : LEVY Céline