Typographie et mise en page

Virginie Ahrens - Master 1 ILTS-CDMM

 Typographie : notions élémentaires

• Caractères
• Familles de caractères
• Polices de caractères
• Unités de mesure typographiques :
point didot, point pica, pica, pouce.

Virginie Ahrens - Master 1 ILTS-CDMM

Détail d’une typo 1/2

Virginie Ahrens - Master 1 ILTS-CDMM

Détail d’une typo 2/2

Virginie Ahrens - Master 1 ILTS-CDMM

 Les classifications de caractères

1921 – Thibaudeau
1952 – Vox
1962 – Atipy
1964 – Din
1964 – Novarese
1978 – Jacno
1980 – Alessandrini

Virginie Ahrens - Master 1 ILTS-CDMM

Exemple : classification Vox 
(la plus connue)

Virginie Ahrens - Master 1 ILTS-CDMM

 Classification Vox 1/6

Classification Époques Valeurs

Manuaires Moyen-âge • Fantastique

• Biblique
La famille Manuaires • Imaginaire
comprend les caractères
dont la forme s’inspire des
• Ténébreux
lettres dessinées au moyen • Mythique
âge. • Mystérieux
• Tradition

Humanes Renaissance • Sciences

Humanisme humaines
XVIe siècle • Savoir
• Culture (au sens
La famille Humanes s’inspire large)
des formes de lettre
romaines rénovées à la
• Texte à lire sur
Renaissance. papier

Virginie Ahrens - Master 1 ILTS-CDMM

 Classification Vox 2/6

Classification Époques Valeurs

Garaldes XVIIe siècle • Féminin

• Léger
La famille des Garaldes sont • Douceur
les caractères dont la forme
rappelle celle des créations
• Sensible
classiques françaises et • Souplesse
italiennes.

Réales XVIIIe siècle • Masculin

• Riche
La famille de Réales • Prestigieux
comprend les caractères de
labeur dont le dessin
• Luxe
rappelle les types les plus
utilisés au 18e siècle.

Virginie Ahrens - Master 1 ILTS-CDMM

 Classification Vox 3/6

Classification Époques Valeurs

Didones XIXe siècle • Droit

(exemples au musée • Précis
d’Orsay) • Exigent
• Rigueur
La famille des Didones • Impeccable
comprend les caractères qui
• Presque sévère
évoquent la typographie pure
du 19e siècle.

Mécanes XXe siècle • Début de la pub

(Renault, Marlboro) • Mécanique
• Solide
La famille des Mécanes • Stable
comprend les caractères qui,
par leurs formes
• Construit
géométriques, évoquent l’ère • Puissant
de la mécanique. • Fort

Virginie Ahrens - Master 1 ILTS-CDMM

 Classification Vox 4/6

Classification Époques Valeurs

Linéales Contemporaine • Valeurs de notre

(Pas d’empattement) époque
• Information pure (et
La famille des Linéales pas communication)
comprend les types de • Moderne
caractères bâton (sans
empattement) de la
• Actuelle
typographie moderne. • Design
• Claire
• Nette
• Basique
• Epurée

Virginie Ahrens - Master 1 ILTS-CDMM

 Classification Vox 5/6

Classification Époques Valeurs

Incises Mairies, Imitations, • Institutionnelle

écritures gravées • Administratif
(exemple : Bistrot • Loi
Romain)

Les familles Incises

comprend les caractères
s’inspirant des inscriptions
de l’antiquité (terminales
élargies).

Scriptes Ecriture courante • Humaine

• Unique
Les familles Scriptes • Singulière
comprennent les caractères
qui imitent l’écriture courante
• Personnelle
ou la calligraphie. • Emotion
• Plaisir
• Affect
Virginie Ahrens - Master 1 ILTS-CDMM
 Classification Vox 6/6

Classification Époques Valeurs

Excessives/ Electronique • –
Expressives

Virginie Ahrens - Master 1 ILTS-CDMM

Quelques polices de caractère 
dans la Classification Vox

Virginie Ahrens - Master 1 ILTS-CDMM

 La classification d’Aldo Novarese 1/2

Aldo Novarese (1920 – 1995) propose

une classification en 10 familles
découlant directement de la
classification Thibaudeau (fin des
années 50) classée à partir des
empattements.

Virginie Ahrens - Master 1 ILTS-CDMM

 La classification d’Aldo Novarese 2/2

Lapidaires Ornées Médiévaux Egyptiennes Bodoniens

Vénitiens Linéraires Transitionnels Fantaisies Ecritures

Virginie Ahrens - Master 1 ILTS-CDMM

 Police Serif et Sans-Serif

Police sans serif (caractères baton) – ici Helvetica

Police serif (caractères avec empattement) – ici Times

Empattements en rouge

Virginie Ahrens - Master 1 ILTS-CDMM

 Exemples

• Arial 14 (sans serif)

• abcdefghijklmnopqrstuvwxyz1234567890

• Comic 14 (sans serif)

• abcdefghijklmnopqrstuvwxyz1234567890

• Franklin 14 (sans serif)

• abcdefghijklmnopqrstuvwxyz1234567890

• Times 14 (serif)
• abcdefghijklmnopqrstuvwxyz1234567890

• Garamond 14 (serif)
• abcdefghijklmnopqrstuvwxyz1234567890

Virginie Ahrens - Master 1 ILTS-CDMM

 Le choix des polices

• Chaque police a sa spécificité

• Attention aux polices capitalisées

Arial Courier Garamond Copperplate Century

Virginie Ahrens - Master 1 ILTS-CDMM

 Exemple serif / sans-serif

•1 Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie
2 éteinte, mes yeux se fermaient si vite que je n’avais pas le temps de me dire :
3 « Je m’endors. » Et, une demi-heure après, la pensée qu’il était temps de
4 chercher le sommeil m’éveillait ; je voulais poser le volume que je croyais avoir
5 dans les mains et souffler ma lumière ; je n’avais pas cessé en dormant de faire
6 des réflexions sur ce que je venais de lire, mais ces réflexions avaient pris un
7 tour un peu particulier ; il me semblait que j’étais moi-même ce dont parlait
8 l’ouvrage : une église, un quatuor, la rivalité de François Ier et de Charles-Quint.

•1 Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux
2 se fermaient si vite que je n’avais pas le temps de me dire : « Je m’endors. » Et, une demi-
3 heure après, la pensée qu’il était temps de chercher le sommeil m’éveillait ; je voulais poser le
4 volume que je croyais avoir dans les mains et souffler ma lumière ; je n’avais pas cessé en
5 dormant de faire des réflexions sur ce que je venais de lire, mais ces réflexions avaient pris
6 un tour un peu particulier ; il me semblait que j’étais moi-même ce dont parlait l’ouvrage :
7 une église, un quatuor, la rivalité de François Ier et de Charles-Quint.

Virginie Ahrens - Master 1 ILTS-CDMM

 Variantes typographiques

• Romain
• Italiques ou penchés
• Caractères gras
• Petites capitales

Virginie Ahrens - Master 1 ILTS-CDMM

 Simplification et lisibilité

• deux mille un, odyssée de l’espace

• 2001, odyssée de l’espace

• MDCCLXXXIX 10 signes
• 1789 4 signes
• mille sept cent quatre-vingt-neuf 28 signes

Virginie Ahrens - Master 1 ILTS-CDMM

 Niveaux de lecture

• Visualisation de la hiérarchie des

informations sur la page
• Variation du corps, de la graisse des
caractères, de l’alignement permettent
de différencier ou au contraire de
regrouper visuellement les éléments
de même nature

Virginie Ahrens - Master 1 ILTS-CDMM

 Analyse des caractères et lisibilité

• Critères impactant la lisibilité :

• La longueur des ascendantes et des
descendantes
• L’axe et l’encombrement des caractères
• Le corps des caractères
• L’interlignage

Virginie Ahrens - Master 1 ILTS-CDMM

 Analyse des caractères et lisibilité

• Corps (taille) des caractères :

• Au dessus de 24 pts : à voir
• Au dessous de 24 pts : à lire
• Interlignage
• Espacement vertical entre deux lignes de
texte successives
• Exprimé à l’aide de deux chiffres : 10/12
par exemple

Virginie Ahrens - Master 1 ILTS-CDMM

 Analyse des caractères et lisibilité

• Longueur des lignes

• Distance du texte entre la marge de
gauche et la marge de droite
• Moyenne: entre 40 et 70 caractères de
texte, soit 10 à 12 mots par ligne

Virginie Ahrens - Master 1 ILTS-CDMM

L’approche, la chasse, l’encombrement
1/3

• L’approche est un blanc placé entre 2

lettres d’un mot
• La chasse est la largeur visible de
chaque caractère
• L’encombrement est la largeur
invisible de chaque caractère

Virginie Ahrens - Master 1 ILTS-CDMM

L’approche, la chasse, l’encombrement
2/3

Encombrement

Chasse

Approche

Virginie Ahrens - Master 1 ILTS-CDMM

 L’approche, la chasse, l’encombrement
3/3

Approche standard

Approche
excessive

Approche trop serrée

Virginie Ahrens - Master 1 ILTS-CDMM

 Mise en valeur des paragraphes

• Alinéas
• Renfoncement de certaines lignes de
texte. Visuellement, l’œil enregistre qu’il
s’agit de débuts de paragraphes.
• Une rentrée d’alinéas permet de
distinguer 2 paragraphes sans ajouter
d’espace
• Permet d’indiquer au lecteur un nouveau
paragraphe en cas de ligne pleine
Virginie Ahrens - Master 1 ILTS-CDMM
 Composition de textes ou de mots 1/8

• Justifié
• Fer à gauche
• Fer à droite
• Centré
• Vertical
• Détouré

Virginie Ahrens - Master 1 ILTS-CDMM

Composition de textes ou de mots 2/8

• Justifié
• Le texte occupe la largeur fondamentale du
format donné
• Le format Justifié est utilisé
dans un texte long
• 1500 signes minima

Virginie Ahrens - Master 1 ILTS-CDMM

Composition de textes ou de mots 3/8

• Fer à gauche
• Créer un effet d’annonce
• Lecture transversale
• Brèves, textes courts

Virginie Ahrens - Master 1 ILTS-CDMM

Composition de textes ou de mots 4/8

• Fer à droite
• Dissonance
• Pas dans les habitudes
de lectures occidentales,
de gauche à droite
• Textes extrêmement courts
(maxi 5 lignes)
• Textes d’appoint

Virginie Ahrens - Master 1 ILTS-CDMM

Composition de textes ou de mots 5/8

• Centré
• Communication sans tension
• Cartons d’invitation
par exemple

Virginie Ahrens - Master 1 ILTS-CDMM

Composition de textes ou de mots 7/8

• Vertical
• Classer
• Répertorier
• A utiliser avec parcimonie

Virginie Ahrens - Master 1 ILTS-CDMM

Composition de textes ou de mots 8/8

• Détouré
• Par rapport à une forme
ou une image

Virginie Ahrens - Master 1 ILTS-CDMM

 Lézarde, cheminée

• Blanc disgracieux devant être corrigé.

Virginie Ahrens - Master 1 ILTS-CDMM

 Veuves et orphelins
• Une ligne veuve est
la dernière ligne
d'un paragraphe
apparaissant isolée
en haut d'une page.
• Un orphelin est
la première ligne
d'un paragraphe
apparaissant isolée
en bas d'une page.
Orphelin
Virginie Ahrens - Master 1 ILTS-CDMM
Lorem ipsum dolor sit amet, consecte-
tur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit
amet, adipiscing nec, ultricies sed,
dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper
congue, euismod non, mi. egestas sed,
gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Proin
porttitor, orci nec nonummy molestie,
enim est eleifend mi, non fermentum
diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae,
consequat in, pretium a, enim. Pellen-
tesque congue. Ut in risus volutpat
libero pharetra tempor. Cras vestibulum
bibendum augue. Praesent egestas leo
in pede. Praesent blandit odio eu enim.
Pellensodales. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices
Lorem ipsum dolor sit amet, consecte-
tur adipiscing elit. Sed non risus.
Suspendisse lectus tortor, dignissim sit
amet, adipiscing nec, ultricies sed,
dolor. Cras elementum ultrices diam.
Maecenas ligula massa, varius a, semper
congue, euismod non, mi. egestas sed,
gravida nec, ornare ut, mi. Aenean ut
orci vel massa suscipit pulvinar. Proin
porttitor, orci nec nonummy molestie,
enim est eleifend mi, non fermentum
diam nisl sit amet erat. Duis semper.
Duis arcu massa, scelerisque vitae,
consequat in, pretium a, enim. Pellen-
tesque congue. Ut in risus volutpat
libero pharetra tempor. Cras vestibulum
bibendum augue. Praesent egestas leo
in pede.
Praesent blandit odio eu enim. Pellen
sodales.
Veuve
Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia
Curae; Aliquam nibh. Mauris ac mauris sed
pede pellentesque fermentum. Maecenas
adipiscing ante non diam sodales hendre-
rit. Ut velit mauris, egestas sed, gravida
nec, ornare ut, mi. Aenean ut orci vel
massa suscipit pulvinar. Nulla sollicitudin.
Fusce varius, ligula non tempus aliquam,
nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque
rhoncus nunc et augue. Integer id felis.
Curabitur aliquet pellentesque diam.
Integer quis metus vitae elit lobortis
egestas. Lorem ipsum dolor sit amet,
lorem vel rhoncus faucibus, felis magna
fermentum augue, et ultricies lacus lorem
varius purus. Curabitur eu amet.
massa suscipit pulvinar. Nulla sollicitudin.
Fusce varius, ligula non tempus aliquam,
nunc turpis ullamcorper nibh, in tempus
sapien eros vitae ligula. Pellentesque
rhoncus nunc et augue. Integer id felis.
Curabitur aliquet pellentesque diam.
Integer quis metus vitae elit lobortis
egestas. Lorem ipsum dolor sit amet,
lorem vel rhoncus faucibus, felis magna
fermentum augue, et ultricies lacus lorem
varius purus. Curabitur eu amet. Ec, ornare
ut, mi. Aenean ut orci vel massa suscipit
pulvinar. Proin porttitor, orci nec
nonummy molestie, enim est eleifend mi,
non fermentum diam nisl sit amet erat.
Duis semper. Duis arcu massa, scelerisque
vitae, consequat in, pretium a, ornare ut,
mi. Aenean ut orci vel massa suscipit
pulvinar. Proin porttitor, orci nec
nonummy molestie.
 Autres termes typographiques

• Crénage
• Cadratin
• Esperluète
• Lettrine
• Texte en drapeau

Virginie Ahrens - Master 1 ILTS-CDMM