la typographie web - clevertoday
TRANSCRIPT
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 words
during an average visit.Nielsen Norman Group
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 de typographies
D. Création d’un style guide
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 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.
CleverToday
Si vous avez déjà votre site.
CleverToday
Définition de votre message
B
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.
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.
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.
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.
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.
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 à implémenter
• Souvent accompagné d’outils d’aide et de suivi
• Mais budget à prévoir
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
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 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
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 0Century Gothic Monaco Merriweather
CleverToday
Chiffres dansants
1234567890 1234567890Raleway Monaco
CleverToday
Les dates
12/03/2016 12/03/2016Charter 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 :)