Une introduction à la typographie pour le développeur Web. Présentée le 18/05/2015 @ FastIT

1. UNE INTRODUCTION À LA TYPOGRAPHIE
Nicolas Goutay | Fast IT | 14/04/2015

2. 95% of the information on the web is
written language. It is only logical to
say that a web designer should get
good training in the main discipline of
shaping written information, in other
words: Typography.
“
”Information Architects – Web is 95% Typography

3. “L’art et la manière d’utiliser les différents
types de caractères dans un but esthétique et
pratique.” – Wikipedia
“Typography matters because it helps conserve
the most valuable resource you have as a
writer — reader attention.” – Matthew Butterick
QU’EST-CE QUE LA TYPOGRAPHIE ?

4. QU’EST-CE QUE LA TYPOGRAPHIE ?
Les règles typographiques
Les bonnes pratiques
La composition d’une police
Le choix d’une police

5. LES RÈGLES TYPOGRAPHIQUES
"That's a 'magic' sock." ☓
“That’s a ‘magic’ sock.” ✓

6. LES RÈGLES TYPOGRAPHIQUES
Ressources :
“Typography Cheatsheet” – typewolf.com
“Type Composition” – practicaltypography.com

7. LES BONNES PRATIQUES
franckchimero.com

8. LES BONNES PRATIQUES
medium.com

9. LES BONNES PRATIQUES
Seuls les liens sont soulignés → italique ou gras pour une emphase
Taille du corps de texte comprise entre 15 et 25 px
Viser une longueur de ligne comprise entre 45 et 90 caractères
Agrandir la hauteur de ligne pour le corps de texte : 1.1–1.3 em

10. LA COMPOSITION D’UNE POLICE
Serif
(Garamond)
Sans Serif
(Proxima Nova)
Monospaced
(Nitti)

11. KERNING

12. KERNING (MANDATORY XKCD)

13. LIGATURES
CSS → text-rendering: optimizeLegibility;

14. Les polices gratuites : du bon et du (très) mauvais
→ Google Fonts est un très bon outil pour trouver des polices
→ Éviter Font Squirrel (et les autres), qualité trop aléatoire
Les polices payantes : très bon, mais cher
→ Typekit, FontDeck, Cloud.Typography, etc… font du Font As A Service
→ Acheter la fonte directement depuis le site de la fonderie
LE CHOIX D’UNE POLICE

15. TROUVER L’INSPIRATION
fontpair.co

16. TROUVER L’INSPIRATION
http://femmebot.github.io/google-type/

17. TROUVER L’INSPIRATION
WhatFont (extension Chrome)

18. Proxima Nova : 645€ (license Web)
Futura : 417€ (license Web)
Gotham : 99€/an (avec Cloud.Typography)
Avenir : 106€/an (avec fonts.com)
LE PRIX D’UNE POLICE

19. C’EST CHER – MAIS…
Gotham

20. C’EST CHER – MAIS…
Futura

21. C’EST CHER – MAIS…
Circular

22. typewolf.com :
→ Recommandation de polices, guides, ressources…
practicaltypography.com :
→ Excellent ebook (pay what you want) sur la typographie
practice.typekit.com :
→ Cours en ligne gratuit, par Adobe (Typekit).
EN SAVOIR PLUS

23. Polices :
→ Franklin Gothic (titres)
→ Proxima Nova (corps)
QUESTIONS ?