La Typographie Web - CleverToday

1 170 vues

Publié le

Venez découvrir la typographie web, son histoire, son fonctionnement, les typographies les plus connues par le biais de cette présentation offerte lors d'un de nos lunch & learn.

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

Aucun téléchargement
Vues
Nombre de vues
1 170
Sur SlideShare
0
Issues des intégrations
0
Intégrations
520
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

La Typographie Web - CleverToday

  1. 1. CLEVER TODAY La Typographie Web
  2. 2. CLEVER TODAY Take the Quiz
  3. 3. CLEVER TODAY 1. Design is communication
  4. 4. CLEVER TODAY 1. L’importance de la typographie
  5. 5. CleverToday Le peu que nous lisons est déterminant. On the average Web page, users have time to read at most 28% of the words during an average visit. Nielsen Norman Group
  6. 6. CleverToday La réduction progressive
  7. 7. CleverToday Nous lisons ce que nous cliquons.
  8. 8. CleverToday Notre compréhension est facilitée lorsqu’il y a harmonie entre le fond et la forme.
  9. 9. CleverToday Your font is your identity, it’s the ship of your message.
  10. 10. CleverToday
  11. 11. CleverToday 2. Choisir sa typo
  12. 12. CLEVER TODAY 2. A. Rassemblement du matériel existant B. Définition de votre message/marque C. Exploration des providers de typographies D. Création d’un style guide
  13. 13. CleverToday A Rassemblement du matériel existant
  14. 14. CleverToday Exemple
  15. 15. CleverToday Exemple Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Curabitur blandit tempus porttitor. Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper.
  16. 16. CleverToday Si vous avez déjà votre site.
  17. 17. CleverToday Définition de votre message B
  18. 18. CleverToday Exemple Baskerville Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
  19. 19. CleverToday Exemple Gotham Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
  20. 20. CleverToday Exemple Bodoni Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
  21. 21. CleverToday Exemple Cooper Black Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
  22. 22. CleverToday Exemple Comic Sans MS Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod.
  23. 23. CleverToday Il n’y a pas de mauvaise typo, il n’y a que des mauvais usages.
  24. 24. CleverToday
  25. 25. CleverToday
  26. 26. CleverToday
  27. 27. CleverToday
  28. 28. CleverToday …
  29. 29. CleverToday Exploration des providers de typos - C
  30. 30. CleverToday Pourquoi un provider de typos? • Pas de gestion de droit (licence) • Les fichiers sont sécurisés • Facile à implémenter • Souvent accompagné d’outils d’aide et de suivi • Mais budget à prévoir
  31. 31. CleverToday GoogleFont 707 familles Gratuit TypeKit 1 200 familles Payant au forfait Fonts 150 000 familles Payant FontDeck 1 700 familles Payant à la vue MyFonts 23 000 familles Payant à la vue WebType 150 familles Payant à la vue Les providers de typos
  32. 32. CleverToday 2. Choisir sa typo but TypeCast
  33. 33. CleverToday Concentrez-vous sur l’essentiel, choisissez en noir et blanc.
  34. 34. CleverToday Explorez les graisses Portez ce vieux whisky au juge blond qui fume Portez ce vieux whisky au juge blond qui fume Portez ce vieux whisky au juge blond qui fume Portez  ce  vieux  whisky  au  juge  blond  qui  fume Portez ce vieux whisky au juge blond qui fume Portez ce vieux whisky au juge blond qui fume Portez ce vieux whisky au juge blond qui fume
  35. 35. CleverToday Qualité Personnalité Lisibilité Performance Budget
  36. 36. CleverToday Personnalité
  37. 37. CleverToday Les plus utilisés sur GoogleFonts
  38. 38. CleverToday Fluidité de la lecture
  39. 39. CleverToday Rapprochements a o 0 a o 0 a o 0 Century Gothic Monaco Merriweather
  40. 40. CleverToday Chiffres dansants 1234567890 1234567890 Raleway Monaco
  41. 41. CleverToday Les dates 12/03/2016 12/03/2016 Charter STM Montréal
  42. 42. CleverToday Les ligatures Ça suffit! Ça suffit! Gill Sans Sevarek Ça suffit! Informa Pro Ça suffit! Tahoma
  43. 43. CleverToday La performance
  44. 44. CleverToday
  45. 45. CleverToday Qualité
  46. 46. CleverToday Les combinaisons
  47. 47. CleverToday
  48. 48. CleverToday
  49. 49. CleverToday
  50. 50. CleverToday
  51. 51. CleverToday
  52. 52. CleverToday
  53. 53. CleverToday Langages supportés
  54. 54. CleverToday Création d’un style guide D
  55. 55. CleverToday La sémantique
  56. 56. CleverToday
  57. 57. CleverToday
  58. 58. CleverToday
  59. 59. CleverToday INUTILE DE CRIER. VOUS AVEZ D’AUTRES MOYENS POUR VOUS FAIRE ENTENDRE.
  60. 60. CleverToday Inutile de crier. Vous avez d’autres moyens pour vous faire entendre.
  61. 61. CleverToday TypeCast Style Guide
  62. 62. CleverToday Le Futur
  63. 63. CleverToday
  64. 64. CleverToday
  65. 65. CleverToday
  66. 66. CleverToday OpenType + CSS
  67. 67. CleverToday
  68. 68. CleverToday Questions?
  69. 69. CleverToday Merci :)

×