Des lettres dans l\'espace

1 154 vues

Publié le

Introduction à la typograhie lors d\'un unithé ou café à l\'INRIA Lille - Nord Europe

  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Des lettres dans l\'espace

  1. 1. .
  2. 2. Des lettres dans l'espace Pierre Boulet Unithé ou café, 29 janvier 2009
  3. 3. o . rtho-typographie T . . ypographie m . icro-typographie
  4. 4. Objectif = lisibilité
  5. 5. Lettres Mots Paragraphes Pages
  6. 6. Lettres Mots Paragraphes Pages
  7. 7. Anatomie d'une lettre ..... bogue .
  8. 8. Anatomie d'une lettre a . scendante ..... bogue . orps . c d . escendante
  9. 9. Anatomie d'une lettre a . scendante ..... bogue . orps . il œ . c l .igne de base d . escendante
  10. 10. Anatomie d'une lettre a . scendante a . ngle ..... bogue . orps . il œ . c l .igne de base d . escendante
  11. 11. Anatomie d'une lettre a . scendante p . leins a . ngle e . t déliés ..... bogue . orps . il œ . c l .igne de base d . escendante
  12. 12. Anatomie d'une lettre a . scendante p . leins a . ngle e . t déliés ..... bogue s . érifs . orps . il œ . c l .igne de base d . escendante
  13. 13. Sérif Times New Roman Bitstream Vera Serif LMRoman12 Bitstream Charter URW Palladio L URW Bookman L
  14. 14. Sans sérif Arial Bitstream Vera Sans LMSans12 Century Gothic Trebuchet MS Gill Sans MT
  15. 15. À chasse fixe Courier New Bitstream Vera Sans Mono LMTypewriter12 Monofur TlwgMono Lucida Sans Typewriter
  16. 16. Manuscrites Comic Sans MS Matura MT Script Capitals Mistral Amandine TrashHand French Script MT
  17. 17. Décoratives AbileneFLF A Star is Born Bestioles Broadway Colonna MT ParisMetro
  18. 18. Variantes Famille Antykwa Torunska Normal Gras Italique Gras it.
  19. 19. Variantes Famille Antykwa Torunska Maigre Normal Gras Maigre it. Italique Gras it.
  20. 20. Variantes Famille Antykwa Torunska Maigre Normal Gras Maigre it. Italique Gras it. PC M P . PC  PC . . PC  PC  .
  21. 21. Variantes Famille Antykwa Torunska Maigre Normal Gras Maigre it. Italique Gras it. PC M P . PC  PC . . PC  PC  . Cond. maigre Condensé Cond. gras Cond. it. m. Cond. it. Cond. gras it.
  22. 22. Tailles optiques Latin Modern 5 Latin Modern 6 Latin Modern 7 Latin Modern 8 Latin Modern 9 Latin Modern 10 Latin Modern 12 Latin Modern 17
  23. 23. Lettres Mots Paragraphes Pages
  24. 24. Approche Approche très diminuée Approche diminuée Approche normale Approche augmentée Approc he trè s a u g m e n té e
  25. 25. Paires de crénage Avec Test Avec Sans Test Avec
  26. 26. Ligatures Avec fiffi f flfflst ½¾ Sans fi ffi fj ffj fl ffl st ct 1/2 3/4
  27. 27. Lettres Mots Paragraphes Pages
  28. 28. Espace inter-mots normal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Aenean ornare congue risus. Ut justo sem, tempus vel, elementum eu, euismod quis, mi. Donec tristique. Fusce at risus sed urna pulvinar hendrerit. Mauris id libero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus, sagittis a, nunc. Quisque gravida sem in massa. Praesent felis ante, venenatis ut, varius quis, blandit nec, libero. Aliquam magna libero, tincidunt vitae, laoreet quis, tincidunt a, neque. Maecenas dapibus
  29. 29. Espace inter-mots diminué Loremipsumdolorsitamet,consecteturadipiscing elit.Crasmassa.Sedfacilisisurnapharetrapede.Aenean ornareconguerisus.Utjustosem,tempusvel, elementumeu,euismodquis,mi.Donectristique.Fusce atrisussedurnapulvinarhendrerit.Maurisidlibero. Fusceplacerat,ipsumsitametpretiumauctor,lectus justolaoreetaugue,pretiumtinciduntestsemsednisi. Nullamegetarcu. Seddignissimpedeaceros.Proinetligulaeunisi tinciduntpharetra.Pellentesquenibh.Utvestibulum. Etiamelitdiam,pellentesqueut,pretiumtempus, sagittisa,nunc.Quisquegravidaseminmassa.Praesent felisante,venenatisut,variusquis,blanditnec,libero. Aliquammagnalibero,tinciduntvitae,laoreetquis, tincidunta,neque.Maecenasdapibusligulanonpurus.
  30. 30. Espace inter-mots augmenté Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Aenean ornare congue risus. Ut justo sem, tempus vel, elementum eu, euismod quis, mi. Donec tristique. Fusce at risus sed urna pulvinar hendrerit. Mauris id libero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus, sagittis a, nunc. Quisque gravida sem in massa. Praesent felis ante, venenatis ut, varius quis, blandit nec, libero. Aliquam magna
  31. 31. Interligne normal Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Aenean ornare congue risus. Ut justo sem, tempus vel, elementum eu, euismod quis, mi. Donec tristique. Fusce at risus sed urna pulvinar hendrerit. Mauris id libero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus, sagittis a, nunc. Quisque gravida sem in massa. Praesent felis ante, venenatis ut, varius quis, blandit nec, libero. Aliquam magna libero, tincidunt vitae, laoreet quis, tincidunt a, neque. Maecenas dapibus
  32. 32. Interligne diminué Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Aenean ornare congue risus. Ut justo sem, tempus vel, elementum eu, euismod quis, mi. Donec tristique. Fusce at risus sed urna pulvinar hendrerit. Mauris id libero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus, sagittis a, nunc. Quisque gravida sem in massa. Praesent felis ante, venenatis ut, varius quis, blandit nec, libero. Aliquam magna libero, tincidunt vitae, laoreet quis, tincidunt a, neque. Maecenas dapibus ligula non purus. In a erat tincidunt felis cursus sodales. Suspendisse pulvinar, dui in scelerisque laoreet, libero mauris faucibus mi, convallis consectetur nisi leo vel nisi.
  33. 33. Interligne augmenté Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Aenean ornare congue risus. Ut justo sem, tempus vel, elementum eu, euismod quis, mi. Donec tristique. Fusce at risus sed urna pulvinar hendrerit. Mauris id libero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus,
  34. 34. Justification Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Ae- nean ornare congue risus. Ut justo sem, tempus vel, elementum eu, euismod quis, mi. Donec tristique. Fu- sce at risus sed urna pulvinar hendrerit. Mauris id li- bero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus, sa- gittis a, nunc. Quisque gravida sem in massa. Prae- sent felis ante, venenatis ut, varius quis, blandit nec, libero. Aliquam magna libero, tincidunt vitae, laoreet quis, tincidunt a, neque. Maecenas dapibus ligula non
  35. 35. Ultimes raffinements Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras massa. Sed facilisis urna pharetra pede. Ae- nean ornare congue risus. Ut justo sem, tempus vel, ele- mentum eu, euismod quis, mi. Donec tristique. Fusce at risus sed urna pulvinar hendrerit. Mauris id libero. Fusce placerat, ipsum sit amet pretium auctor, lectus justo laoreet augue, pretium tincidunt est sem sed nisi. Nullam eget arcu. Sed dignissim pede ac eros. Proin et ligula eu nisi tincidunt pharetra. Pellentesque nibh. Ut vestibulum. Etiam elit diam, pellentesque ut, pretium tempus, sa- gittis a, nunc. Quisque gravida sem in massa. Praesent felis ante, venenatis ut, varius quis, blandit nec, libero. Aliquam magna libero, tincidunt vitae, laoreet quis, tin- cidunt a, neque. Maecenas dapibus ligula non purus.
  36. 36. Lettres Mots Paragraphes Pages
  37. 37. Lisibilité optimale Corps de texte entre 9pt et 12pt Interligne ~120 % du corps Longueur de ligne entre 40 et 75 caractères
  38. 38. Design, pas décoration Agrément de lecture laisser respirer l'œil du lecteur dynamiser la page Éviter les perturbations changements significatifs respecter les habitudes

×