Infotypographie

Typographie
Infographie
CCI Grenoble – Groupe Formation
Règles d'infographie – 19 et 26 / 01 / 2006
© Julien PIERRE - 2006
typographie
infographie
Sommaire
Grilles .......................................................................................2
le nombre d'or ............................................................................................................. 2
racine de 2 ................................................................................................................... 2
le 4 par 3...................................................................................................................... 2
Colonnes ..................................................................................................................... 4
Formes ......................................................................................5
disposition ................................................................................................................... 5
symbolique .................................................................................................................. 5
Couleurs....................................................................................7
Symbolique ................................................................................................................. 7
Association / Composition ........................................................................................ 10
RVB et CMJN........................................................................................................... 10
Quelques conseils...................................................................................................... 11
Unités de mesure ....................................................................12
Le Point ..................................................................................................................... 12
Le Corps.................................................................................................................... 12
Le Cadratin................................................................................................................ 12
Le Caractère............................................................................13
Classifications .........................................................................15
Nuances & Contrastes ..............................................................16
Caractère gras............................................................................................................ 16
Caractère italique ...................................................................................................... 16
Capitales.................................................................................................................... 16
L'espace ..................................................................................17
Interlettrage ............................................................................................................... 17
Espace mot ................................................................................................................ 17
Alignement................................................................................................................ 17
Interlignage ............................................................................................................... 17
Règles de typographie ............................................................18
Sur Ordinateur ........................................................................23
Pixel .......................................................................................................................... 23
Du point au Pixel....................................................................................................... 23
Polices vectorielles.................................................................................................... 23
Polices dynamiques................................................................................................... 23
Lissage ...................................................................................................................... 24
Jeux de caractère ....................................................................................................... 24
Installation................................................................................................................. 24
Récupération de fontes.............................................................................................. 24
Utilitaires................................................................................................................... 24
1
typographie
infographie
Grilles
Un document avec texte ou de l'image doit être structuré par une grille, surtout s'il s'inscrit
dans une répétition (charte graphique, maquette de journal).
Les grilles sont structurées par des proportions (rapport hauteur/largeur) : on en compte 3
principales.
voir les illustrations dans le diaporama
le nombre d'or
Équivalent à 1,618…
(√5 + 1) Proportion célèbre utilisée depuis la Renaissance.
2 Exploitable uniquement dans un format non contraint (tableau,
architecture, etc.)
racine de 2
Rapport hauteur/largeur utilisé dans le format de papier ISO/AFNOR du A0
√2
au A4
A privilégier dans les documents de cette norme.
le 4 par 3
Format doublement exploité : les grandes affiches publicitaires et les écrans.
(1024/768 = 1.33)
A exploiter dans les conceptions de grille de page web
Il existe bien entendu d'autres proportions, notamment en fonction du rapport texte/image.
2
typographie
infographie
Grilles
• La première étape concerne le rapport entre le blanc et le gris : entre les espaces
vides où la feuille blanche apparaît et les différentes zones remplies par le texte.
Il existe une autre règle pour délimiter les marges entre blanc et gris, celle Josef Muller-
Brockman.
page de droite
1,5
xxxxxxxxxxxxxxxxxxxxxxxx
1 2
2,5
3
typographie
infographie
• Les proportions servent à fournir une grille de positionnement des différents
éléments sur le document.
Il est possible de les réaliser ou de les afficher dans chaque logiciel (Publisher avec les
repères de mise en page, PowerPoint dans Affichage/Grilles et repères…, Photoshop
avec ctrl+h et dans Dreamweaver en créant des <div>).
Le principe de la grille est de définir des zones en colonnes et en lignes ; repères sur lesquels
reposeront les zones de texte des différents éléments de la page : titre, sous-titre, chapô,
encarts, article, etc.. La grille permet aussi d'harmoniser le rapport entre les blancs (espaces
vides comme les gouttières entre les zones de texte) et le gris (ligne de texte).
Colonnes
Il est convenu pour une page A4 d'utiliser entre 4 et 6 colonnes.
Pour calculer la largeur d'une colonne, plusieurs règles sont proposées :
- 1,5 fois la largeur d'un alphabet dans la police par défaut (en général 12pts) ;
- entre 40 et 60 caractères dans la police par défaut.
• Une fois la grille définie ainsi que le nombre de colonnes, ce canevas sert à placer
les différents éléments, de manière tout à fait modulaire.
4
typographie
infographie
Formes
La page, les colonnes et les différentes zones sont de formes rectangulaires. Néanmoins, il est
tout à fait envisageable d'utiliser d'autres formes dans un document. Cependant, l'utilisation
de ces formes est soumise à des questions de rapport ou disposition entre elles et des
problèmes de symboliques ou de signification dans l'inconscient collectif.
disposition
Le design moderne repose –en partie- sur les notions de la Gestalt Theorie.
Voir les illustrations dans le diaporama
- équilibre
- rythme
- proportion
- prédominance
- unité
- contraste ou opposition
- espace positif ou négatif
- règle des tiers
- centre visuel
- couleur et typographie
ATTENTION : le centre visuel d'une image n'est pas situé à son centre géométrique. Il
est en général plus haut.
symbolique
Les formes utilisées dans le design (print ou web) peuvent avoir une signification, et leur
emploi doit s'accorder avec certaines règles –plus ou moins- universelles.
• sens de lecture
En Occident, on lit de gauche à droite, et de haut en bas. Parcourant rapidement un
document, l'œil finalement suit une diagonale. C'est sur cette diagonale que doivent se situer
les éléments essentiels : titre, idée, logo, slogan…
• signification
Chaque forme a une force symbolique qu'il ne faut pas négliger. On pourra compléter les
définitions ci-dessous avec le code de la route, qui utilise une autre symbolique.
- carré : forme géométrique absolue (angle droit, symétrie, équivalence
des arêtes). Il est associé à des valeurs matérielles, terrestres. Plus parfait que le
rectangle, il s'associe mal au format A4. Code de la route :en losange, fin
d'interdiction.
- rectangle : signification proche du carré, ses proportions doivent être
adaptées au format A4. Code de la route : étiquette, nom des villes.
5
typographie
infographie
- rond : symbole de la plénitude, de la perfection (π) ; il est associé au
monde (globe), aux planètes (lunes), à la plénitude (yin et yang). Code de la
route : interdiction
- triangle : il représente une croissance, de la Terre vers le Ciel, l'accès à
une spiritualité, à un au-delà. A l'envers, il peut être perçu comme une flèche,
voire une régression. Code de la route : danger.
- flèche : élément dynamique par excellence, il associe le carré (ou le
rectangle) au triangle. Il faut bien veiller à l'inclure dans le sens de lecture, de
gauche à droite : le contraire peut être perçu comme une régression. Code de la
route : sens de circulation
- croix : associée à la religion chrétienne (crucifix) et à la santé, elle a
aussi la valeur de la négation, du refus, de l'interdit.
- croissant ou virgule : par complétion, fait référence au rond. Élément
très dynamique (et très tendance).
6
typographie
infographie
Couleurs
L'utilisation des couleurs est soumise à des perceptions physico-chimiques, mais aussi à des
référents culturels universellement partagés.
Télécharger le document complet :
http://artxtra.info/formation/pdf/symbolique_couleurs.pdf
Symbolique
• Jaune:
Symbolique générale : Joyeux, spirituel, dynamique, science, conscience, idéalisme,
action, luminosité.
Couleur de l'intuition, il symbolise la jeunesse et l'audace. C'est la couleur de la créativité et
de l'intelligence lumineuse, un stimulateur de l'intellect. Le jaune est lumineux et stimulant.
On associe cette couleur à l'expression de la pensée car le jaune favorise la concentration, la
mémoire, le jugement et la prise de décision. C'est également une couleur qui favorise
l'assimilation de nouvelles idées et la capacité à comprendre différents points de vue. De
plus, il semble que le jaune aide les gens à être mieux organisés et à adopter une attitude
optimiste.
• Orange
Symbolique générale : Stimulant, énergie, ambition, enthousiasme, imagination.
Riche, forte et chaleureuse, la couleur orange est dotée de vertus stimulantes. Elle dessine
une ambiance confortable et intime, cherchant la confiance et l'apaisement.
L'orange est la couleur joyeuse par excellence. Cette couleur stimulante ravive la bonne
humeur. Les teintes plus pâles, comme le pêche ou l'abricot, aident à rétablir l'énergie.
Malgré cela, l'orangé n'a pas de connotations symboliques aussi fortes que ses voisins sur le
spectre des couleurs, le jaune et le rouge. Il passe tantôt pour joyeux et stimulant comme le
jaune, tantôt pour une couleur de passion et de fougue comme le rouge, mais toujours à des
degrés moindres.
L'orange est plus lumineux sur un fond noir que sur un fond blanc.
• Rouge
Symbolique générale: Chaud, dynamique, stimulant, excitant, force, passion, puissance,
interdiction, danger.
Le rouge est la couleur de l'action, de la vigueur, de la joie de vivre. Dans son instinct
combatif, elle a des tendances fortes et même agressives.
Le rouge est la couleur qui a le plus d'impact sur nos sens. Le rouge est souvent considéré
comme la couleur des couleurs.
Le rouge est joyeux. Beaucoup de produits destinés aux enfants ou associés au plaisir sont
rouges : ballons, jouets, vêtements, bonbons, etc.
Le rouge traduit l'exubérance, la vitesse, l'action et le danger ainsi que la colère et
l'agressivité.
7
typographie
infographie
Le rouge et l'orangé vif sont les teintes qui se voient le mieux à distance, c'est une des raisons
pour lesquelles elles sont utilisées pour avertir d'un danger ou d'une interdiction. Les feux de
circulation et les panneaux d'arrêt sont rouges. Les avertissements sur les emballages de
médicaments s'impriment en rouge.
• Le vert
Symbolique générale: Calme, équilibre, repos, activité spirituelle, espérance, nature,
immortalité, repos.
Le terme « vert » représente un ensemble de couleurs avoisinant cette teinte verte primaire.
Elle est très fréquente dans la nature. Les plantes contenant de la chlorophylle sont vertes.
Le vert a un effet positif sur le système nerveux. Il apporte un sentiment frais de détente, une
sensation de confort naturel. Il vous parle de forêt, de montagne et d'herbe fraîche.
Nés de l'union du rouge et du bleu, deux couleurs aux personnalités totalement opposées, le
violet et les autres teintes de sa famille, comme le mauve et le pourpre, suggèrent tantôt
mystère, richesse et délicatesse, tantôt malaise, trouble ou provocation. Ces couleurs
possèdent une sorte de double personnalité qui leur a toujours valu des réactions très
variées.
Le vert est, en certaines circonstances, perçu comme une couleur ayant trait à ce qui est
instable, à ce que l'on désire et qui est incertain ou éphémère.
Le vert crée une ambiance rassurante, un sentiment de confort et de lien avec la nature, il
aide à donner un sentiment de détente, c'est un antistress.
Le vert est symbole de vie, de croissance, et d'harmonie. C'est une couleur qui réconforte,
détend et dont il fait bon s'entourer. Lorsque l'on pense au vert, on imagine des forêts, des
arbres, de l'herbe. La nature offre une multitude de teintes de vert : sauge, olive, pomme,
lichen, jade, émeraude.
Le vert pomme et le vert lime ont un côté plus stimulant ; ils créent une ambiance joyeuse et
légère, alors que les teintes plus sombres comme le vert bouteille et l'olive confèrent une
touche de calme au décor.
• Le violet
Symbolique générale : Tristesse, mélancolie, dignité, politesse, jalousie, mystère,
spiritualité.
Couleur qui renferme une mélancolie certaine, mélancolie qui peut être source de création...
Elle crée donc une atmosphère spirituelle ou méditative, emprunte de sensibilité et de
créativité. Selon les psychologues de la couleur, le violet favorise le sens artistique.
On attribue au violet des propriétés calmantes et apaisantes.
Le violet contribue à l'équilibre et est lié au sens artistique et musical, aux grands idéaux, à
l'intuition et à la spiritualité. Il favorise la créativité, la sensibilité et la compassion.
• Le bleu
Symbolique générale : Calme, sincérité. Paix, immatérialité, méditation, sagesse, rêverie.
Le bleu a un parfum doux qui réprime l'anxiété, favorise la détente physique et mentale...
Symbole d'équilibre, c'est la couleur du bien-être, de la sérénité, du contrôle de soi. Il pousse
à la bonté et mène à l'intelligence : couleur du ciel, de l'esprit et de la pensée. Le bleu évoque
de vastes espaces calmes et sereins. Le bleu est, depuis fort longtemps, la couleur préférée de
la majorité des occidentaux. Il possède de grandes vertus : il est calme, apaisant, pacifique.
Mais le bleu a aussi un côté plus dynamique, puisqu'il favorise la créativité et l'inspiration.
8
typographie
infographie
Hygiène, fraîcheur et propreté sont indissociables du bleu. Les publicitaires le démontrent
sans arrêt. Ainsi, une foule de produits devant posséder ces caractéristiques sont bleus ou ont
un emballage bleu : le lave-vitre, la poudre détergente avec ses particules bleues.
En somme, les nombreuses variantes de bleu permettent de créer des environnements tantôt
reposants, tantôt inspirants, selon la fonction que vous désirez attribuer à un espace.
• Le noir
Le noir est le symbole par excellence de l'élégance, de la modernité. On a qu'à penser au
"smoking", aux tenues de cérémonie, aux objets de luxe ; il représente la richesse, le
raffinement, voire même, le mystère.
Mais, le noir comporte aussi des connotations négatives : on l'attribue à l'austérité, et il est
par tradition, associé au deuil.
Le noir possède des caractéristiques paradoxales : il procure un sentiment de protection, de
réconfort, de même qu'une sensation de mystère ; il est associé au silence, à l'infinité.
Cependant, il faut l'utiliser avec ménagement car il peut devenir un frein.
Le noir, utilisé avec modération, peut être inspirant et met même en valeur les effets des
autres couleurs auxquelles il est juxtaposé. Il est cependant mieux de ne pas faire une
utilisation abusive du noir, car il pourrait devenir difficile à lire.
Si l'on considère la synthèse additive (superposition de faisceaux lumineux
monochromatiques), le blanc est la réunion de toutes les couleurs, le noir est l'absence de
couleur. Si l'on considère la synthèse soustractive (mélange de pigments, de peintures), le
blanc est obtenu sur une feuille vierge (pour peu que la feuille soit elle-même blanche et
éclairée par une lumière blanche), et le noir est obtenu par le mélange de toutes les couleurs.
On oppose ainsi le noir au blanc, puisque le blanc est constitué de l'ensemble des longueurs
d'ondes visible. Lorsqu'on combine les trois couleurs primaires en proportions équivalentes
dans la synthèse additive, on va ainsi du noir au blanc en passant par toutes les nuances de
gris.
• Le Blanc
Dans la symbolique occidentale, le blanc est généralement associé à la pureté, à l'innocence,
à la chasteté, à la virginité, au mariage, à la spiritualité (couleur de la papauté), à la sainteté
et à la vie. L'origine de cette symbolique réside dans le caractère immaculé, sans présence de
noir, et absolu de la lumière blanche, et dans le fait que le blanc est aussi la couleur de la
neige et du lait maternel. La couleur souvent opposée au blanc est le noir.
• Le Gris
Dans la symbolique, en Occident, le gris est associé à la dépression, la tristesse, la solitude, le
désarroi.
L'origine de cette symbolique réside dans le fait que le gris est une couleur terne, mi-blanc,
mi-noir, couleur de la poussière qui s'amoncèle sur les choses immobiles et inertes, couleur
de la moisissure, du stagnant.
C'est aussi la couleur du luxe (gris perle, argent) et de la technologie (acier, aluminium,
métaux)
9
typographie
infographie
Association / Composition
L'outil principal se nomme la roue des couleurs.
Il existe plusieurs modes d'association des couleurs, ou de composition de sa palette.
Il faut pour cela partir de la couleur dominante.
Voir méthode de composition dans le diaporama
Monochrome : même rayon dans des tons

différents.
analogue : un rayon de part et d'autres de la

dominante
complémentaire: rayon opposé à celui de la

dominante
complémentaire analogue : rayons adjacent

de la complémentaire
RVB et CMJN
La définition colorimétrique d'une image se fait à partir des couleurs primaires : Rouge Vert
Bleu (RVB, ou red green blue RGB).
Chaque pixel est composé d'une triade, trois sous-pixels rouge vert et bleu. Chaque pixel
reçoit une intensité allant de 0 à 255. Les 3 sous-pixels avec une intensité de 255 donnent un
pixel blanc ; les 3 éteints donnent du noir.
Ainsi, une couleur se définit en RGB de la manière suivante : R V B
255 0 0 Rouge
0 255 0 Vert
0 0 255 Bleu
128 128 128 Gris moyen
0 0 0 Noir
255 255 255 Blanc
Pour la conception de sites web, et dans de nombreux logiciels, 255 102 0 Orange
la couleur est indexée en hexadécimale (base 16), où chaque 255 0 255 violet
153 51 0 marron
paire représente un élément de la triade : ainsi, on trouve des
0 51 0 Vert foncé
codes comme #000000 (noir), #FF0000 (rouge, FF=255), 255 255 204 Jaune pale
#FF6600 (orange)
10
typographie
infographie
Dans le monde de l'imprimerie, il faut rajouter une couleur. En effet, sur un écran, la lumière
traverse le support (la vitre) alors que sur le papier, la lumière se réfléchit dessus : la lumière,
et avec elle le contraste, ne seront pas rendu de la même manière. Pour compenser les pertes
sur papier, il faut rajouter du noir, afin d'augmenter le contraste et de réduire la luminosité.
On parle alors d'un système CMJN : Cyan-Magenta-Jaune-Noir (ou CMYK, Cyan Magenta
Yellow blacK).
Les interfaces informatiques font la traduction automatique du RGB vers le CMYK (Word
étant un traitement de texte, il n'opère pas la conversion ; par contre des logiciels graphiques
comme Photoshop gèrent tous les systèmes colorimétriques : RGB, CMYK, TSL, etc.).
Quelques conseils
- Choisissez avec soin la couleur de fond. Il y a blanc et blanc : les
Esquimaux ont, dans leur langue, douze mots différents pour nuancer les
tonalités de blanc ! Tenez compte, le cas échéant, de la différence entre la
qualité des écrans.
- Si vous fabriquez de grandes zones de noir, pensez à rajouter dedans
30% de bleu (en CMJN), cela permettre à l'imprimeur de sortir un noir plus
soutenu et qui ne "bavera" pas trop.
- Les teintes claires sont, de beaucoup, préférables aux couleurs foncées.
Méfiez-vous du mélange des couleurs, entre le fond et ces teintes.
- Limitez le nombre de couleurs pour éviter les "effets cacatoès"; veuillez à
ce qu'il n'y ait qu'une seule dominante.
- Associez logiquement formes et couleurs, sauf si vous recherchez un
effet paradoxal -un éléphant rose par exemple-. Cela réduit le délai de
perception et les erreurs de compréhension.
- Ne perdez pas de vue que le maniement des couleurs est un domaine
éminemment subjectif. Dans une entreprise, cela peut constituer une corde de
discorde entre services, sans aucun profit. C'est pourquoi le recours à la
symbolique des couleurs offre une bonne solution d'arbitrage en cas de
divergence. Dans une banque, les actions, titres à risque seront en rouge, et les
obligations, en bleu par exemple, ou encore, en vert pour une croissance
positive, en rouge pour une croissance négative et en bleu pour une stabilité.
- Enfin, gardez en tête les symboliques de couleurs déjà formulées telles
que celle du code de la route, adoptée par tous et quasi universellement
comprise...
11
typographie
infographie
Unités de mesure
Le Point
- La norme Afnor NF Q 60-010 a retenu le point-Didot comme unité de
mesure typographique internationale.
- Un point = 1/72ème de pouce = 0,3759 mm.
- Multiple de 12 : 12pt = 1 cicéro (4,51 mm)
6pt 10pt 12pt 18pt 24pt 36pt 48pt 72pt

Le Corps
- Rectangle pouvant contenir n'importe quel caractère dans la police
sélectionnée.
- Unité : le Point.
- Taille par défaut : 10pt, 12pt, etc.
abp ABC
ligne de capitale ou ligne de haut de casse
corps de bas de casse

72 points
ligne de base
En typographie, on appelle les majuscules des capitales ou des hauts de casse ; et les
minuscules des bas de casse.
Le Cadratin
- Un cadratin est l'espace utilisé par le corps. Si l'on désigne le corps
comme étant égal à 12pt, alors le cadratin fait 12pt. Si le corps fait 72pt, le
cadratin aussi.
- C'est une unité utilisée dans la gestion des espaces entre les mots, les
lignes, les paragraphes.
- Un interligne simple crée un espace de 1 cadratin entre les lignes d'un
paragraphe. Un interligne de 1,5 crée un espace de 1,5 cadratins.
- En infographie, et plus précisément dans la conception de sites web (en
anglais), on parle de em.
12
typographie
infographie
Le Caractère
- Pointe: le pic triangulaire du A ou du W majuscule, et qui dépasse

légèrement au-dessus de la ligne de capitale.
- Fût: Trait principal, vertical ou oblique, comme dans le L ou le V.
- Traverse: fût horizontal au centre des lettres A, E, F, H ou G.
- Panse: Trait ovale qui renferme le contrepoinçon dans les lettres O, P,
Q ou R.
- Ligne de pied: ligne sur laquelle s'alignent les caractères. Appelée

également ligne de base.
- Œil: hauteur des minuscules à l'exclusion des jambages inférieurs et
supérieurs, comme dans le e ou le x (en anglais on parle d'ailleurs de x-height).
- Corps: taille du caractère exprimé en points typographiques, de
l'extrémité du jambage inférieur à l'extrémité du jambage supérieur. Selon la
police, la taille du caractère peut, pour un même corps, paraître différente à
cause des variations de l'œil du caractère.
- Jambages: partie dune lettre minuscule qui dépasse l'œil. Les
jambages inférieurs descendent sous la ligne de pied, comme dans le g. Les
jambages supérieurs s'élèvent au-dessus de l'œil, comme dans le k.
- Contre poinçon: espace enclos par le dessin dune lettre.
- Hauteur de capitale: Comme son nom l'indique : hauteur de la

capitale dune police de caractère, comprise entre la ligne de pied et l'extrémité
supérieure du caractère. En général, les jambages supérieurs des minuscules
dépassent un peu cette hauteur.
13
typographie
infographie
- Diagonale: fûts obliques. La diagonale inférieure du K est appelée
“jambe”.
- Délié de jonction: trait fin qui relie la panse du g à sa boucle.
- Queue: trait court qui termine une lettre. Dans le cas du Q, la queue
descend souvent au-delà de la ligne de pied.
- Délié: Partie plus fine d'un caractère dont l'épaisseur des fûts varie.
- Plein: Partie plus épaisse d'un caractère. Le contraste entre plein et
délié joue un rôle fondamental dans l'esthétique d'un caractère typographique.
- Spine: Partie courbe du S.
- Empattement: Embout qui vient achever l'extrémité d'un fût de
caractère. Cet empattement peut être relié ou non par un filet qui fait la jointure
entre le fût et l'empattement. En anglais, empattement se dit serif. Son rôle est
de guider l'œil du lecteur dune lettre à l'autre, ce qui facilite son travail.
- Spur: Projection que l'on peut parfois observer à la base d'un G
majuscule.
14
typographie
infographie
Classifications
Il existe différents types de classification : Thibaudeau, Vox/Atypi ou Web.
La première, et la plus ancienne, ne comprend pas toutes les polices contemporaines, et
repose sur les types d'empattement.
La classification Vox/Atypi est celle en vigueur dans les milieux professionnels (du print).
Dans la conception de sites web, on utilise une classification bien plus sommaire.
SERIF (AVEC EMPATTEMENT) SANS SERIF CURSIVE
abpfoex abpfoex abpfoex

On utilise (en général) les polices à bâton pour les titres, et les polices à empattement pour
les textes larges.
Il est recommandé de ne pas utiliser de gras dans une police à empattement, ni d'italique
dans une police à bâton ou une cursive.
Les polices à bâton ont un meilleur rendu sur écran (pas de lissage), alors que les polices à
empattement sortiront mieux sur papier.
Les polices monotype (Courier) sont des polices à chasse fixe : les espaces entre les caractères
seront toujours les mêmes, alors que les polices ont des espaces variables en fonction de
l'alignement du texte (gauche / droite / centré / justifié).
15
typographie
infographie
Nuances & Contrastes
Caractère gras
Au caractère romain (normal) on rajoute de la graisse (plus d'encre sur le caractère en
plomb). Un mot mis en gras au sein d'un texte ou un texte en gras par rapport à un autre,
attirera plus le regard, au détriment d'une lecture linéaire.
Caractère italique
L'italique se remarque par son inclinaison sur tous les caractères, ce qui change le rythme de
la lecture. A noter le changement de forme du a dans une même police (ici Georgia) :
aa
Capitales
Les majuscules, plus massives, ne disposent pas de jambages. A cause de cela, elles sont plus
visibles mais moins lisibles.
Les capitales (toutes les capitales) s'accentuent : pour cela, vous pouvez insérer des caractères
spéciaux ou passer par le pilote de clavier enrichi (voir à la fin de ce document).
16
typographie
infographie
L'espace
Interlettrage
• Espace entre les lettres d'un mot
L'interlettrage, dans Word, se gère avec le menu Format / Police / Espacement des
caractères. Il s'agit d'insérer 1 ou plusieurs points entre les lettres d'un même mot.
Espace mot
• Espace insécable, sécable ou demi-cadratin.
- - Entre les mots, l'espace fait un cadratin.
- - Il est possible d'obtenir des demi-cadratins ou des quart-de-cadratins
(espace-fine avant les ! et ?). Menu Insertion / Caractères spéciaux…
- - Les espaces insécables (CTRL+MAJ+ESP) sont des espaces, en bout de
ligne, qui ne séparent pas les mots autour de l'espace.
- Dans cet exemple : le signe € au bout de la phrase n'est pas séparé du
nombre auquel il est accolé, ainsi on peut lire sur la même ligne : bla bla bla bla
bla 1000 € et non bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla 1000 €.
- - Les espaces justifiants sont ceux qui se créent entre les mots quand le
paragraphe est justifié (aligné sur les 2 marges). Ils peuvent provoquer des
lézardes
- - La gestion des espaces inter-mots conduit à celle des césures. Pour des
raisons pratiques, il est vivement conseillé de ne jamais couper un mot
dans un texte.
Alignement
En général, on utilise un alignement à gauche, dit aussi en fer à gauche ou en drapeau.
Pour des effets de titre ou par souci esthétique, on peut préférer l'alignement centré.
L'alignement justifié ou en bloc peut être intéressant dans des colonnes ou des zones de
textes inscrites dans une grille très géométrique.
Il faut veiller cependant aux lézardes, ces successions d'espace d'une ligne à l'autre qu'il
faudra corriger avec de l'interlettrage ou des espaces-mots.
Interlignage
L'interlignage est l'espace entre 2 lignes d'un même paragraphe.
17
typographie
infographie
Règles de typographie
Â ABRÉVIATIONS
• Règles générales
- Une abréviation qui ne se compose que des premières lettres du mot se
termine par un point : référence = réf.
- Une abréviation qui se termine par la dernière lettre du mot ne
comporte pas ce point final : boulevard = bd
- L’abréviation des groupes de mots ne comporte pas de point final : s’il
vous plaît : SVP ou svp
• Il y a cependant des exceptions consacrées par l’usage.
On abrège
- après Jésus-Christ, par apr. J.-C. ou - Madame, par Mme
apr. J-C - Mademoiselle, par Mlle
- article, par art. (ne s’abrège pas - masculin, par masc.
lorsqu’il s’agit de l’article premier de - Mesdames, par Mmes
statuts ou de titres de lois) - Mesdemoiselles, par Mlles
- bas de casse. (minuscules), par bdc - Messieurs, par MM.
- basse tension, par BT - Monseigneur, par Mgr
- bon à tirer, par BAT - Monsieur, par M. (et non pas par
- capitale (d’un pays), par cap. Mr.)
- capitale (majuscule), par CAP - moyenne tension, par MT
- c’est-à-dire, par c.-à-d. ou c-à-d - numéro, numéros, par no, nos
- confer, par cf. - nota bene, par NB
- département, par dép. - page, par p. (ne se répète pas : p.
- environ, par env. 127 et 128)
- et cetera, par etc. (pas de points de - paragraphe, par § (ne se répète
suspension ni de répétition) pas : § 4 et 5)
- exemple, par ex. - par intérim, par p.i.
- faubourg, par fg - par ordre, par p.o.
- féminin, par fém. - pour cent, par p. 100 ou par %
- figure, par fig. - pour mille, par p. 1000
- habitants, par hab. - post-scriptum, par P-S
- haute tension, par HT - président directeur-général,
- hauteur, par H. ou haut. (H est le par pdg
symbole de l’hydrogène) - recto, par ro, verso, par vo
- hors taxes, par ht - répondez s’il vous plaît, par
- idem, par id. RSVP
- introduction, par introd. - siècle, par s.
- largeur, par l. ou larg. (l veut dire - société, par sté ou Sté
litre) - société anonyme, par SA
- longueur, par L ou par long.
18
typographie
infographie
- société à responsabilité - taxe sur la valeur ajoutée, par

limitée, par SARL TVA
- suivant(e)(s), par suiv. - téléphone, par Tél. ou tél.
- supplément, par suppl. - toutes taxes comprises, par TTC
• Points cardinaux
Nord, Sud, Est, Ouest : N, S, E, O ou W NE, NO, SE, SO ou SW, NNE, NNO, SSE, SSO ou
SSW, NNE-SSE, etc. Ex. Ces gens sont originaires de l’Ouest. Il a marché plein sud.
Â MESURES LÉGALES (LOI DU 3 MAI 1961)

Ces abréviations sont invariables au pluriel. On abrège
- ampère(s), par A - kilogramme(s), par kg (1 kg, 25,5
- are(s), par a kg)
- centiare(s), par ca - kilomètre(s), par km
- centigramme(s), par cg - kilomètre(s) par heure, par km/h
- centilitre(s), par cl - kilowatt(s), par kW
- centimètre(s), par cm - kilowatt(s)-heure, par kWh
- décalitre(s), par dal - litre(s), par l
- décamètre(s), par dam - mètre(s), par m, mètre(s)
- décibel(s), par dB carré(s), par m2, mètre(s) cube(s), par
- degré(s), par ° m3
- degré(s) Celsius, par °C (25 °C) - mètre(s) par seconde, par m/s
- degré(s) Fahrenheit, par °F (80 - millibar(s), par mbar
°F) - millilitre(s), par ml
- franc(s), par F (1 F, 357 F, 675,24 - millimètre(s), par mm
F) - minute(s), (angle) par ’
- grade(s), par gr - minute(s), (temps) par min
- gramme(s), par g - quintal, quintaux, par q
- hectare(s), par ha - seconde(s) (angle), par "
- hectogramme(s), par hg - seconde(s) (temps), par s
- hectolitre(s), par hl - stère(s), par st
- hectomètre(s), par hm - tonne(s), par t
- heure(s), par h (20 h, 20 h 30) - volt(s), par V
- jour(s), par j ou par d - watt(s), par W
19
typographie
infographie
Â NOMBRES ORDINAUX
- premier, premiers, première, premières : 1er, 1ers, 1re, 1res
- deuxième, deuxièmes : 2e, 2es deuxième ou second : on emploie
deuxième quand l’énumération peut aller au delà de deux et second quand
l’énumération s’arrête à deux. ex. deuxième République, seconde mi-temps.
- troisième, troisièmes : 3e, 3es
- primo, secundo, tertio : 1° 2° 3°
Â MAJUSCULES ET MINUSCULES
On compose avec une capitale initiale :
- le mot qui commence une phrase ou une citation complète : elle lui
demanda : "Avez-vous trouvé ce livre ?"
- les patronymes, les prénoms, les surnoms.
- les noms des peuples, les habitants des régions ou des agglomérations :
les Espagnols, les Alsaciens, les Grenoblois. Par contre le nom des langues
commence par une minuscule : l’espagnol, le français, le russe, l’arabe, etc.
-
On écrira donc : un agent de police, la commission des finances, l’état-major.
- Organismes d’État - le Muséum d’histoire naturelle
- l’académie de Reims mais - le Collège de France
l’Académie de médecine - la Commission européenne
- l’université René Descartes, - les Nations unies
l’université de Toulouse - le ministre de l’Éducation nationale
- la préfecture de Haute-Savoie - M. le professeur Morel
Â SIGLES ET ACRONYMES
Les sigles ou acronymesErreur ! Signet non défini. ne comportent ni séparations ni
points : EDF, RATP, SNCF, USA, HTML S’ils se prononcent aisément : Assedic, Euratom,
Inserm, Unesco
On met l’accent sur les capitalesErreur ! Signet non défini. (si la machine qu’on utilise le
permet !)
Â CHIFFRES
- La version 48 de l’EMBL contient 700 169 610 bases, 1 046 026
séquences, 181 343 sous-séquences, 114 821 références.
- 995,55
- Ce village, de 1245 habitants, possède 27 km de voies communales
réparties sur une surface cadastrée de 25 500 ha 450 ca.
- 1995 : 858 inscrits, 732 votants, 729 exprimés.
- La fête sera cette année les 5, 6 et 7 août.
20
typographie
infographie
- Un colloque sur l’œuvre de Descartes est prévu le mardi 10 décembre

1996.
- J’ai programmé l’enregistrement à 23 h 15.
- Un moteur de 5 ampères sous 220 volts.
- L’étain, d’une densité 7,2, fond à 232 °C et bout vers 2 250 °C.
On compose en chiffres romains les divisions principales d’un ouvrage, les régimes
politiques, dynasties, salons, conciles...
On compose en lettres
- les nombres inférieurs à 10 : ce document comprend trois parties. Il y a
quatre ans et deux mois, avait lieu...
- les nombre employés comme substantifs : entrer en sixième
- les fractions d’heures suivant les mots midi et minuit : midi vingt,
minuit dix-sept
- certaines expressions : les années soixante, la guerre de Trente ans
Â CHIFFRES COMPOSÉS
- dix-huit, quatre-vingt-dix-sept, vingt et un
- cent vingt-deux, trois cent trente et un
- mille neuf cent quatre-vingt-seize
- quatre-vingts mais quatre-vingt-un
- trois cents mais trois cent dix ou sept cent mille
Â TÉLÉPHONE, FAX, ADRESSE

- Téléphone 01 44 50 26 18 - Fax 01 42 96 34 97
- Pour faciliter le tri postal, les adresses s’écrivent sans abréviations, sans
majuscules accentuées et sans ponctuation. CEDEX signifie Courrier
d’Entreprise à Distribution EXceptionnelle.
Â PONCTUATION
- Les phrases se terminent par un point final, un point d’exclamation, un
point d’interrogation ou des points de suspension.
- La virgule sépare les parties d’une proposition ou d’une phrase à
condition qu’elles ne soient pas déjà réunies par les conjonctions et, ou, ni. Elle
sépare les énumérationsErreur ! Signet non défini.. Elle isole les mots mis
en apostrophe. On ne met pas de virgule avant une parenthèse, un tiret ou un
crochet.
- Le point virgule sépare différentes propositions de même nature.
- Le deux-points introduit une explication, une citation, un discours, une
énumération.
- Les points de suspension sont toujours au nombre de trois.
- Les guillemets "informatiques" sont si simplifiés qu’il est impossible de
respecter les règles typographiques françaises traditionnelles. Le point final se
met avant ou après le guillemet fermant suivant le contexte, il n’est pas doublé.
21
typographie
infographie
- Les parenthèses intercalent une précision dans la phrase.

- Les crochets indiquent une précision à l’intérieur d’une parenthèse ou
une coupure dans une citation.
- Employé seul, le tiret signale chaque terme d’une énumération ou le
changement d’interlocuteur dans un dialogue. Employés par paires, ils
s’utilisent comme les parenthèses. En fin de phrase, le second tiret est
supprimé avant le point final.
Â LES ÉNUMÉRATIONS
- Elles sont introduites par un deux-points ;
- les énumérationsErreur ! Signet non défini. de premier rang sont
introduites par un tiret et se terminent par un point-virgule, sauf la dernière
par un point final ;
- les énumérationsErreur ! Signet non défini. de second rang sont
introduites par un tiret décalé et se terminent par une virgule.
Â LES TITRES ET INTERTITRES

Quand le découpage des lignes permet d’en comprendre le sens, on ne met pas de point, de
virgule ou de point virgule.
Â ESPACES EN USAGE AVANT ET APRÈS LES SIGNES DE PONCTUATION

- Il ne faut jamais mettre de signe de ponctuation à la fin d'un
titre.
- Point et virgule sont suivis d’un blanc.
- Point d’interrogation, point d’exclamation, point-virgule et deux-points
sont suivis d’un blanc et précédés d’une "espace fine insécable". Ce caractère,
auquel les professionnels de l’édition de texte sont justement attachés, existe
dans les traitements de texte, peut être remplacé par un blanc dans les simples
messages et par le caractère &nbsp ; en HTML.
- Les guillemets ouvrants ou fermants sont, respectivement, précédés ou
suivis d’un blanc.
- Les parenthèses ou crochets ouvrants sont précédés d’un blanc.
- Les parenthèses ou crochets fermants sont suivis d’un blanc.
- Les apostrophes et traits d’union ne sont ni précédées ni suivies de
blanc.
- Le tiret est précédé et suivi d’un blanc.
- Les points de suspension sont suivis d’un blanc.
Â GRISÉ
•Ne pas griser un bloc de texte à plus de 20%
•Griser les éléments d'un graphique entre 20 et 50%
22
typographie
infographie
Sur Ordinateur
Pixel
• Définition
Une image est définie par sa largeur et sa longueur exprimées en pixels. La définition
contient aussi le nombre de couleurs (GIF ou JPG).
• Résolution
Il s'agit du nombre de pixels par pouce (ppp, ou dot per inch, dpi) : plus la résolution est
forte, moins l'agrandissement de l'image en souffrira.
Du point au Pixel
- Sur Mac : 1pt=1px dpi=72ppp
- Sur PC : 1pt=4/3px dpi=96ppp
Polices vectorielles
• Police proportionnelle : aujourd'hui, les polices TrueType, par exemple, sont des
polices vectorielles. C'est-à-dire que chaque lettre est dessinée par le biais d'une
équation. Il suffit de multiplier un coefficient pour augmenter le corps des caractères.
Même si l'équation est complexe, un fichier de police vectoriel pèsera moins lourd
qu'une police fixe.
• Police bitmap : chaque caractère est dessiné, dans toutes les tailles, tous les types
(italique), et toutes les graisses. Ainsi, ces fichiers pèsent très lourds.
Polices dynamiques
Poids des fichiers .ttf ou .fon (635 caractères en WGL4)
- Arial 266 ko
- Courier New 2 90 ko
- Garamond 181 ko
- Times New Roman 315 ko
23
typographie
infographie
Dans un texte (notamment s'il est court), tous les caractères de la police ne sont pas utilisés.
Il n'est pas nécessaire alors de les enregistrer tous. Une police dynamique est une police
incomplète qui peut se régénérer en cas d'absence d'un élément. Elle pèse moins lourd qu'un
fichier vectoriel standard.
Dans Word, Outils / Options / Enregistrement / Cocher la case Incorporer les polices
TrueType et la sous-case Incorporer uniquement les caractères utilisés.
Lissage
Les bords arrondis des polices ne coïncident souvent pas avec la grille des pixels ou la
résolution de l'écran. Pour s'assurer d'un meilleur rendu, il est conseillé de lisser les polices.
• Sur Mac, le lissage est assuré par Adobe Type Manager
• Sur Windows, il faut se rendre dans le Panneau de Configuration / Affichage.
• Les polices se lissent à partir d'une certaine taille : 3 pt pour les vectorielles, 6pt
pour les fixes.
Jeux de caractère
Les systèmes d'exploitation, au moment de leur installation ou de leur configuration,
utilisent un jeu de caractère (en anglais charset). En Europe de l'Ouest, on utilise soit le
Windows-1252 ou l'ISO 8859-1 (avec caractères accentués et cédille : éèçàùâêîôäëüïö).
L'UTF-8 est un jeu de caractère universel (non accentué).
Installation
Les polices ou fichiers .ttf (TrueType Font, les plus courants) doivent impérativement se
trouver dans le dossier C:\Windows\Font.
Attention, ce dossier est lu par Windows au démarrage ; il ne faut pas qu'il y ait trop de
polices à l'intérieur, cela ralentirait le démarrage.
Récupération de fontes
Il est possible de télécharger des fontes (ou polices) dans des fonderies (ou foundry).
Le site de référence est http://www.dafont.com/
Utilitaires
X-Fonter (logiciel gratuit) permet de visualiser les polices installées ou téléchargées.
24
typographie
infographie
Sources
• Le diaporama est consultable à l'adresse suivante :
http://artxtra.info/formation/pdf/infotypographie.pdf
• Vous trouverez à cette adresse le document sur la symbolique des couleurs :

http://artxtra.info/formation/pdf/symbolique_couleurs.pdf
• Sur le site artxtra.info, vous pourrez aussi consulter la mise à jour de ce tutoriel
(http://artxtra.info/blog/pao/)
• Je me suis inspiré des sites suivants pour réaliser ce document :

- before&after :
http://www.bamagazine.com/
- etienne.mineur :
http://www.my-os.net/blog/
- Design et typo de Peter Gabor :
http://paris.blog.lemonde.fr/paris/
- Ainsi que deux articles (en anglais) :
http://www.digital-web.com/articles/principles_of_design/
et
http://daphne.palomar.edu/design/contents.html
• L'Encyclopédie de www.graphisearch.com (pour les définitions et les schémas des

caractères)
• Vous trouverez X-Fonter à l'adresse suivante :

http://users.pandora.be/eclypse/downloads/X-Fonter-setup.exe ou sur
http://www.telecharger.com/
• Le pilote de clavier enrichi qui permet de faire des majuscules accentuées est
disponible à l'adresse suivante : http://home.pro.tiscali.be/~fbou2235/kbdfrac.htm
25

Infotypographie

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Infotypographie

Transféré par

Droits d'auteur :

Formats disponibles

Typographie

Il existe bien entendu d'autres proportions, notamment en fonction du rapport texte/image.

Monochrome : même rayon dans des tons

analogue : un rayon de part et d'autres de la

complémentaire: rayon opposé à celui de la

complémentaire analogue : rayons adjacent

6pt 10pt 12pt 18pt 24pt 36pt 48pt 72pt

corps de bas de casse

- Pointe: le pic triangulaire du A ou du W majuscule, et qui dépasse

- Ligne de pied: ligne sur laquelle s'alignent les caractères. Appelée

- Hauteur de capitale: Comme son nom l'indique : hauteur de la

SERIF (AVEC EMPATTEMENT) SANS SERIF CURSIVE

abpfoex abpfoex abpfoex

Nuances & Contrastes

• Il y a cependant des exceptions consacrées par l’usage.

- société à responsabilité - taxe sur la valeur ajoutée, par

Â MESURES LÉGALES (LOI DU 3 MAI 1961)

- Un colloque sur l’œuvre de Descartes est prévu le mardi 10 décembre

Â TÉLÉPHONE, FAX, ADRESSE

- Les parenthèses intercalent une précision dans la phrase.

Â LES TITRES ET INTERTITRES

Â ESPACES EN USAGE AVANT ET APRÈS LES SIGNES DE PONCTUATION

• Sur Mac, le lissage est assuré par Adobe Type Manager

• Sur Windows, il faut se rendre dans le Panneau de Configuration / Affichage.

• Vous trouverez à cette adresse le document sur la symbolique des couleurs :

• Je me suis inspiré des sites suivants pour réaliser ce document :

• L'Encyclopédie de www.graphisearch.com (pour les définitions et les schémas des

• Vous trouverez X-Fonter à l'adresse suivante :

Vous aimerez peut-être aussi