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

Typographie pour le Web

1 498 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 498
Sur SlideShare
0
Issues des intégrations
0
Intégrations
9
Actions
Partages
0
Téléchargements
42
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;

×