Cahier de direction artistique pour la Retrospective Erik Spiekermann à l'ESAG Penninghen (proposition)

1. RÉTROSPECTIVE
ERIK SPIEKERMANN
Cahier de direction artistique
Shannon Kordylas - Oriane Juster

2. RÉTROSPECTIVE
ERIK SPIEKERMANN
Contexte
Shannon Kordylas - Oriane Juster

3. RÉTROSPECTIVE ERIK SPIEKERMANN
3
BRAND AGENCY
RAPPEL DU BRIEF
identité multimédia
Créer un logo et des codes
visuels cohérents pour une
publication print réalisée
dans le cadre du cours de
design éditorial
Travail de conception
graphique de l’identité
préliminaire au travail de
design éditorial qui sera
conduit par la suite en
print et en digital
Méthode
Analyser l’oeuvre, en
dégager des valeurs sé-
mantiques nécessaires à
la création du lettrage et
aux principes d’interac-
tion (principes de mises
en pages des gabarits et
transitions)
Attendus
Cahier de direction artistique intégrant :
- Lettrage
- Lettrage en réduction
- Lettrage et son tracé régulateur
- Lettrage et sa zone de sécurité
- Lettrage en positif et en négatif
- Déclinaison typographique
- Choix de typographies d’accompagnement
- Palette couleur
- Vocabulaire de formes (en vue de la création
de principes de mise en page ou de transition)
Sommaire
— Contexte
2 Rappel du brief
3 Who is Erik Spiekermann ?
4 Ses travaux : polices de caractères
5 Ses travaux : expérimentations typographiques
— Principes graphiques
8 Le logo
18 Les typos et leurs combinaisons
23 Les couleurs
24 Exemple d’utilisation

4. RÉTROSPECTIVE ERIK SPIEKERMANN
4
BRAND AGENCY
WHO IS ERIK SPIEKERMANN ?
Carrière
Erik Spiekermann est un des designers et typographes les
plus renommés. Alors qu’il est encore étudiant en His-
toire de l’art, il ne prend pas le temps de décrocher son
diplôme avant d’aller offrir ses services à diverses agences
de design à Londres et finit par créer sa propre maison
à Berlin avec Florian Fischer et Dieter Heil : Metadesign.
L’agence grandit, à Londres, San Francisco, Zurich. Les
clients se multiplient : Adobe, Apple, Audi mais aussi
Volkswagen, BVG - les transports publics berlinois - et la
ville de Berlin pour son identité institutionnelle. En 1990,
Spiekermann fonde le Fontfoundry Fontshop International
avec son épouse Joan et le designer anglais Neville Brody.
Il crée le FontFont Bibliothek Spiekermann où il publie les
fameuses typographies FF Meta, FF Unit, FF Info et bien
d’autres encore. En 2000, Spiekermann quitte Metadesign.
Aujourd’hui, il travaille avec Bosch, Otto Bock et la
ZDF depuis son bureau EdenSpiekermann à Berlin
ou Amsterdam.
Source : arte.fr
Pour aller plus loin
↘ en.wikipedia.org/wiki/Erik_Spiekermann
↘ son blog : spiekermann.com/en
↘ sa fonderie : www.fontfont.com
↘ son agence : edenspiekermann.com
↘ sur Twitter : @espiekermann

5. RÉTROSPECTIVE ERIK SPIEKERMANN
5
BRAND AGENCY
TRAVAUX
Polices de caractère
Deux best-sellers Ses autres polices

6. RÉTROSPECTIVE ERIK SPIEKERMANN
6
BRAND AGENCY
TRAVAUX
Expérimentations typographiques

7. RÉTROSPECTIVE
ERIK SPIEKERMANN
Principes graphiques
Shannon Kordylas - Oriane Juster

8. RÉTROSPECTIVE ERIK SPIEKERMANN
8
BRAND AGENCY
LOGO
rétro tive
Erik Spiekermann
Le logo reprend les deux
alphabets les plus connus
d’Erik Spiekermann :
le Meta, sous forme de
contours, ainsi que le
Officina Serif, sous forme
de lettres pleines. Le bleu
est la couleur de choix de
Siekermann, utilisé dans
le branding de ses agences
sucessives.
Parler de
typographie
au grand public
Faire apparaître les lignes
de construction et d’études
des fontes de caractère
est un choix délibéré, qui
vise à faire comprendre au
grand public l’essence du
métier de typographe, et
à renvoyer les initiés à ce
qu’ils connaissent déjà.

9. RÉTROSPECTIVE ERIK SPIEKERMANN
9
BRAND AGENCY
LOGO
Principe de création
rétro tive

10. RÉTROSPECTIVE ERIK SPIEKERMANN
10
BRAND AGENCY
LOGO
Déclinaisons
Monochrome fond clair Monochrome fond sombre
Couleur fond clair Couleur fond bleu
CMJN : 0 0 0 47
RVB : 135 137 140
CMJN : 0 0 0 0
RVB : 255 255 255
CMJN : 73 27 0 0
RVB : 46 134 204
CMJN : 0 0 0 100
RVB : 0 0 0
CMJN : 0 0 0 0
RVB : 255 255 255
CMJN : 0 0 0 47
RVB : 135 137 140
CMJN : 0 0 0 100
RVB : 0 0 0
CMJN : 0 0 0 0
RVB : 255 255 255
CMJN : 73 27 0 0
RVB : 46 134 204
CMJN : 0 0 0 100
RVB : 0 0 0
CMJN : 0 0 0 0
RVB : 255 255 255
CMJN : 0 0 0 47
RVB : 135 137 140
rétro tive
rétro tive rétro tive
rétro tive

11. RÉTROSPECTIVE ERIK SPIEKERMANN
11
BRAND AGENCY
LOGO
Tracé régulateur et zone de sécurité
tracé régulateur
zone de sécurité

12. RÉTROSPECTIVE ERIK SPIEKERMANN
12
BRAND AGENCY
130 x 50 mm
85 x 33 mm
40 x 15 mm
rétro tive
rétro tive
rétro tive
LOGO
Échelles

13. RÉTROSPECTIVE ERIK SPIEKERMANN
13
BRAND AGENCY
LOGO
Cartouche associé
rétro tive
Taille minimum d’utilisation : Taille minimum d’utilisation :
Toujours positionné dans l’angle inférieur gauche.
rétro tive
26 mm
18 mm
rétro tive rétro tive
rétro tive
18 mm
26 mm
rétro tive
rétro tive rétro tive

14. RÉTROSPECTIVE ERIK SPIEKERMANN
14
BRAND AGENCY
rétro tive
rétro tive
rétro tive rétro tive
Sur une image, opacité = 75 %
rétro tive rétro tiverétro tive
LOGO
Cartouche associé

15. RÉTROSPECTIVE ERIK SPIEKERMANN
15
BRAND AGENCY
rétro tive
LOGO
Exemples d’utilisation
rétro tive
rrééttrroo ttiivvee
rétro tive

16. RÉTROSPECTIVE ERIK SPIEKERMANN
16
BRAND AGENCY
LOGO
Exemples d’utilisation
rétro tiverétro tive
rétro tive rétro tive
rétro tive

17. RÉTROSPECTIVE ERIK SPIEKERMANN
17
BRAND AGENCY
LOGO
VIOLATIONS
rétro tive
rétro tive
50 x 19 mm
40 x 15 mm
30 x 12 mm
20 x 8 mm
rétro tive
rétro tiveo tt
rétro tive 15 mm
40 mm
Taille minimum d’utilisation du logo :
rétro tive rétro tive
rétro
tive
o
rétrotive
rétro tive
Supprimer une partie du logo :
Pencher le logo :
Supprimer le fond (bleu ou noir) :
Modifier les couleurs :
rétro tive

18. RÉTROSPECTIVE ERIK SPIEKERMANN
18
BRAND AGENCY
LES TYPO ET LEURS COMBINAISONS
Les alphabets de titrageOfficinaCrayonnéMetaTracéMetaAxesOfficinaRegular
Quatre alphabets
à combiner…
Le logo reprend les deux
alphabets les plus connus
d’Erik Spiekermann :
le Meta, sous forme de
contours, ainsi que le
Officina Serif, sous forme
de lettres pleines. Le bleu
est la couleur de choix de
Siekermann, utilisé dans
le branding de ses agences
sucessives.
… pour raconter la
création typogra-
phique
Faire apparaître les lignes
de construction et d’études
des fontes de caractère
est un choix délibéré, qui
vise à faire comprendre au
grand public l’essence du
métier de typographe, et
à renvoyer les initiés à ce
qu’ils connaissent déjà.

19. RÉTROSPECTIVE ERIK SPIEKERMANN
19
BRAND AGENCY
LES TYPO ET LEURS COMBINAISONS
Quelques déclinaisons possibles…
Officina Crayonné + Meta Tracé
Officina Crayonné + Meta Axes
Meta Trac» + Meta Axes
Meta Axes + Officina Regular
Raconter l’évolution de la typographie avec combinaisons

20. RÉTROSPECTIVE ERIK SPIEKERMANN
20
BRAND AGENCY
Texte courant Nes consequo mollibus dem eturioribus abor modigent
harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Ga. Itat prepe vent dignita temporeri nem nullit, omnimusam hitasint.
Chapeau et exergues nobis ipitatia sit lanihit iisquis
duntest iistionseque odit aut volupti beratinum inus,
NOTES ET SOURCES Nes consequo mollibus dem eturioribus abor modigent harum hil
eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
Intertitres ipsum si
Officina Crayonné 50 pt
CMJN 73 27 0 0 | RVB 46 134 204
Meta Tracé 50 pt
CMJN 0 0 0 100 | RVB 0 0 0
Officina Regular 22 pt
CMJN 73 27 0 0 | RVB 46 134 204
Meta Axes 22 pt
CMJN : 0 0 0 47 | RVB : 135 137 140
MetaPro Normal 13 pt
CMJN 0 0 0 85 | RVB 60 60 62
MetaPro Bold 11 pt
CMJN 73 27 0 0 | RVB 46 134 204
Officina Serif Book 10 pt
CMJN 0 0 0 7 | RVB 80 81 84
MetaPro Book et Bold 8 pt
CMJN 0 0 0 7 | RVB 80 81 84
LES TYPO ET LEURS COMBINAISONS
Charte et éléments graphiques
Les filets
0,25 pt - Tirets pointillés - CMJN 0 0 0 47 - RVB : 135 137 140
0,25 pt - Tirets pointillés - CMJN 0 0 0 100 - RVB : 0 0 0
1 pt - Points japonais - CMJN : 73 27 0 0 - RVB : 46 134 204
1 pt - Ligne continue - CMJN : 73 27 0 0 - RVB : 46 134 204
1 pt - Ligne continue - CMJN 0 0 0 100 - RVB : 0 0 0

21. RÉTROSPECTIVE ERIK SPIEKERMANN
21
BRAND AGENCY
MetaPro Bold
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZ
aàbcçdeéèêfghijklmnopqrstuùvwxyz
0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
MetaPro Normal
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZ
aàbcçdeéèêfghijklmnopqrstuùvwxyz
0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
MetaPro Medium
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZ
aàbcçdeéèêfghijklmnopqrstuùvwxyz
0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
Officina Serif Book Std
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZ
aàbcçdeéèêfghijklmnopqrstuùvwxyz
0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
Officina Serif Book Italic Std
AÀBCÇDEÉÈÊFGHIJKLMNOPQRSTUÙVWXYZ
aàbcçdeéèêfghijklmnopqrstuùvwxyz
0123456789 ! ? ; : , . / € ( ) @ ‘ « » & *
Polices de caractères recommandées pour les intertitres et les notes
Autres polices de caractère utilisables en fonction des besoins du support : citations, sous-titres…
Police de caractères recommandée pour le texte courant
Meta et Officina sont tous
deux des créations de Spie-
kermann.
Le Meta (FF Meta)
Dessinée en 1984, cette
linéale comporte de
nombreux petits détails,
biseaux, angles, etc. des-
tinés à faciliter la lecture.
Originellement commandée
par la Poste allemande,
elle a été refusée… et
est quasi instantanément
devenue un best-seller de
Font Font, la fonderie de
Spiekermann.
Le Officina Serif
Sorti dans les années 90,
ce caractère a d’abord été
travaillé dans une version
sans empattement, Officina
Sans. Destinée aux commu-
nications institutionnelles,
sa grande lisibilité en a fait
un autre grand succès de
Spiekermann. Officina Serif
a été quasi entièrement re-
desinnée par Spiekermann
en 2003.
LES TYPO ET LEURS COMBINAISONS
Charte graphique

22. RÉTROSPECTIVE ERIK SPIEKERMANN
22
BRAND AGENCY
LES TYPO ET LEURS COMBINAISONS
Charte graphique - Exemple de réalisation
Nes consequo mollibus dem etu-
rioribus abor modigent harum hil
eatur ma sitecto tem doluptatures
endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita tem-
poreri nem nullit, omnimusam
hitasint.
Me eictum volorum volest, ipid
quam vit qui in corror sequia volup-
tiatis esto esed ut idendem es es
everis eatem quam solum ipsam,
nem voluptat omnisti aut eost
qui ut a dolorectotas et molentin
eaquundes nihitios molupta siti ul-
labore mosam, cusaped maximent,
tempore moluptatem. Occusam
eatque esti berum, cus volores
torpos pero eaque dus.
Nec consectetur
Arit amus a nimos sam estione sen-
diaes dolut adis et quat et ommolor
arci aliti que net apeliam quibus nis
pore exerum fuga. Name nos es so-
luptiumque non parchit atuscia as
apiene perumqui optasimus mo cum
quid eliquia sitibus arum ni des et
et vendae porporeiur minis eosam
aut alibus estrum rehenis et odio.
Dae periatque dolo optaturepudi…
Se non nobis ipitatia sit lanihit iisquis duntest iistionse-
que odit aut volupti beratinum inus, acepel magnien
disitat. Debitiaestem facia quam, quametur, quam…
NOTES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem
doluptatures endelenim erunt. Ficaborem.
Nes consequo mollibus dem etu-
rioribus abor modigent harum hil
eatur ma sitecto tem doluptatures
endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita tem-
poreri nem nullit, omnimusam
hitasint.
Me eictum volorum volest, ipid
quam vit qui in corror sequia volup-
tiatis esto esed ut idendem es es
everis eatem quam solum ipsam,
nem voluptat omnisti aut eost
qui ut a dolorectotas et molentin
eaquundes nihitios molupta siti ul-
labore mosam, cusaped maximent,
tempore moluptatem. Occusam
eatque esti berum, cus volores
torpos pero eaque dus.

23. RÉTROSPECTIVE ERIK SPIEKERMANN
23
BRAND AGENCY
LES COULEURS
Gris 01
CMJN : 0 0 0 47
RVB : 135 137 140
# 999b9e
Blanc 01
CMJN : 0 0 0 0
RVB : 255 255 255
# FFFFFF
Bleu Eden 01
CMJN : 73 27 0 0
RVB : 46 134 204
# 0f93d9
Noir 01
CMJN : 0 0 0 100
RVB : 0 0 0
# 000000
Gris Texte 01
CMJN : 0 0 0 75
RVB : 80 81 84
# 636467
Gris Texte 02
CMJN : 0 0 0 85
RVB : 60 60 62
# 4d4d4f
Bleu 02
CMJN : 60 13 0 0
RVB : 73 164 224
# 41b0e9

24. RÉTROSPECTIVE ERIK SPIEKERMANN
24
BRAND AGENCY
EXEMPLE D’UTILISATION
Nes consequo mollibus dem etu-
rioribus abor modigent harum hil
eatur ma sitecto tem doluptatures
endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita tem-
poreri nem nullit, omnimusam
hitasint.
Me eictum volorum volest, ipid
quam vit qui in corror sequia vo-
luptiatis esto esed ut idendem es
es everis eatem quam solum ipsam,
nem voluptat omnisti aut eost
qui ut a dolorectotas et molentin
eaquundes nihitios molupta siti
ullabore mosam, cusaped maxi-
ment, tempore moluptatem. Occu-
sam eatque esti berum, cus volores
torpos pero eaque dus.
Nec consectetur
Arit amus a nimos sam estione sen-
diaes dolut adis et quat et ommolor
arci aliti que net apeliam quibus nis
Se non nobis ipitatia sit lanihit iisquis duntest iistionse-
que odit aut volupti beratinum inus, acepel magnien
disitat. Debitiaestem facia quam, quametur, quam…
NOTES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem
doluptatures endelenim erunt. Ficaborem.
rétro tive
Catalogue de l’exposition
Nes consequo mollibus dem etu-
rioribus abor modigent harum hil
eatur ma sitecto tem doluptatures
endelenim erunt. Ficaborem.
Lorem ipsum dolor
Ga. Itat prepe vent dignita
temporeri nem nullit, omnimusam
hitasint.
Me eictum volorum volest, ipid
quam vit qui in corror sequia
voluptiatis esto esed ut idendem es
es everis eatem quam solum ipsam,
nem voluptat omnisti aut eost
qui ut a dolorectotas et molentin
eaquundes nihitios molupta siti ul-
labore mosam, cusaped maximent,
tempore moluptatem.
Occusam eatque esti berum, cus
volores torpos pero eaque dus. Arit
amus a nimos sam estione sendiaes
dolut adis et quat et ommolor
arci aliti que net apeliam quibus
nisTemporro dicta venisci magnam,
oditatem dolorro explias diam ario
vent optatur ehenetus aut ventius
simin et a nonseque necte re explis
ipsunt acculparum inctorita verferi-
bus, quodio es alique repe voluptiis
coriam andicil labori od qui diasit
alis ea velent dolorem nus quidem
quodit parum, cones quossed ex en-
dundel in plitem quunt estionsero
omnist laudit plic tem et alia.
Nec consectetur
Conseque nonsequam duciaep
erenis repelique sa dolor aut fugiam
asitibus non consequi conseribus
ma sequibus ex et amenditio
optaque vid ut qui conserferes
essi dent fugit esequi occuptatis
comnihil eatius simagnis minvelest
facipid endenim enducid untota-
tiunt quam, nullat rendis entis es
quid quatem et modiam ea quatur,
sitis accabor iberum que ditis accae.
Ga. Ut pra dolore, quunt, sentisti-
bus, quatur? Cearum corecus ex et
occullaborro modit rectamus, te sit,
non repudia dolestissum, officae
cuptatum fuga. Odi rendis que
nonserovit pereperias de volori odi-
tatiur recea es et officit lati nonse-
qui dolupitiamet aligenia perumqui
ventis et es a voluptati cum
conserum que volo blam aspidunt
vent enditatur at ditaest, nonsequi
offic to et acius rehendam, quam
sequam quaersp erchilit pro et
etus explaborum dolupta speribusa
soloris ea sum aligend igentia
velliberum fugiasini optatas ut lam
alique con consequ iscimod
NOTES Nes consequo mollibus dem eturioribus abor modigent harum hil eatur ma sitecto tem doluptatures endelenim erunt. Ficaborem.
NOTES Nes conse-
quo mollibus dem
eturioribus abor
modigent harum
hil eatur ma sitecto
tem doluptatures
endelenim erunt.
Ficaborem.