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édibil...
http://bit.ly/micro-95

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

Il en va de même pour les...
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 e...
?
!

&
‰

†

;

}

§

–

!

st

—

∞

«

⁂

€

°

ℕ

™

•

¶

Autant de conventions qui décrivent autant d’intonations, de ...
http://bit.ly/micro-renforce

Une bonne typographie est
mesurée par la façon dont elle
renforce le sens du texte, et
non p...
http://bit.ly/micro-lecteur

La typographie est au
bénéfice du lecteur, pas de
l’écrivain.
– Matthew Butterick
Corollaire :...
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 modifiés : ils restent (un peu) pompeux et
administ...
http://bit.ly/micro-site

Sur un site Web, la lisibilité et la facilité de lecture priment aussi parfois : ici, il faut po...
@htmlvv

Développeur
Web client
Et vous ?

Qui ne gère pas des contenus dans la salle ? Nos métiers sont articulés autour ...
http://bit.ly/micro-jessica

http://bit.ly/micro-jason

Approche anglo-saxonne de la micro-typographie : rapide, agréable ...
http://bit.ly/micro-kern
http://bit.ly/micro-shape
http://bit.ly/micro-type

…ludique !
Alors jouons !
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...
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...
Je
ne

— On

—

est

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

su

p
is
Différents symboles
.,

-

Les symboles monopoint.

-

Les symboles bipoints. : ;

-

Les symboles qui s’utilisent par pai...
Trois règles associées
1. Une espace après les symboles monopoint.
2. Une espace fine insécable avant et une espace
après l...
Deux exceptions
1. La règle des symboles monopoint s’applique
pour les points de suspensions.
2. On ajoute une espace fine ...
http://bit.ly/micro-espaces

Espaces fines
insécables et Web ?
Dépend du jeu de caractères proposés dans la
police.
Ne fonc...
http://bit.ly/micro-florent

Deux solutions

1. Remplacer l’espace fine insécable par une
espace insécable.
2. Supprimer l’...
Proscrire les signes de
ponctuation orphelins
Le Web est un média
souple :

-

l’utilisateur peut
changer les paramètres
d...
http://bit.ly/micro-atelier

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

-

l’utilisateur ...
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ésult...
— 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
...
— 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
...
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 ...
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 ...
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...
— É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 « ne...
AUGMENTATION
— ÉcouteRETRAITESît p
´
DES , on t’conna as,
mais laisse nous t’dire qu
e
tu t’préDORTdes` nILits
IL pares OU...
AUGMENTATION
´
DES RETRAITES
`
IL DORT OU IL
TRAVAILLE
´
LE COUP DE DE
DE DE GAULLE

—
Je
ne

Trois accents permettent de ...
Je
ne

— On

—

est

a
me qui m’
fem
! C’est ma
ec
bouffées, m
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 indicat...
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]. Par...
Parenthèses, crochets,
accolades et guillemets
Ils incluent la ponctuation si la phrase est complète.
Ils exluent la ponct...
— Donne moi tes vêteme
nts !
— [Il tend sa main.] Parle
à ma main.
— [Il prend sa main.] Ma
intenant !

ne

— On

Je

est
...
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.] Pa...
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

Je crois en :
– la mort
– la destruction
– le chaos
...
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
...
http://bit.ly/micro-listes

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

-

soit par des points ;

-

soit par des virg...
Je crois en :
– la mort,
– la destruction,
– le chaos,
– et la cupidité.

ne

— On

Je

est

a
me qui m’
fem
! C’est ma
ec...
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 chao...
Je
ne

— On

—

est

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

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 LS...
—
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 LS...
http://bit.ly/micro-bang

Fin de phrase
??? ?! !!
On n’utilise jamais plusieurs points à la fin d’une phrase.
Les points de...
— 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 ...
—
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,...
—

Je

est

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 dange...
—
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...
http://bit.ly/micro-numero

Abréviation
Numéro
No
Nº

Mais pas N. ou N°

No
No
!

#

De haut en bas : différentes possibil...
http://bit.ly/micro-maths

Chiffres et symboles
mathématiques
Trois fois par jour.
Un chiffre qui commence une phrase doit...
— 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 ...
—
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...
—

Je

est

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 parle...
— 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 parle...
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 è
...
— 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
...
— 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
...
—

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, ...
" 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, ...
Guillemets, apostrophe et
unités de mesures
-

Chevrons doubles.

« … »

-

Courbes doubles.

“…”

- Courbes simples.

‘…’...
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 ri...
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 ri...
—

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’est m...
— Je ne suis pas en danger,
Skyler. Je suis le danger ! Un type
ouvre sa porte et se fait descendre
& tu penses que c’est m...
Ligatures
&@

-

Ligatures linguistiques.

-

Ligatures esthétiques.

ŒœÆæß

W

st ffi

Le ß se prononce « eszett » ; ligatu...
http://bit.ly/micro-emphase

Emphase
Gras et italique s’excluent mutuellement.
Utilisez-les avec parcimonie. Jamais sur de...
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’est m...
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’est m...
– 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...
– Ta...
– 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...
– Ta...
http://bit.ly/micro-tirets

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

−

Ti...
— 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...
— 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...
Accéder aux
caractères
Raccourcis clavier

On voit ici les touches accessibles avec un clavier mac en appuyant sur shift, alt et en
combinant les...
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.

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

Tant d’autres choses…
-

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

-

polices de car...
http://bit.ly/micro-correcteurs

[…] une accumulation de petites
violences faites aux lecteurs, de
microbarbaries en appar...
Les points clefs
Pensez à vos lecteurs.
Utilisez les bons caractères, n’utilisez pas un
équivalent graphique. N° Nº
... …
...
http://bit.ly/micro-resume

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

-

longueurs de lignes ;

-

taille de ...
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 mic...
Après la macro, la micro !
Prochain SlideShare
Chargement dans…5
×

Après la macro, la micro !

2 140 vues

Publié le

Marie et moi présentions l’an passé un atelier sur les grilles macro-typographiques. Je propose cette année (en solo) de rester dans le monde de la typographie mais de plonger dans les détails de la ponctuation, des caractères, des abréviations et d’autres symboles alambiqués.

Publié dans : Technologie
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
2 140
Sur SlideShare
0
Issues des intégrations
0
Intégrations
126
Actions
Partages
0
Téléchargements
15
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Après la macro, la micro !

  1. 1. Après la macro, la micro !
  2. 2. " 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 !)
  3. 3. 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.
  4. 4. Macro-typographie du document : lignes de force, colonnes, mise en page générale…
  5. 5. Macro-typographie toujours : paragraphes, rythme vertical, gouttières…
  6. 6. Micro-typographie : ligne, mot, lettre, signe, espace…
  7. 7. 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.
  8. 8. ? ! & ‰ † ; } § – ! st — ∞ « ⁂ € ° ℕ ™ • ¶ Autant de conventions qui décrivent autant d’intonations, de concepts, d’idées…
  9. 9. 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. – Matthew Butterick Ainsi un panneau routier ne cherche pas à être beau, mais à être visible avant tout.
  10. 10. http://bit.ly/micro-lecteur La typographie est au bénéfice du lecteur, pas de l’écrivain. – Matthew Butterick Corollaire : c’est compliqué pour le rédacteur. (Et ça va être compliqué pendant cet atelier.)
  11. 11. http://bit.ly/micro-cv Le même CV, présenté de deux manières différentes : lequel vous attire le plus ?
  12. 12. http://bit.ly/micro-lettre Le sens et le style du document ne sont pas modifiés : ils restent (un peu) pompeux et administratifs.
  13. 13. 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.
  14. 14. @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.
  15. 15. http://bit.ly/micro-jessica http://bit.ly/micro-jason Approche anglo-saxonne de la micro-typographie : rapide, agréable et…
  16. 16. http://bit.ly/micro-kern http://bit.ly/micro-shape http://bit.ly/micro-type …ludique !
  17. 17. Alors jouons !
  18. 18. Je ne — On — est a me qui m’ fem ! C’est ma ec bouffées, m les a su p is
  19. 19. 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
  20. 20. 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
  21. 21. Je ne — On — est a me qui m’ fem ! C’est ma ec bouffées, m les a su p is
  22. 22. 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.
  23. 23. Trois règles associées 1. Une espace après les symboles monopoint. 2. Une espace fine 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 fine : largeur deux fois moindre que l’espace classique. Insécable : aucun retour à la ligne n’est possible à ce niveau.
  24. 24. Deux exceptions 1. La règle des symboles monopoint s’applique pour les points de suspensions. 2. On ajoute une espace fine 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.
  25. 25. http://bit.ly/micro-espaces Espaces fines 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.
  26. 26. http://bit.ly/micro-florent Deux solutions 1. Remplacer l’espace fine insécable par une espace insécable. 2. Supprimer l’espace fine insécable.
  27. 27. 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.
  28. 28. 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.
  29. 29. 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
  30. 30. — 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.␣ — Je ne Sont différenciés les espaces fines 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
  31. 31. — 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.␣ 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
  32. 32. 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
  33. 33. 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
  34. 34. 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)
  35. 35. — É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 flingueurs. 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
  36. 36. 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
  37. 37. 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
  38. 38. Je ne — On — est a me qui m’ fem ! C’est ma ec bouffées, m les a su p is
  39. 39. — 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
  40. 40. 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
  41. 41. 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.
  42. 42. — 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
  43. 43. 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
  44. 44. Je ne — On — est a me qui m’ fem ! C’est ma ec bouffées, m les a su p is
  45. 45. 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
  46. 46. 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
  47. 47. 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.
  48. 48. Je crois en : – la mort, – la destruction, – le chaos, – et la cupidité. 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
  49. 49. 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
  50. 50. Je ne — On — est a me qui m’ fem ! C’est ma ec bouffées, m les a su p is
  51. 51. — 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 files 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
  52. 52. — 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 files 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
  53. 53. http://bit.ly/micro-bang Fin de phrase ??? ?! !! On n’utilise jamais plusieurs points à la fin 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.
  54. 54. — 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 files 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 film !) ne su p is
  55. 55. — 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 files 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
  56. 56. — Je est ne su p is
  57. 57. — 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
  58. 58. — 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
  59. 59. 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 fin. Chaque mot a sa propre abréviation de définie. Le signe croisillon sert pour les numérotations anglaises. Il ne s’agit pas du signe musical du dièse.
  60. 60. 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 scientifiques 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 fixe qui permet des alignements dans les calculs.
  61. 61. — 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
  62. 62. — 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
  63. 63. — Je est ne su p is
  64. 64. — 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
  65. 65. — 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
  66. 66. 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.
  67. 67. — 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
  68. 68. — 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
  69. 69. — Je ne su p is
  70. 70. " 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
  71. 71. " 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
  72. 72. 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.
  73. 73. 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
  74. 74. 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
  75. 75. — Je ne su p is
  76. 76. — Je ne suis pas en danger, Skyler. Je suis le danger ! Un type ouvre sa porte et se fait descendre & tu penses que c’est moi ? Non. Je suis celui qui frappe à la porte !
  77. 77. — Je ne suis pas en danger, Skyler. Je suis le danger ! Un type ouvre sa porte et se fait descendre & tu penses que c’est moi ? Non. Je suis celui qui frappe à la porte !
  78. 78. Ligatures &@ - Ligatures linguistiques. - Ligatures esthétiques. ŒœÆæß W st ffi 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.
  79. 79. 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.
  80. 80. 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’est moi ? Non. Je suis celui qui frappe à la porte ! Citation extraite de Breaking Bad. (Très bonne série !)
  81. 81. 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’est moi ? Non. Je suis celui qui frappe à la porte !
  82. 82. – 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 !
  83. 83. – 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 !
  84. 84. 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 justification.
  85. 85. — 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é.
  86. 86. — 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 !
  87. 87. Accéder aux caractères
  88. 88. Raccourcis clavier On voit ici les touches accessibles avec un clavier mac en appuyant sur shift, alt et en combinant les deux.
  89. 89. Table des caractères ⌥+⌘+ t
  90. 90. Table des caractères (Sous linux.)
  91. 91. 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
  92. 92. 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.
  93. 93. 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.
  94. 94. 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.)
  95. 95. 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.
  96. 96. 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éfiques au lecteur.
  97. 97. Bibliographie http://bit.ly/micro-print
  98. 98. Webographie http://bit.ly/micro-web
  99. 99. http://bit.ly/micro-sardine Des questions ? Merci de votre attention. Paris Web – 12 octobre 2013 Après la macro, la micro ! – Vincent Valentin

×