Une introduction à la typographie
23
U NE INTRODUCTION À LA TYPOGRAPHIE Nicolas Goutay | Fast IT | 14/04/2015
Transcript of Une introduction à la typographie
UNE INTRODUCTION À LA TYPOGRAPHIE
Nicolas Goutay | Fast IT | 14/04/2015
95% of the in format ion on the web is
wr i t ten language. I t i s on ly log ica l to
say tha t a web des igner shou ld get
good t ra in ing in the ma in d isc ip l ine o f
shap ing wr i t ten in fo rmat ion , in o ther
words : Typography.
“
”I n fo rmat ion Arch i tec ts – Web i s 95% Typography
“L’a r t e t l a man ière d ’u t i l i se r les d i f fé rents
types de carac tères dans un but esthét ique e t
prat ique .” – Wik iped ia
“Typography mat te rs because i t he lps conserve
the most va luab le resource you have as a
wr i te r — reader a t tent ion .” – Mat thew But te r ick
QU’EST-CE QUE LA TYPOGRAPHIE ?
QU’EST-CE QUE LA TYPOGRAPHIE ?
Les règ les typograph iques
Les bonnes pra t iques
La compos i t ion d ’une po l i ce
Le cho ix d ’une po l i ce
LES RÈGLES TYPOGRAPHIQUES
"That 's a 'mag ic ' sock ." ☓
“That ’s a ‘mag ic ’ sock .” ✓
LES RÈGLES TYPOGRAPHIQUES
Ressources :
“Typography Cheatsheet” – typewol f.com
“Type Compos i t ion” – pract ica l typography.com
LES BONNES PRATIQUES
Seu ls les l iens sont sou l ignés → i t a l ique ou gras pour une emphase
Ta i l le du corps de tex te compr ise ent re 15 e t 25 px
V iser une longueur de l igne compr ise ent re 45 e t 90 carac tères
Agrand i r l a hauteur de l igne pour le corps de tex te : 1 .1– 1 .3 em
LA COMPOSITION D’UNE POLICE
Serif (Garamond)
Sans Serif (Proxima Nova)
Monospaced
(Nitti)
KERNING
KERNING (MANDATORY XKCD)
LIGATURES
CSS → text-rendering: optimizeLegibility;
Les po l i ces gra tu i tes : du bon e t du ( t rès ) mauva is
→ Goog le Fonts es t un t rès bon out i l pour t rouver des po l i ces
→ Év i te r Font Squ i r re l (e t les au t res ) , qua l i té t rop a léa to i re
Les po l i ces payantes : t rès bon , ma is cher
→ Typek i t , FontDeck , C loud .Typography, e tc… fon t du Font As A Serv ice
→ Acheter la fon te d i rec tement depu is le s i te de la fonder ie
LE CHOIX D’UNE POLICE
TROUVER L’INSPIRATION
ht tp : / / femmebot .g i thub. io /goog le - type/
TROUVER L’INSPIRATION
WhatFont (ex tens ion Chrome)
Prox ima Nova : 645€ ( l i cense Web)
Futura : 417€ ( l i cense Web)
Gotham : 99€/an (avec Cloud.Typography)
Aveni r : 106€ /an (avec fonts .com)
LE PRIX D’UNE POLICE
C’EST CHER – MAIS…
Gotham
C’EST CHER – MAIS…
Futura
C’EST CHER – MAIS…
Ci rcu la r
t ypewol f.com :
→ Recommandat ion de po l i ces , gu ides , ressources…
prac t ica l typography.com :
→ Exce l len t ebook (pay what you want ) su r la typograph ie
p rac t ice .typek i t .com :
→ Cours en l igne gra tu i t , par Adobe (Typek i t ) .
EN SAVOIR PLUS
Pol ices :
→ F rank l in Goth ic ( t i t res )
→ P rox ima Nova (corps )
QUESTIONS ?
