CLEVER TODAY
La Typographie Web
CLEVER TODAY
Take the Quiz
CLEVER TODAY
1. Design is communication
CLEVER TODAY
1.
L’importance 

de la typographie
CleverToday
Le peu que nous lisons est déterminant.
On the average Web page, users have time to 

read at most 28% of the ...
CleverToday
La réduction progressive
CleverToday
Nous lisons ce que nous cliquons.
CleverToday
Notre compréhension est facilitée
lorsqu’il y a harmonie entre le fond et
la forme.
CleverToday
Your font is your identity,

it’s the ship of your message.
CleverToday
CleverToday
2. Choisir sa typo
CLEVER TODAY
2.
A. Rassemblement du matériel existant

B. Définition de votre message/marque

C. Exploration des providers...
CleverToday
A
Rassemblement du matériel existant
CleverToday
Exemple
CleverToday
Exemple
Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus
commodo, tortor mauris cond...
CleverToday
Si vous avez déjà votre site.
CleverToday
Définition de votre message
B
CleverToday
Exemple
Baskerville
Maecenas sed diam eget risus varius blandit sit amet non
magna. Aenean eu leo quam. Pellen...
CleverToday
Exemple
Gotham
Maecenas sed diam eget risus varius blandit sit amet non
magna. Aenean eu leo quam. Pellentesqu...
CleverToday
Exemple
Bodoni
Maecenas sed diam eget risus varius blandit sit amet non magna.
Aenean eu leo quam. Pellentesqu...
CleverToday
Exemple
Cooper Black
Maecenas sed diam eget risus varius blandit
sit amet non magna. Aenean eu leo quam.
Pelle...
CleverToday
Exemple
Comic Sans MS
Maecenas sed diam eget risus varius blandit sit amet
non magna. Aenean eu leo quam. Pell...
CleverToday
Il n’y a pas de mauvaise typo,

il n’y a que des mauvais usages.
CleverToday
CleverToday
CleverToday
CleverToday
CleverToday
…
CleverToday
Exploration des providers de typos
-
C
CleverToday
Pourquoi un provider de typos?
• Pas de gestion de droit (licence)

• Les fichiers sont sécurisés

• Facile à ...
CleverToday
GoogleFont
707 familles

Gratuit
TypeKit
1 200 familles

Payant au forfait
Fonts
150 000 familles

Payant
Font...
CleverToday
2. Choisir sa typo
but TypeCast
CleverToday
Concentrez-vous sur l’essentiel,
choisissez en noir et blanc.
CleverToday
Explorez les graisses
Portez ce vieux whisky au juge blond qui fume
Portez ce vieux whisky au juge blond qui f...
CleverToday
Qualité
Personnalité
Lisibilité
Performance
Budget
CleverToday
Personnalité
CleverToday
Les plus utilisés sur GoogleFonts
CleverToday
Fluidité de la lecture
CleverToday
Rapprochements
a o 0 a o 0 a o 0
Century Gothic Monaco Merriweather
CleverToday
Chiffres dansants
1234567890 1234567890
Raleway Monaco
CleverToday
Les dates
12/03/2016 12/03/2016
Charter STM Montréal
CleverToday
Les ligatures
Ça suffit! Ça suffit!
Gill Sans Sevarek
Ça suffit!
Informa Pro
Ça suffit!
Tahoma
CleverToday
La performance
CleverToday
CleverToday
Qualité
CleverToday
Les combinaisons
CleverToday
CleverToday
CleverToday
CleverToday
CleverToday
CleverToday
CleverToday
Langages supportés
CleverToday
Création d’un style guide
D
CleverToday
La sémantique
CleverToday
CleverToday
CleverToday
CleverToday
INUTILE DE CRIER. VOUS AVEZ
D’AUTRES MOYENS POUR VOUS
FAIRE ENTENDRE.
CleverToday
Inutile de crier. Vous avez d’autres
moyens pour vous faire entendre.
CleverToday
TypeCast Style Guide
CleverToday
Le Futur
CleverToday
CleverToday
CleverToday
CleverToday
OpenType + CSS
CleverToday
CleverToday
Questions?
CleverToday
Merci :)
Prochain SlideShare
Chargement dans…5
×

La Typographie Web - CleverToday

1 249 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 249
Sur SlideShare
0
Issues des intégrations
0
Intégrations
565
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 :)

×