Typographie

et mise en page
Bonnes habitudes et pièges à éviter

F O R M AT I O N – A P E C – 1 2 O C T O B R E 2 0 1 2
S E R G E M E R C I E R
Quels sont les trois principaux
éléments d’une mise en page ?

A
Texte Image Blanc
 Choix
typographiques
Familles de polices de caractère

Caractères avec empattement

Typographie
Empattement
Petit trait qui prolonge
les extrémités des traits
droits et obliques
Garamond des lettres

Caractères sans empattement

Typographie
Helvetica

Caractères décoratifs

Caractères scripts
Selon quels critères
doit-on choisir une police ?

La lisibilité Typographie Typographie

Typographie
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Vivamus scelerisque tincidunt magna, quis
tempor augue tempor sed. Suspendisse potenti.
Nunc vitae erat nisl, vitae sodales leo. Mauris sem
augue, commodo sed vulputate vel, sollicitudin
Typographie
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus scelerisque tincidunt magna, quis tempor augue
tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae
sodales leo. Mauris sem augue, commodo sed vulputate vel,
sollicitudin aliquam tellus. Ut eget mauris at dui iaculis
ultricies quis a metus. Fusce pretium, ligula vitae varius

L’adéquation Notaire Notaire

La reproduction Typographie Typographie
Typographie Typographie
Les variations
à l’intérieur
d’une police
 Respect
du dessin
des caratères

-Respect des proportions

-Ne pas étirer la typographie
Nombre de police dans une page

Two is a couple three’s a crowd !

 Attributs
typographiques
Mise en relief typographique
Minuscule
Bonjour
BONJOUR
Majuscule
Interligne Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus scelerisque tincidunt
magna, quis tempor augue
tempor sed. Suspendisse
potenti. Nunc vitae erat nisl,
vitae sodales leo. Mauris sem
augue, commodo sed vulpu-
tate vel, sollicitudin aliquam
tellus. Ut eget mauris at dui
iaculis ultricies quis a metus.
Fusce pretium, ligula vitae
varius sagittis, ante nulla
lobortis nisl, ut ullamcorper
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus scelerisque tincidunt
magna, quis tempor augue
tempor sed. Suspendisse
potenti. Nunc vitae erat nisl,
vitae sodales leo. Mauris sem
augue, commodo sed vulpu-
tate vel, sollicitudin aliquam
Certaines polices de caratère
ne sont pas faites
pour être en majuscule !
CERTAINES
POLICES DE
CARATÈRE
NE SONT PAS
FAITES POUR ÊTRE
EN MAJUSCULE !
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Vivamus scelerisque tincidunt
magna, quis tempor augue
tempor sed. Suspendisse
potenti. Nunc vitae erat nisl,
vitae sodales leo. Mauris sem
augue, commodo sed vulpu-
tate vel, sollicitudin aliquam
tellus. Ut eget mauris at dui
iaculis ultricies quis a metus.
Fusce pretium, ligula vitae
varius sagittis, ante nulla
lobortis nisl, ut ullamcorper
nisi metus sit amet enim. Cras
et arcu arcu, sit amet volutpat
velit. Aliquam ut tortor enim,
a tristique nisl. In leo nisi,
tincidunt vitae dictum id,
Mise en relief typographique

Italique,

soulignement Soulignement tranche les jambages inférieurs

et graisse Typographie
Bien choisir les attributs
typographiques
Alignements
Lorem ipsum dolor sit amet, consectetur
Texte adipiscing elit. Vivamus scelerisque
tincidunt magna, quis tempor augue
aligné tempor sed. Suspendisse potenti. Nunc
vitae erat nisl, vitae sodales leo. Mauris
à gauche sem augue, commodo sed vulputate vel,
sollicitudin aliquam tellus. Ut eget mauris
at dui iaculis ultricies quis a metus. Fusce
pretium, ligula vitae varius sagittis, ante
nulla lobortis nisl, ut ullamcorper nisi
metus sit amet enim. Cras et arcu arcu, sit
amet volutpat velit. Aliquam ut tortor
enim, a tristique nisl. In leo nisi, tincidunt
vitae dictum id, tristique sit amet dolor.
Lorem ipsum dolor sit amet, consectetur
Texte adipiscing elit. Vivamus scelerisque
tincidunt magna, quis tempor augue
centré tempor sed. Suspendisse potenti. Nunc
vitae erat nisl, vitae sodales leo. Mauris
sem augue, commodo sed vulputate vel,
sollicitudin aliquam tellus. Ut eget mauris
at dui iaculis ultricies quis a metus. Fusce
pretium, ligula vitae varius sagittis, ante
nulla lobortis nisl, ut ullamcorper nisi
metus sit amet enim. Cras et arcu arcu, sit
amet volutpat velit. Aliquam ut tortor
enim, a tristique nisl. In leo nisi, tincidunt
vitae dictum id, tristique sit amet dolor.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus scelerisque Texte
tincidunt magna, quis tempor augue
tempor sed. Suspendisse potenti. Nunc aligné
vitae erat nisl, vitae sodales leo. Mauris
sem augue, commodo sed vulputate vel, à droite
sollicitudin aliquam tellus. Ut eget mauris
at dui iaculis ultricies quis a metus. Fusce
pretium, ligula vitae varius sagittis, ante
nulla lobortis nisl, ut ullamcorper nisi
metus sit amet enim. Cras et arcu arcu, sit
amet volutpat velit. Aliquam ut tortor
enim, a tristique nisl. In leo nisi, tincidunt
vitae dictum id, tristique sit amet dolor.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vivamus scelerisque
tincidunt magna, quis tempor augue tempor Texte
sed. Suspendisse potenti. Nunc vitae erat
nisl, vitae sodales leo. Mauris sem augue, justifié
commodo sed vulputate vel, sollicitudin
aliquam tellus. Ut eget mauris at dui iaculis
ultricies quis a metus. Fusce pretium, ligula
vitae varius sagittis, ante nulla lobortis nisl,
ut ullamcorper nisi metus sit amet enim.
Cras et arcu arcu, sit amet volutpat velit.
Aliquam ut tortor enim, a tristique nisl. In
leo nisi, tincidunt vitae dictum id, tristique
sit amet dolor.
Critères de qualités
d’une bonne typographie

Lisibilité

Contraste et harmonie

Transmission
efficace d’un message
Mise en page
et trajet visuel
La grille graphique

Utiliser une grille et aligner les éléments sur celle-ci.

Fractionner les colonnes grâce à la grille modulaire.
Les regroupements

Utiliser le regroupement pour simplifier la mise en page.

La place du blanc

-Un des trois éléments de la mise en page

-Permet à la page de respirer
-Mettre en valeur les éléments
-Résister à l’envie naturelle de remplir les blancs.
Qu’est-ce que le trajet visuel ?
Harmonies
de couleur
Utiliser des harmonies de couleur

http://colorschemedesigner.com/
Choisir une harmonie
et limiter le nombre de couleurs

Harmonie par analogie

Gamme de valeurs Couleurs froides

Couleurs voisines Couleurs pastels

Couleurs chaudes Couleurs ternes

Harmonie par contraste

Complémentaires Contraste de quantité

Triade Contraste chaud/froid

Tétrade Contraste clair/obscur

Choisir une harmonie
et limiter le nombre de couleurs
Si possible,
utiliser l’harmonie
présente dans l’image

Oser utiliser
des surfaces
de couleur
À éviter...

Choisir toutes les couleurs du monde !

 Cadrage
des images
Respecter
les proportions
Ne pas faire
de réflexions d’image
Impact d’un cadrage dynamique

http://www.linternaute.com/photo_numerique/cadrage/
Cadrage Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vivamus scelerisque tincidunt magna, quis tempor augue
tempor sed. Suspendisse potenti. Nunc vitae erat nisl, vitae
sodales leo. Mauris sem augue, commodo sed vulputate
vel, sollicitudin aliquam tellus. Ut eget mauris at dui iaculis
ultricies quis a metus. Fusce pretium, ligula vitae varius
sagittis, ante nulla lobortis nisl, ut ullamcorper nisi metus
sit amet enim. Cras et arcu arcu, sit amet volutpat velit.
Aliquam ut tortor enim, a tristique nisl. In leo nisi, tincidunt
Nullam mollis vitae dictum id, tristique sit amet dolor.

Nullam mollis neque eu orci imperdiet sit amet lobortis

lacus ornare. Pellentesque quis diam ante. Suspendisse
potenti. Mauris non congue metus. Sed fringilla vulputate
massa in bibendum. Donec feugiat massa sit amet diam
laoreet ut molestie magna rutrum. Mauris nulla purus,
sagittis quis cursus et, porttitor nec sapien. Morbi at mauris
in urna mollis laoreet. Suspendisse leo massa, dignissim non
bibendum id, consectetur fringilla ante. Etiam ut ultricies
erat. Mauris non porta felis. Praesent ultrices mi ullamcor-
per nisl pellentesque scelerisque. Aliquam consequat facili-
sis turpis nec tempor. Suspendisse potenti.

Donec consequat quam et nunc aliquam tincidunt scele-

risque nisl porta. Phasellus porttitor enim suscipit felis
ultrices accumsan elementum dui tincidunt. Nulla ultricies,
tortor a sagittis ullamcorper, risus orci posuere enim, eget
bibendum risus enim et lacus. Morbi scelerisque, nisl eget
luctus porttitor, justo est venenatis nibh, vitae interdum
dolor dolor ut tellus. Proin accumsan consectetur ipsum,
quis viverra massa malesuada eget. In consectetur ipsum
purus. Aliquam augue diam, eleifend et vulputate id,
 Qualités
d’un document
Les 15 critères de qualités
d’une mise en page

Le contraste La proportion Le mouvement

La lisibilité La profondeur L’originalité
L’harmonie Le dynamisme Le rythme
L’ordre L’équilibre La nuance
L’espace La pertinence La structure

La beauté est subjective, la qualité ne l’est pas.

Qu’est-ce
qui cloche ?
Qu’est-ce
qui cloche ?
 © Serge Mercier 2012

http://sherzzz.com