la typographie web - clevertoday
TRANSCRIPT
![Page 1: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/1.jpg)
CLEVER TODAY
La Typographie Web
![Page 2: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/2.jpg)
CLEVER TODAY
Take the Quiz
![Page 3: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/3.jpg)
CLEVER TODAY
1. Design is communication
![Page 4: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/4.jpg)
CLEVER TODAY
1.L’importance
de la typographie
![Page 5: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/5.jpg)
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
![Page 6: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/6.jpg)
CleverToday
La réduction progressive
![Page 7: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/7.jpg)
CleverToday
Nous lisons ce que nous cliquons.
![Page 8: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/8.jpg)
CleverToday
Notre compréhension est facilitée lorsqu’il y a harmonie entre le fond et
la forme.
![Page 9: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/9.jpg)
CleverToday
Your font is your identity,it’s the ship of your message.
![Page 10: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/10.jpg)
CleverToday
![Page 11: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/11.jpg)
CleverToday
2. Choisir sa typo
![Page 12: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/12.jpg)
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
![Page 13: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/13.jpg)
CleverToday
A
Rassemblement du matériel existant
![Page 14: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/14.jpg)
CleverToday
Exemple
![Page 15: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/15.jpg)
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.
![Page 16: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/16.jpg)
CleverToday
Si vous avez déjà votre site.
![Page 17: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/17.jpg)
CleverToday
Définition de votre message
B
![Page 18: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/18.jpg)
CleverToday
Exemple
BaskervilleMaecenas 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.
![Page 19: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/19.jpg)
CleverToday
Exemple
GothamMaecenas 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.
![Page 20: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/20.jpg)
CleverToday
Exemple
BodoniMaecenas 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.
![Page 21: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/21.jpg)
CleverToday
Exemple
Cooper BlackMaecenas 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.
![Page 22: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/22.jpg)
CleverToday
Exemple
Comic Sans MSMaecenas 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.
![Page 23: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/23.jpg)
CleverToday
Il n’y a pas de mauvaise typo,
il n’y a que des mauvais usages.
![Page 24: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/24.jpg)
CleverToday
![Page 25: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/25.jpg)
CleverToday
![Page 26: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/26.jpg)
CleverToday
![Page 27: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/27.jpg)
CleverToday
![Page 28: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/28.jpg)
CleverToday
…
![Page 29: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/29.jpg)
CleverToday
Exploration des providers de typos-
C
![Page 30: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/30.jpg)
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
![Page 31: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/31.jpg)
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
![Page 32: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/32.jpg)
CleverToday
2. Choisir sa typo
but TypeCast
![Page 33: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/33.jpg)
CleverToday
Concentrez-vous sur l’essentiel, choisissez en noir et blanc.
![Page 34: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/34.jpg)
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 fumePortez 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
![Page 35: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/35.jpg)
CleverToday
Qualité
Personnalité
Lisibilité
Performance
Budget
![Page 36: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/36.jpg)
CleverToday
Personnalité
![Page 37: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/37.jpg)
CleverToday
Les plus utilisés sur GoogleFonts
![Page 38: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/38.jpg)
CleverToday
Fluidité de la lecture
![Page 39: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/39.jpg)
CleverToday
Rapprochements
a o 0 a o 0 a o 0Century Gothic Monaco Merriweather
![Page 40: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/40.jpg)
CleverToday
Chiffres dansants
1234567890 1234567890Raleway Monaco
![Page 41: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/41.jpg)
CleverToday
Les dates
12/03/2016 12/03/2016Charter STM Montréal
![Page 42: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/42.jpg)
CleverToday
Les ligatures
Ça suffit! Ça suffit!Gill Sans Sevarek
Ça suffit!Informa Pro
Ça suffit!Tahoma
![Page 43: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/43.jpg)
CleverToday
La performance
![Page 44: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/44.jpg)
CleverToday
![Page 45: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/45.jpg)
CleverToday
Qualité
![Page 46: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/46.jpg)
CleverToday
Les combinaisons
![Page 47: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/47.jpg)
CleverToday
![Page 48: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/48.jpg)
CleverToday
![Page 49: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/49.jpg)
CleverToday
![Page 50: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/50.jpg)
CleverToday
![Page 51: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/51.jpg)
CleverToday
![Page 52: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/52.jpg)
CleverToday
![Page 53: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/53.jpg)
CleverToday
Langages supportés
![Page 54: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/54.jpg)
CleverToday
Création d’un style guide
D
![Page 55: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/55.jpg)
CleverToday
La sémantique
![Page 56: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/56.jpg)
CleverToday
![Page 57: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/57.jpg)
CleverToday
![Page 58: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/58.jpg)
CleverToday
![Page 59: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/59.jpg)
CleverToday
INUTILE DE CRIER. VOUS AVEZ D’AUTRES MOYENS POUR VOUS
FAIRE ENTENDRE.
![Page 60: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/60.jpg)
CleverToday
Inutile de crier. Vous avez d’autres moyens pour vous faire entendre.
![Page 61: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/61.jpg)
CleverToday
TypeCast Style Guide
![Page 62: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/62.jpg)
CleverToday
Le Futur
![Page 63: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/63.jpg)
CleverToday
![Page 64: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/64.jpg)
CleverToday
![Page 65: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/65.jpg)
CleverToday
![Page 66: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/66.jpg)
CleverToday
OpenType + CSS
![Page 67: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/67.jpg)
CleverToday
![Page 68: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/68.jpg)
CleverToday
Questions?
![Page 69: La Typographie Web - CleverToday](https://reader034.vdocument.in/reader034/viewer/2022042706/58a3f4f71a28ab272e8b7081/html5/thumbnails/69.jpg)
CleverToday
Merci :)