Après la macro, la micro !

" Le design Web ,sait de la
typographie à 95% ."
- Oliver Reichenstein

Une faute d’orthographe fait perdre de la crédibilité et donne une mauvaise impression de la
qualité du document. (Les coquilles dans cette présentation ne comptent pas !)

http://bit.ly/micro-95

" Le design Web ,c'est de la
typographie à 95% ."
- Oliver Reichenstein

Il en va de même pour les fautes en micro-typographie pour les personnes initiées.

Macro-typographie du document : lignes de force, colonnes, mise en page générale…

Macro-typographie toujours : paragraphes, rythme vertical, gouttières…

Micro-typographie : ligne, mot, lettre, signe, espace…

http://bit.ly/micro-representation

La typographie est une
représentation écrite du
langage.
– Matthew Butterick
L’écrit et ses conventions permettent de mieux reproduire le language oral, plus riche.

?
!

&
‰

†

;

}

§

–

!

ﬆ

—

∞

«

⁂

€

°

ℕ

™

•

¶

Autant de conventions qui décrivent autant d’intonations, de concepts, d’idées…

http://bit.ly/micro-renforce

Une bonne typographie est
mesurée par la façon dont elle
renforce le sens du texte, et
non par une échelle abstraite
de mérite.
Ainsi un panneau routier ne cherche pas à être beau, mais à être visible avant tout.

http://bit.ly/micro-lecteur

La typographie est au
bénéﬁce du lecteur, pas de
l’écrivain.
Corollaire : c’est compliqué pour le rédacteur. (Et ça va être compliqué pendant cet atelier.)

http://bit.ly/micro-cv

Le même CV, présenté de deux manières différentes : lequel vous attire le plus ?

http://bit.ly/micro-lettre

Le sens et le style du document ne sont pas modiﬁés : ils restent (un peu) pompeux et
administratifs.

http://bit.ly/micro-site

Sur un site Web, la lisibilité et la facilité de lecture priment aussi parfois : ici, il faut pouvoir
se concentrer facilement sur le contenu de nature technique.

@htmlvv

Développeur
Web client
Et vous ?

Qui ne gère pas des contenus dans la salle ? Nos métiers sont articulés autour de ces
derniers.

http://bit.ly/micro-jessica

http://bit.ly/micro-jason

Approche anglo-saxonne de la micro-typographie : rapide, agréable et…

http://bit.ly/micro-kern
http://bit.ly/micro-shape
http://bit.ly/micro-type

…ludique !

Je
ne

— On

—

est

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

su

p
is

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

— Qui? «Qui» n’est autre que la
forme qui résulte de la fonction de
« qu’est-ce-que », et ce que je suis
c’ est un homme sous un masque .

su

p
is

Différents symboles
.,

-

Les symboles monopoint.

-

Les symboles bipoints. : ;

-

Les symboles qui s’utilisent par paire.
(…) […] {…} «…»

L’apostrophe n’est pas un signe de ponctuation à proprement parler : c’est un diacritique
(même famille que les accents et des cédilles). Ces signes sont toujours reliés à des lettres.
On parle aussi de ponctuation haute pour les symboles bipoints.

Trois règles associées
1. Une espace après les symboles monopoint.
2. Une espace ﬁne insécable avant et une espace
après les symboles bipoints.
3. Des espaces à l’extérieur des symboles qui
s’utilisent par paire.

Un espace correspond à une marge. Une espace correspond au caractère.
Espace ﬁne : largeur deux fois moindre que l’espace classique.
Insécable : aucun retour à la ligne n’est possible à ce niveau.

Deux exceptions
1. La règle des symboles monopoint s’applique
pour les points de suspensions.
2. On ajoute une espace ﬁne insécable à
l’intérieur des guillemets.

Les points de suspension sont réalisés avec un caractère dédié, pas avec une succession de
points.

http://bit.ly/micro-espaces

Espaces ﬁnes
insécables et Web ?
Dépend du jeu de caractères proposés dans la
police.
Ne fonctionne pas avec les polices systèmes sous
Windows XP.

http://bit.ly/micro-florent

Deux solutions

1. Remplacer l’espace ﬁne insécable par une
espace insécable.
2. Supprimer l’espace ﬁne insécable.

Proscrire les signes de
ponctuation orphelins
Le Web est un média
souple :

-

l’utilisateur peut
changer les paramètres
de la page ;

-

ou même son mode de
consultation.

http://bit.ly/micro-atelier

Proscrire les signes de
ponctuation orphelins
Le Web est un média
souple :

-

l’utilisateur peut
changer les paramètres
de la page ;

-

ou même son mode de
consultation.

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

— Qui⍽?␣«⍽Qui⍽»␣n’est au
tre que
la forme qui résulte de la
fonction de␣«⍽qu’est-ce-q
ue⍽»,␣et
ce que je suis c’est un ho
mme
sous un masque.␣

su

p
is

tre que
ue⍽»,␣et
mme
sous un masque.␣

—
Je
ne

Sont différenciés les espaces ﬁnes insécables des espaces m’a
classiques.
qui
me
t
’est ma fem
c!C
es
uffées, me
bo
— O n les a

su

p
is

tre que
ue⍽»,␣et
mme
sous un masque.␣

ne

— On

Je

est

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

Citation extraite de V pour Vendetta.

su

p
is

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

— Ecoute, on t’connaît pas, mais
laisse nous t’dire que tu t’prépares
des Nuits blanches..., Des
migraines..., Des « nervous
breakdown », comme on dit de nos
jours.

su

p
is

http://bit.ly/micro-titres

Majuscules
En début de phrase.
Sur les noms propres, ou comme marque de déférence.
En français, les majuscules et les capitales prennent
accents et autres diacritiques.

ÉÀÇ

Sujet très complexe qui couvre des chapitres dans les guides typographiques.
Ici, il s’agit juste des règles basiques.
Les majuscules répondent à une règle orthographique ; les capitales à un style graphique.
Un texte ne peut pas être composé entièrement en majuscules mais peut l’être en capitales.
(Je ne parle pas ici des petites capitales, mais c’est bien sûr la solution idéale pour ne pas
réduire la lisibilité du texte.)
majuscules vs capitales (text-transform)

— Écoute, on t’connaît p
as,
mais laisse nous t’dire qu
e
tu t’prépares des nuits
blanches..., des migraine
s...,
des « nervous breakdown »
,
comme on dit de nos jou
rs.

—
Je
ne

Citation extraite des Tontons ﬂingueurs.
a
me qui m’
Extrait dans une autre langue à composereenma fem
t italique.
st
e
mec ! C’ s
ées,
les a bouff
— On

su

p
is

AUGMENTATION
— ÉcouteRETRAITESît p
´
DES , on t’conna as,
mais laisse nous t’dire qu
e
tu t’préDORTdes` nILits
IL pares OU u
blanches..., des migraine
TRAVAILLE
s...,
des « nervous breakdown »
,
comme on dit dDE os ´jou
LE COUP e n DE rs.
DE DE GAULLE

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

http://bit.ly/micro-accents

su

p
is

AUGMENTATION
´
DES RETRAITES
`
IL DORT OU IL
TRAVAILLE
´
LE COUP DE DE
DE DE GAULLE

—
Je
ne

Trois accents permettent de lever les doutes sur la lecture m’aces phrases.
de
qui
me
t
’est ma fem
c!C
es
uffées, me
bo
— O n les a

su

p
is

— Donne-moi tes vêtements !
— [Il tend sa main]. Parle à ma
main.
— [Il prend sa main]. Maintenant !

—
Je
ne

Les indications scéniques sont des didascalies.
a
me qui m’
fem
st
! C’est ma
ec
e
bouffées, m
— O n les a

su

p
is

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

— Donne-moi tes vêtements !
— [Il tend sa main]. Parle à ma
main.
— [Il prend sa main]. Maintenant !

su

p
is

Parenthèses, crochets,
accolades et guillemets
Ils incluent la ponctuation si la phrase est complète.
Ils exluent la ponctuation si la phrase est incomplète.

Comme ici (par exemple

).

Les crochets permettent d’ajouter un niveau d’imbrication supplémentaire sur les
parenthèses.

— Donne moi tes vêteme
nts !
— [Il tend sa main.] Parle
à ma main.
— [Il prend sa main.] Ma
intenant !

ne

— On

Je

est

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

Citation extraite de Terminator 3.

su

p
is

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

— Donne moi tes vêteme
nts !
— [Il tend sa main.] Parle
à ma main.
— [Il prend sa main.] Ma
intenant !

su

p
is

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

Je crois en :
– la mort
– la destruction
– le chaos
– et la cupidité.

su

p
is

http://bit.ly/micro-listes

Listes
Les éléments d’une liste sont séparés :

-

soit par des points ;

-

soit par des virgules ;

-

soit par des points-virgules.

Les listes en français sont de préférences composées avec des tirets demi-cadratins. Les
puces sont héritées des langages anglo-saxons.

Je crois en :
– la mort,
– la destruction,
– le chaos,

ne

— On

Je

est

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

Citation extraite d’American History X.

su

p
is

Je
ne

— On

a
me qui m’
fem
! C’est ma
ec
bouffées, m
les a

—

est

Je crois en :
– la mort,
– la destruction,
– le chaos,

su

p
is

—
Je

est

— On les a bouffées, mec ! C’est ma femme qui m’a
envoyé ça, et avant, elle l’a trempé dans de
l’acide... Du LSD, mon vieux ! Ça fait six mois
qu’on s’envoie en l’air avec l’Empire Britannique !!
Tu veux planer ?! Prends un pays.
— Surtout, ne me ﬁles pas l’Irlande du Nord,
j’veux pas faire un mauvais trip !!
— Tiens mec, essaie le Népal. Tu seras sur
l’Himalaya !!!

ne
su

p
is

http://bit.ly/micro-bang

Fin de phrase
??? ?! !!
On n’utilise jamais plusieurs points à la ﬁn d’une phrase.
Les points de suspension sont réalisés avec un caractère
dédié.

… ...

On parle maintenant de bangorrhée pour l’utilisation massive des points d’exclamation. Il
faut au contraire en limiter l’usage pour en garder toute la pertinence.

— On les a bouffées, mec ! C’est ma femme qui m’a envoyé ça,
et avant, elle l’a trempé dans de l’acide… Du LSD, mon vieux !
Ça fait six mois qu’on s’envoie en l’air avec l’Empire
Britannique ! Tu veux planer ? Prends un pays.
— Surtout, ne me ﬁles pas l’Irlande du Nord, j’veux pas faire
un mauvais trip !
— Tiens mec, essaie le Népal. Tu seras sur l’Himalaya !

Je

est

—

Citation extraite d’Au nom du père. (Très bon ﬁlm !)

ne
su

p
is

—
Je

est

— On les a bouffées, mec ! C’est ma femme qui m’a envoyé ça,
et avant, elle l’a trempé dans de l’acide… Du LSD, mon vieux !
Ça fait six mois qu’on s’envoie en l’air avec l’Empire
Britannique ! Tu veux planer ? Prends un pays.
— Surtout, ne me ﬁles pas l’Irlande du Nord, j’veux pas faire
un mauvais trip !
— Tiens mec, essaie le Népal. Tu seras sur l’Himalaya !

ne
su

p
is

— Tu es le fugitif n° 1 et tu es
blessé, ça double les risques.
— Faux, ça quadruple les risques,
et je suis 2x plus dangereux que
ton pire cauchemar.

Je

e

—

Il s’agit ici d’un exemple, on préférera bien sûr écrire en toutes lettres « numéro » et « deux
fois
st ».

ne
su

p
is

—
Je

est

— Tu es le fugitif n° 1 et tu es
blessé, ça double les risques.
— Faux, ça quadruple les risques,
et je suis 2x plus dangereux que
ton pire cauchemar.

ne
su

p
is

http://bit.ly/micro-numero

Abréviation
Numéro
No
Nº

Mais pas N. ou N°

No
No
!

#

De haut en bas : différentes possibilités pour écrire « numéro », de la moins riche à la plus
riche.
On place un point abréviatif uniquement si le mot abrégé a été tronqué à la ﬁn. Chaque mot a
sa propre abréviation de déﬁnie. Le signe croisillon sert pour les numérotations anglaises. Il
ne s’agit pas du signe musical du dièse.

http://bit.ly/micro-maths

Chiffres et symboles
mathématiques
Trois fois par jour.
Un chiffre qui commence une phrase doit être écrit en
toutes lettres.
Les signes mathématiques sont réalisés à l’aide de
caractères dédiés ; tous de la même largeur.

×÷+−±=≠<>≤≥ ⁄

Pour les travaux littéraires on préfère les chiffres en toutes lettres. Pour les travaux
scientiﬁques on préfère les chiffres. Pour les travaux ordinaires, les nombres supérieurs à 10
sont écrits en toutes lettres et les nombres inférieurs à ou égaux à 10 en chiffres. Pour les
combinaisons dans une même phrase, les chiffres l’emportent.
Les signes mathématiques ont une chasse ﬁxe qui permet des alignements dans les calculs.

— Tu es le fugitif no un e
t tu es blessé, ça
double les risques.
— Faux, ça quadruple le
s risques, et je suis
deux fois plus dangereux
que ton pire
cauchemar.

Je

est

—

Citation extraite de Heat.

ne
su

p
is

—
Je

est

— Tu es le fugitif no un e
t tu es blessé, ça
double les risques.
— Faux, ça quadruple le
s risques, et je suis
deux fois plus dangereux
que ton pire
cauchemar.

ne
su

p
is

— 1ère règle du Fight Club : il est
interdit de parler du Fight Club.
– 2nd règle du Fight Club : il est interdit
de parler du Fight Club.
– 3ème règle du Fight Club : quelqu’un
crie « stop », quelqu’un s’écroule ou
n’en peut plus, le combat est terminé.

—
Je
ne
su

p
is

http://bit.ly/micro-ordinaux

Abréviation des
ordinaux
1er 1re 1ers 1res
2d 2de 2ds 2des
2e 2es
3e 3es

Et jamais 1 ère è
, 2 me, 3 èmes
…
XXe siècle

Second n’est utilisé que pour des listes de deux éléments ; sinon on utilise deuxième.

— 1re règle du Fight Club : il est interdit de parler
du Fight Club.
– 2e règle du Fight Club : il est interdit de parler
du Fight Club.
– 3e règle du Fight Club : quelqu’un crie « stop »,
quelqu’un s’écroule ou n’en peut plus, le combat
est terminé.

—

Citation extraite de Fight Club.

Je
ne
su

p
is

— 1re règle du Fight Club : il est interdit de parler
du Fight Club.
– 2e règle du Fight Club : il est interdit de parler
du Fight Club.
– 3e règle du Fight Club : quelqu’un crie « stop »,
quelqu’un s’écroule ou n’en peut plus, le combat
est terminé.

—
Je
ne
su

p
is

" Et bien c'est pas de chance, 5'
plus tôt et vous pouviez vous
vanter d'avoir fait une belle prise !
— Oh ce n'est rien, 10'' plus tard
et je vous descendais ! "

—
Je
ne
su

p
is

Guillemets, apostrophe et
unités de mesures
-

Chevrons doubles.

« … »

-

Courbes doubles.

“…”

- Courbes simples.

‘…’

-

Chevrons inversés.

»…«

- Courbes inversés.

„…“

-

Droits doubles.

"…"

- Droits simples.

'…'

-

Double prime.

&

-

- Chevrons simples.

‹…›

Prime.

'

-

Apostrophe.

’

La première ligne correspond à la langue française, la deuxième à l’anglais, la troisième à
l’allemand.
La quatrième n’est à ma connaissance qu’une dégradation de la seconde.
La deuxième colonne permet de réaliser des imbrications.
Pouce et seconde sont représentés par le double prime ; la minute par le prime.
L’utilisation des secondes et des minutes est réservée aux mesures d’angles (mon exemple
est donc doublement faux).
L’apostrophe typographique est courbe, les claviers normaux ne permettent pas de
l’atteindre directement.

t bien c’est pas de chance, 5 minutes
«E
plus tôt et vous pouviez vous vanter
d’avoir fait une belle prise !
h ce n’est rien, 10 secondes plus tard
—O
et je vous descendais ! »

—

Citation extraite d’Arrête moi si tu peux. (Encore une fois dans cet exemple, il conviendrait
plutôt d’écrire des chiffres en toutes lettres.)

Je

ne
su

p
is

t bien c’est pas de chance, 5 minutes
«E
plus tôt et vous pouviez vous vanter
d’avoir fait une belle prise !
h ce n’est rien, 10 secondes plus tard
—O
et je vous descendais ! »

—
Je
ne
su

p
is

— Je ne suis pas en danger,
Skyler. Je suis le danger ! Un type
ouvre sa porte et se fait descendre
& tu penses que c’eﬆ moi ? Non.
Je suis celui qui frappe à la porte !

Ligatures
&@

-

Ligatures linguistiques.

-

Ligatures esthétiques.

ŒœÆæß

W

ﬆ fﬁ

Le ß se prononce « eszett » ; ligature de deux s en allemand.
& et @ sont également des abréviations.
& ne s’utilise que dans les noms commerciaux entre deux noms ou deux liens de parenté.
W est une ancienne ligature de deux V.

http://bit.ly/micro-emphase

Emphase
Gras et italique s’excluent mutuellement.
Utilisez-les avec parcimonie. Jamais sur des
paragraphes complets.
Apprenez à différencier italique et emphase.
Ne jamais souligner.

On place en italique les caractères seuls, les titres d’œuvres, les mots étrangers nonfrancisés, les indications aux lecteurs, les notes de musiques…
En sans-serif, mieux vaut éviter l’italique et préférer le gras, plus lisible.

suis pas en danger, Skyler. Je suis le
Je ne
er ! Un type ouvre sa porte et se fait
dang
descendre et tu penses que c’eﬆ moi ?
Non. Je suis celui qui frappe à la porte !

Citation extraite de Breaking Bad. (Très bonne série !)

suis pas en danger, Skyler. Je suis le
Je ne
er ! Un type ouvre sa porte et se fait
dang
descendre et tu penses que c’eﬆ moi ?
Non. Je suis celui qui frappe à la porte !

– Va t–en ! Les humains ne
sont pas mes amis, je les hais !
– C’est vrai, je suis un hu–
main. Mais San, toi aussi...
– Tais–toi ! Je suis une louve
comme ma mère !

http://bit.ly/micro-tirets

Tirets et
traits d’union
Trait d’union (conditionnel, sécable, insécable).
Signe moins.

−

Tiret demi-cadratin.
Tiret cadratin.
Souligné.

-

–

—

_

Le trait d’union peut être insécable pour un intervalle de dates par exemple.
Le tiret demi cadratin est utilisé dans les listes non-ordonnées.
Le tiret cadratin sert dans les dialogues et les incises. Il fait un peu vieillot et est doucement
remplacé par le demi cadratin.
Le souligné est maintenant devenu inutile.
Les césures sont indispensables pour une bonne justiﬁcation.

— Va t-en ! Les humains ne
sont pas mes amis, je les
hais !
— C’est vrai, je suis un humain. Mais San, toi aussi...
— Tais-toi ! Je suis une
louve comme ma mère !

Citation extraite de Princesse Mononoké.

— Va t-en ! Les humains ne
sont pas mes amis, je les
hais !
— C’est vrai, je suis un humain. Mais San, toi aussi...
— Tais-toi ! Je suis une
louve comme ma mère !

Raccourcis clavier

On voit ici les touches accessibles avec un clavier mac en appuyant sur shift, alt et en
combinant les deux.

Table des caractères

⌥+⌘+

t

Table des caractères

(Sous linux.)

Changer de clavier
http://bit

h

-be
t.ly/micro
ttp://bi

po

Il est également possible de changer de clavier physique.

.ly/micro

-kbdfr

http://bit.ly/micro-smarty
http://bit.ly/micro-tweetbot
http://bit.ly/micro-spip
http://bit.ly/micro-word
http://bit.ly/micro-joli

Divers outils et logiciels qui automatisent une partie des règles.

http://bit.ly/micro-david

Tant d’autres choses…
-

Corps, hampe, fût,
délié, plein, œil,
empattement,…

-

polices de caractères,…

-

petites capitales,
ponctuations
confondues,…

-

autres langues…

Impossible d’aborder tout ça en 90 minutes, mais David Rault propose une belle vidéo
d’introduction sur le sujet des caractères.

http://bit.ly/micro-correcteurs

[…] une accumulation de petites
violences faites aux lecteurs, de
microbarbaries en apparence
anodines mais qui, en se
multipliant, font du langage un
véhicule plus incertain […]
– Édouard Launet
Nous avons gagné un temps incroyable dans la composition des textes depuis l’avénement
du numérique. Il est dommage que malgré cela, les compositions perdent aussi en qualité.
(Cf vidéo en intro.)

Les points clefs
Pensez à vos lecteurs.
Utilisez les bons caractères, n’utilisez pas un
équivalent graphique. N° Nº
... …
(c) ©

'’

x×

Apprenez les bases et utilisez les règles de la
langue principale de votre contenu.
Restez attentifs aux textes que vous composez et
gardez à portée de main un code typographique.
Restez souples mais cohérents.
Ne soyez pas intégristes ! C’est un sujet important pour des textes qui ont vocation à durer
dans le temps, mais qui demande aussi beaucoup de pragmatisme.

http://bit.ly/micro-resume

Les points clefs
N’oubliez pas la macro-typographie :

-

longueurs de lignes ;

-

taille de texte et interlignage ;

-

qualité des polices.

Ce sont ces points qui seront les plus bénéﬁques au lecteur.

Bibliographie
http://bit.ly/micro-print

Webographie
http://bit.ly/micro-web

http://bit.ly/micro-sardine

Des questions ?
Merci de votre attention.

Paris Web – 12 octobre 2013
Après la macro, la micro ! – Vincent Valentin

Après la macro, la micro !

Recommandé

Recommandé

Contenu connexe

En vedette

En vedette (20)

Après la macro, la micro !