Après la macro, la micro !

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.

Transcript

1. Après la macro, la micro !
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. " Le design Web ,c'est de la typographie à 95% ." - Oliver Reichenstein http://bit.ly/micro-95 Il en va de même pour les fautes en micro-typographie pour les personnes initiées.
4. Macro-typographie du document : lignes de force, colonnes, mise en page générale…
5. Macro-typographie toujours : paragraphes, rythme vertical, gouttières…
6. Micro-typographie : ligne, mot, lettre, signe, espace…
7. La typographie est une représentation écrite du langage. – Matthew Butterick http://bit.ly/micro-representation L’écrit et ses conventions permettent de mieux reproduire le language oral, plus riche.
8. ! } « ? & ⁂ ! ™ € • § ; ° ‰ — – ¶ st ∞ † ℕ Autant de conventions qui décrivent autant d’intonations, de concepts, d’idées…
9. 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 http://bit.ly/micro-renforce Ainsi un panneau routier ne cherche pas à être beau, mais à être visible avant tout.
10. La typographie est au bénéfice du lecteur, pas de l’écrivain. – Matthew Butterick http://bit.ly/micro-lecteur Corollaire : c’est compliqué pour le rédacteur. (Et ça va être compliqué pendant cet atelier.)
11. http://bit.ly/micro-cv Le même CV, présenté de deux manières différentes : lequel vous attire le plus ?
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. 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. Développeur Web client Et vous ? @htmlvv Qui ne gère pas des contenus dans la salle ? Nos métiers sont articulés autour de ces derniers.
15. http://bit.ly/micro-jessica http://bit.ly/micro-jason Approche anglo-saxonne de la micro-typographie : rapide, agréable et…
16. http://bit.ly/micro-kern http://bit.ly/micro-shape http://bit.ly/micro-type …ludique !
17. Alors jouons !
18. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p
19. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — 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 .
20. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — 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 .
21. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p
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. 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. Trois règles associées 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. 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. Deux exceptions Les points de suspension sont réalisés avec un caractère dédié, pas avec une succession de points.
25. Dépend du jeu de caractères proposés dans la police. Ne fonctionne pas avec les polices systèmes sous Windows XP. Espaces fines insécables et Web ? http://bit.ly/micro-espaces
26. 1. Remplacer l’espace fine insécable par une espace insécable. 2. Supprimer l’espace fine insécable. Deux solutions http://bit.ly/micro-florent
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. Proscrire les signes de ponctuation orphelins http://bit.ly/micro-atelier 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. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — 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.␣
30. — 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.␣ — 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.␣ — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p Sont différenciés les espaces fines insécables des espaces classiques.
31. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — 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.␣ — 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.␣ Citation extraite de V pour Vendetta.
32. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — 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.
33. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — 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.
34. 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. É À Ç http://bit.ly/micro-titres 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. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — Écoute, 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. Citation extraite des Tontons flingueurs. Extrait dans une autre langue à composer en italique.
36. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — Écoute, 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. AUGMENTATION DES RETRAITES IL DORT OU IL TRAVAILLE LE COUP DE DE DE DE GAULLE http://bit.ly/micro-accents ´ ´ `
37. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p AUGMENTATION DES RETRAITES IL DORT OU IL TRAVAILLE LE COUP DE DE DE DE GAULLE ´ ´ ` Trois accents permettent de lever les doutes sur la lecture de ces phrases.
38. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p
39. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — Donne-moi tes vêtements ! — [Il tend sa main]. Parle à ma main. — [Il prend sa main]. Maintenant ! Les indications scéniques sont des didascalies.
40. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — Donne-moi tes vêtements ! — [Il tend sa main]. Parle à ma main. — [Il prend sa main]. Maintenant !
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. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — Donne moi tes vêtements ! — [Il tend sa main.] Parle à ma main. — [Il prend sa main.] Maintenant ! Citation extraite de Terminator 3.
43. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p — Donne moi tes vêtements ! — [Il tend sa main.] Parle à ma main. — [Il prend sa main.] Maintenant !
44. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p
45. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p Je crois en : – la mort – la destruction – le chaos – et la cupidité.
46. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p Je crois en : – la mort – la destruction – le chaos – et la cupidité.
47. Listes Les éléments d’une liste sont séparés : - soit par des points ; - soit par des virgules ; - soit par des points-virgules. http://bit.ly/micro-listes 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. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p Je crois en : – la mort, – la destruction, – le chaos, – et la cupidité. Citation extraite d’American History X.
49. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p Je crois en : – la mort, – la destruction, – le chaos, – et la cupidité.
50. — On les a bouffées, mec ! C’est ma femme qui m’a est — Je ne suis p
51. est — Je ne suis p — 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 !!!
52. est — Je ne suis p — 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 !!!
53. 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é. … ... ??? ?! !! http://bit.ly/micro-bang 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. est — Je ne suis p — 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 ! Citation extraite d’Au nom du père. (Très bon film !)
55. est — Je ne suis p — 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 !
56. est — Je ne suis p
57. est — Je ne suis p — 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. Il s’agit ici d’un exemple, on préférera bien sûr écrire en toutes lettres « numéro » et « deux fois ».
58. est — Je ne suis p — 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.
59. Abréviation Numéro No Nº No No ! Mais pas N. ou N° # http://bit.ly/micro-numero 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. Chiffres et symboles mathématiques 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. Trois fois par jour. × ÷ + − ± = ≠ < > ≤ ≥ ⁄ http://bit.ly/micro-maths 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. est — Je ne suis p — Tu es le fugitif no un et tu es blessé, ça double les risques. — Faux, ça quadruple les risques, et je suis deux fois plus dangereux que ton pire cauchemar. Citation extraite de Heat.
62. est — Je ne suis p — Tu es le fugitif no un et tu es blessé, ça double les risques. — Faux, ça quadruple les risques, et je suis deux fois plus dangereux que ton pire cauchemar.
63. est — Je ne suis p
64. — Je ne suis p — 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é.
65. — Je ne suis p — 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é.
66. Abréviation des ordinaux 1er 1re 1ers 1res 2d 2de 2ds 2des 2e 2es 3e 3es XXe siècle Et jamais 1ère, 2ème, 3èmes… http://bit.ly/micro-ordinaux Second n’est utilisé que pour des listes de deux éléments ; sinon on utilise deuxième.
67. — Je ne suis p — 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.
68. — Je ne suis p — 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é.
69. — Je ne suis p
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 suis p
71. — Je ne suis p " 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 ! "
72. - Double prime. - Prime. Guillemets, apostrophe et unités de mesures - Chevrons doubles. - Courbes doubles. - Chevrons inversés. - Droits doubles. - Chevrons simples. - Courbes simples. - Courbes inversés. - Droits simples. « … » “…” „…“ "…" ‹ … › ‘…’ »…« '…' & ' - 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. — Je ne suis p « Et bien c’est pas de chance, 5 minutes plus tôt et vous pouviez vous vanter d’avoir fait une belle prise ! — Oh ce n’est rien, 10 secondes plus tard 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.)
74. — Je ne suis p « Et bien c’est pas de chance, 5 minutes plus tôt et vous pouviez vous vanter d’avoir fait une belle prise ! — Oh ce n’est rien, 10 secondes plus tard et je vous descendais ! »
75. — Je ne suis p
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. — 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. - Ligatures linguistiques. - Ligatures esthétiques. Œ œ Æ æ ß W Ligatures 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. Gras et italique s’excluent mutuellement. Utilisez-les avec parcimonie. Jamais sur des paragraphes complets. Apprenez à différencier italique et emphase. Ne jamais souligner. Emphase http://bit.ly/micro-emphase On place en italique les caractères seuls, les titres d’œuvres, les mots étrangers non- francisé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. Je ne suis pas en danger, Skyler. Je suis le danger ! Un type ouvre sa porte et se fait 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. Je ne suis pas en danger, Skyler. Je suis le danger ! Un type ouvre sa porte et se fait descendre et tu penses que c’est moi ? Non. Je suis celui qui frappe à la porte !
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. – 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 !
85. Tirets et traits d’union Trait d’union (conditionnel, sécable, insécable). Signe moins. Tiret demi-cadratin. Tiret cadratin. Souligné. - − – — _ http://bit.ly/micro-tirets 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.
86. — 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 ! Citation extraite de Princesse Mononoké.
87. — 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 !
88. Accéder aux caractères
89. Raccourcis clavier On voit ici les touches accessibles avec un clavier mac en appuyant sur shift, alt et en combinant les deux.
90. Table des caractères ⌥ + ⌘ + t
91. Table des caractères (Sous linux.)
92. Changer de clavier http://bit.ly/micro-kbdfr http://bit.ly/micro-bepo Il est également possible de changer de clavier physique.
93. http://bit.ly/micro-tweetbot http://bit.ly/micro-spip http://bit.ly/micro-smarty http://bit.ly/micro-word http://bit.ly/micro-joli Divers outils et logiciels qui automatisent une partie des règles.
94. Tant d’autres choses… - Corps, hampe, fût, délié, plein, œil, empattement,… - polices de caractères,… - petites capitales, ponctuations confondues,… - autres langues… http://bit.ly/micro-david Impossible d’aborder tout ça en 90 minutes, mais David Rault propose une belle vidéo d’introduction sur le sujet des caractères.
95. […] 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 http://bit.ly/micro-correcteurs 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.)
96. Les points clefs (c) © N° Nº ... … ' ’ x × Pensez à vos lecteurs. Utilisez les bons caractères, n’utilisez pas un équivalent graphique. 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.
97. N’oubliez pas la macro-typographie : - longueurs de lignes ; - taille de texte et interlignage ; - qualité des polices. Les points clefs http://bit.ly/micro-resume Ce sont ces points qui seront les plus bénéfiques au lecteur.
98. Bibliographie http://bit.ly/micro-print
99. Webographie http://bit.ly/micro-web
100. Des questions ? Merci de votre attention. Paris Web – 12 octobre 2013 Après la macro, la micro ! – Vincent Valentin http://bit.ly/micro-sardine