Typographie pour le Web

1 389 vues

Publié le

Cette formation a pour but de sensibiliser le public aux différents enjeux dans le choix d’une mise en page textuelle sur Internet.

La formation présentera dans les grandes lignes les différents types de police utilisés sur Internet, les situations où certaines polices sont plus ou moins adaptées, et les astuces d’ergonomie et de mise en page dans la création d’un site web.

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

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

Aucune remarque pour cette diapositive

Typographie pour le Web

  1. 1. WEB TYPOGRAPHIE par Damien Senger, webdesigner fonctionnel mercredi 3 décembre 2014 – Strasweb
  2. 2. « TYPE NERD » La typographie se doit d’être accessible.
  3. 3. « Everyone working on the web is a typographer whether they know it or not. » – Richard Rutter An Event Apart
  4. 4. La typographie est un élément intrinsèquement lié à la marque, surtout sur le web La typographie permet d’identifier un design, elle a une personnalité, une tonalité et une couleur.
  5. 5. « A brand is just a typeface, it’s all you fucking need. » – Erik Spiekermann Brand New Conference
  6. 6. LA TYPOGRAPHIE SUR LE WEB
  7. 7. « Web Design is 95% Typography. » – Oliver Reichenstein Information Architects
  8. 8. « The responsive web will be 99,9% typography. » – James Young WelcomeBrand.co.uk
  9. 9. Mobile first Content first Type first
  10. 10. « On small screens, many of your other visual éléments will go away so type is a critical part of the design. » – Dan Mall Smashing Conference
  11. 11. Il est aujourd’hui plus important que jamais d’avoir une bonne typographie.
  12. 12. Avant 2010 Les web-safe fonts
  13. 13. Serif WebSafe Fonts • Georgia • Palatino Linotype • Book Antiqua • Times New Roman • Times
  14. 14. Sans Serif WebSafe Fonts • Arial • Helvetica • Impact • Lucida Sans Unicode • Tahoma • Trebuchet MS • Verdana • Geneva
  15. 15. Monospace WebSafe Fonts • Courier New • Courier • Lucida Console
  16. 16. Cursive WebSafe Fonts • Comic Sans MS
  17. 17. Après 2010 L’ère Web Font
  18. 18. Web Font services • Typekit • FontDeck • MyFonts • FontShop • H&FJ Cloud Typography • Google Web Font • FontSquirrel
  19. 19. Un tel nombre… Comment chosir ?
  20. 20. « There are no rules. Just good decisions. » – Jon Tan & many others Big type little type, An Event Apart
  21. 21. Créer sa palette ça commence ici…
  22. 22. Typekit Le spotify de la typo
  23. 23. Google Fonts La simplicité
  24. 24. De belles typo et leurs usages
  25. 25. Gotham H&FJ font, USA 2001 Linéale géométrique la typo de ces slides
  26. 26. Helvetica Suisse, 1957 Linéale moderne
  27. 27. DIN Allemagne, 1936 Linéale géométrique
  28. 28. Futura Allemagne, 1927 Linéale géométrique
  29. 29. Adobe Caslon Pro Angleterre, 1692–1766 Garalde
  30. 30. Baskerville Angleterre, 1757 Réale
  31. 31. Cocon Pays-Bas, 1998 Linéale contemporaines
  32. 32. Franklin Gothic États-Unis, 1902 Linéale grotesques
  33. 33. Optima Allemagne, 1958 Incises
  34. 34. Cooper black États-Unis, 1922 Mécanes
  35. 35. Mistral France, 1953 Script
  36. 36. Ubuntu Angleterre, 2010 Linéale « humaniste »
  37. 37. Fira Sans Allemand, 2013 Linéale « humaniste »
  38. 38. Paragraphes vs. Titres Texte de labeur vs. texte d’affichage
  39. 39. Font size « em » est l’unité relative du webdesign 16px est la taille utilisée par défaut 1 em = 16 px de base font-size: 1em; /* 16px si aucune modif avant */
  40. 40. Kerning Le kern est l’espace entre deux lettres letter-spacing: -.1em;
  41. 41. Line-height La hauteur de ligne est l’espace vertical dans lequel le texte va s’insérer font: 1.2em/1.5em Helvetica, sans-serif; line-height: 1.5em;

×