SlideShare uma empresa Scribd logo
1 de 69
Baixar para ler offline
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
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.
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.
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.
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.
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.
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  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
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 :)

Mais conteúdo relacionado

Destaque

Codes Typographiques1
Codes Typographiques1Codes Typographiques1
Codes Typographiques1
Signlighter
 
De La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleDe La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie Visible
LCxLM
 
Amif2008 Projet Mutualitic
Amif2008 Projet MutualiticAmif2008 Projet Mutualitic
Amif2008 Projet Mutualitic
Yannick LANDAIS
 
La revue européenne des médias et du numérique - n°0
La revue européenne des médias et du numérique - n°0La revue européenne des médias et du numérique - n°0
La revue européenne des médias et du numérique - n°0
La revue européenne des médias et du numérique
 

Destaque (17)

Techniques de web design
Techniques de web designTechniques de web design
Techniques de web design
 
L'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesignL'art de la typographie, d'illustrator à InDesign
L'art de la typographie, d'illustrator à InDesign
 
Koudetat identite - Typographie
Koudetat identite - TypographieKoudetat identite - Typographie
Koudetat identite - Typographie
 
Comment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia MorogeComment construire son univers iconographique par Julia Moroge
Comment construire son univers iconographique par Julia Moroge
 
Cours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresseCours de typographie (2) - Le flux typographique dans le prépresse
Cours de typographie (2) - Le flux typographique dans le prépresse
 
Codes Typographiques1
Codes Typographiques1Codes Typographiques1
Codes Typographiques1
 
De La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie VisibleDe La typographie Lisible à la Typographie Visible
De La typographie Lisible à la Typographie Visible
 
Pancreatitis
PancreatitisPancreatitis
Pancreatitis
 
Règlement du prix talents w9 2015
Règlement du prix talents w9 2015Règlement du prix talents w9 2015
Règlement du prix talents w9 2015
 
CV
CVCV
CV
 
Amif2008 Projet Mutualitic
Amif2008 Projet MutualiticAmif2008 Projet Mutualitic
Amif2008 Projet Mutualitic
 
La revue européenne des médias et du numérique - n°0
La revue européenne des médias et du numérique - n°0La revue européenne des médias et du numérique - n°0
La revue européenne des médias et du numérique - n°0
 
Ecole Raymond_Objets-perdus decembre 2015
Ecole Raymond_Objets-perdus decembre 2015Ecole Raymond_Objets-perdus decembre 2015
Ecole Raymond_Objets-perdus decembre 2015
 
Presentación Mateo
Presentación MateoPresentación Mateo
Presentación Mateo
 
Conférence FrancoGrid à la Bibliothèque Francophone de Second Life
Conférence FrancoGrid à la Bibliothèque Francophone de Second LifeConférence FrancoGrid à la Bibliothèque Francophone de Second Life
Conférence FrancoGrid à la Bibliothèque Francophone de Second Life
 
India
IndiaIndia
India
 
Tema 6
Tema 6Tema 6
Tema 6
 

Semelhante a La Typographie Web - CleverToday

Le design, l'art, le management & le marketing
Le design, l'art, le management & le marketing Le design, l'art, le management & le marketing
Le design, l'art, le management & le marketing
Esteban Giner
 

Semelhante a La Typographie Web - CleverToday (20)

Des conférences à voir et à revoir
Des conférences à voir et à revoirDes conférences à voir et à revoir
Des conférences à voir et à revoir
 
2021_creation refonte web
2021_creation refonte web2021_creation refonte web
2021_creation refonte web
 
Internationalisation des contenus
Internationalisation des contenusInternationalisation des contenus
Internationalisation des contenus
 
Ouvrez votre logiciel au monde
Ouvrez votre logiciel au mondeOuvrez votre logiciel au monde
Ouvrez votre logiciel au monde
 
Synonyme Net Information 2009 Fra
Synonyme Net Information 2009 FraSynonyme Net Information 2009 Fra
Synonyme Net Information 2009 Fra
 
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
Webinar - 1h top chrono pour traduire un site WordPress - Avec Thibaud de Weg...
 
La pyramide inversée (expliquée en 3 minutes)
La pyramide inversée (expliquée en 3 minutes)La pyramide inversée (expliquée en 3 minutes)
La pyramide inversée (expliquée en 3 minutes)
 
Les structures de sites incontournables pour une strategie de prospection dig...
Les structures de sites incontournables pour une strategie de prospection dig...Les structures de sites incontournables pour une strategie de prospection dig...
Les structures de sites incontournables pour une strategie de prospection dig...
 
2016 octo wp_culture_code_software_craftsmanship
2016 octo wp_culture_code_software_craftsmanship2016 octo wp_culture_code_software_craftsmanship
2016 octo wp_culture_code_software_craftsmanship
 
Création & refonte de site internet
Création & refonte de site internet Création & refonte de site internet
Création & refonte de site internet
 
Formation Visibilité WEB OIM ONU
Formation Visibilité WEB OIM ONUFormation Visibilité WEB OIM ONU
Formation Visibilité WEB OIM ONU
 
TraductionPhilosophy. (1).pdf
TraductionPhilosophy. (1).pdfTraductionPhilosophy. (1).pdf
TraductionPhilosophy. (1).pdf
 
Intelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imaginationIntelligence Artificielle: Vers l'ère de l'imagination
Intelligence Artificielle: Vers l'ère de l'imagination
 
Création ou refonte de site Internet
Création ou refonte de site InternetCréation ou refonte de site Internet
Création ou refonte de site Internet
 
Dictionnaire des idées reçues sur le monde digital #dictionnerd
Dictionnaire des idées reçues sur le monde digital #dictionnerdDictionnaire des idées reçues sur le monde digital #dictionnerd
Dictionnaire des idées reçues sur le monde digital #dictionnerd
 
Téléphonie d'entreprise : comment rater son changement d'installation
Téléphonie d'entreprise : comment rater son changement d'installation Téléphonie d'entreprise : comment rater son changement d'installation
Téléphonie d'entreprise : comment rater son changement d'installation
 
Le design, l'art, le management & le marketing
Le design, l'art, le management & le marketing Le design, l'art, le management & le marketing
Le design, l'art, le management & le marketing
 
Pourquoi devenir développeur - by Joane SETANGNI
Pourquoi devenir développeur - by Joane SETANGNIPourquoi devenir développeur - by Joane SETANGNI
Pourquoi devenir développeur - by Joane SETANGNI
 
Les chatbots, l’IA dans tout cela, les technologies
Les chatbots, l’IA dans tout cela, les technologiesLes chatbots, l’IA dans tout cela, les technologies
Les chatbots, l’IA dans tout cela, les technologies
 
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisationsProspecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
Prospecter via e-mail : stratégie,bonnes pratiques, outils et automatisations
 

Mais de CleverToday

Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...
Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...
Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...
CleverToday
 
Les capteurs de l'Internet des Objets, par Jean-Samuel Chenard
Les capteurs de l'Internet des Objets, par Jean-Samuel ChenardLes capteurs de l'Internet des Objets, par Jean-Samuel Chenard
Les capteurs de l'Internet des Objets, par Jean-Samuel Chenard
CleverToday
 

Mais de CleverToday (14)

Les développeurs viennent de mars, les utilisateurs de vénus
Les développeurs viennent de mars, les utilisateurs de vénusLes développeurs viennent de mars, les utilisateurs de vénus
Les développeurs viennent de mars, les utilisateurs de vénus
 
Découvrir l'Internet des Objets
Découvrir l'Internet des ObjetsDécouvrir l'Internet des Objets
Découvrir l'Internet des Objets
 
La matrice du modèle d'affaires, par Jerôme Arnaud
La matrice du modèle d'affaires, par Jerôme ArnaudLa matrice du modèle d'affaires, par Jerôme Arnaud
La matrice du modèle d'affaires, par Jerôme Arnaud
 
Mythes et Réalités de l'Analytics
Mythes et Réalités de l'AnalyticsMythes et Réalités de l'Analytics
Mythes et Réalités de l'Analytics
 
Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...
Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...
Competitive Intelligence and Market Research in IT: How to Apply it in IT Com...
 
Le Growth Hacking: Optimisez votre croissance
Le Growth Hacking: Optimisez votre croissanceLe Growth Hacking: Optimisez votre croissance
Le Growth Hacking: Optimisez votre croissance
 
Les capteurs de l'Internet des Objets, par Jean-Samuel Chenard
Les capteurs de l'Internet des Objets, par Jean-Samuel ChenardLes capteurs de l'Internet des Objets, par Jean-Samuel Chenard
Les capteurs de l'Internet des Objets, par Jean-Samuel Chenard
 
Social selling : Un Nouveau Modèle d'Affaires
Social selling :  Un Nouveau Modèle d'Affaires Social selling :  Un Nouveau Modèle d'Affaires
Social selling : Un Nouveau Modèle d'Affaires
 
La Méthode Google
La Méthode GoogleLa Méthode Google
La Méthode Google
 
Le Growth Hacking pour acquérir ses véritables utilisateurs
Le Growth Hacking pour acquérir ses véritables utilisateursLe Growth Hacking pour acquérir ses véritables utilisateurs
Le Growth Hacking pour acquérir ses véritables utilisateurs
 
La Veille concurrentielle sur les réseaux sociaux
La Veille concurrentielle sur les réseaux sociauxLa Veille concurrentielle sur les réseaux sociaux
La Veille concurrentielle sur les réseaux sociaux
 
Accessibilité web
Accessibilité webAccessibilité web
Accessibilité web
 
AB Testing
AB TestingAB Testing
AB Testing
 
The patterns to boost your time to-market
The patterns to boost your time to-marketThe patterns to boost your time to-market
The patterns to boost your time to-market
 

Último

Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
AmgdoulHatim
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
ikospam0
 

Último (19)

L application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxL application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptx
 
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptxIntégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
 
Formation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptxFormation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptx
 
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
 
Cours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiquesCours Généralités sur les systèmes informatiques
Cours Généralités sur les systèmes informatiques
 
L'expression du but : fiche et exercices niveau C1 FLE
L'expression du but : fiche et exercices  niveau C1 FLEL'expression du but : fiche et exercices  niveau C1 FLE
L'expression du but : fiche et exercices niveau C1 FLE
 
Les roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptxLes roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptx
 
Télécommunication et transport .pdfcours
Télécommunication et transport .pdfcoursTélécommunication et transport .pdfcours
Télécommunication et transport .pdfcours
 
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetFormation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
 
Neuvaine de la Pentecôte avec des textes de saint Jean Eudes
Neuvaine de la Pentecôte avec des textes de saint Jean EudesNeuvaine de la Pentecôte avec des textes de saint Jean Eudes
Neuvaine de la Pentecôte avec des textes de saint Jean Eudes
 
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
 
Apolonia, Apolonia.pptx Film documentaire
Apolonia, Apolonia.pptx         Film documentaireApolonia, Apolonia.pptx         Film documentaire
Apolonia, Apolonia.pptx Film documentaire
 
les_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhkles_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhk
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
 
python-Cours Officiel POO Python-m103.pdf
python-Cours Officiel POO Python-m103.pdfpython-Cours Officiel POO Python-m103.pdf
python-Cours Officiel POO Python-m103.pdf
 
Echos libraries Burkina Faso newsletter 2024
Echos libraries Burkina Faso newsletter 2024Echos libraries Burkina Faso newsletter 2024
Echos libraries Burkina Faso newsletter 2024
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
 
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANKRAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
 

La Typographie Web - CleverToday