3. Grilles macro-typo 3 /184
Qui sommes-nous ?
Marie Guillaumet
Web designer et
développeur web front-end
http://marieguillaumet.com/
@kreestal
bit.ly/site-marie
4. Grilles macro-typo 4 /184
Qui sommes-nous ?
Vincent Valentin
Développeur web front-end
http://www.htmlzengarden.com/
@htmlzg
bit.ly/site-vincent
6. Grilles macro-typo 6 /184
Plan d’attaque !
1.La grille toute puissante
2.Concevoir sa grille
3.La grille dans la pratique
7. Grilles macro-typo 7 /184
Objectifs
• Donner envie aux développeurs web
front-end et aux web designers
d’utiliser la grille
• Fournir une méthodologie de travail
8. Grilles macro-typo 8 /184
N’oubliez pas !
N’hésitez pas à nous interrompre si vous
avez des questions.
Toutes les ressources évoquées seront
réunies sur une page web dédiée.
24. Grilles macro-typo 24 /184
Un outil commun : la grille.
Unité. Harmonie. Rythme.
25. Grilles macro-typo 25 /184
Offrir au regard des contenus
clairs, agréables à lire, dans
lesquels on se repère aisément.
++ Lisibilité
++ Accessibilité
++ Capitaliser sur l'apprentissage
33. Grilles macro-typo 33 /184
Les repères linéaires sont des
outils précieux dans l'histoire de
l'art.
L'art moderne a fait de la grille,
outil invisible, une œuvre à part
entière.
34. Grilles macro-typo 34 /184
Mondrian
Composition avec
jaune, bleu et rouge
(1939-1942)
35. Grilles macro-typo 35 /184
Morellet
Reflets dans l’eau
déformés par
le spectateur
(1964)
38. Grilles macro-typo 38 /184
Graphisme contemporain
Style suisse : prise de pouvoir de
l’utilitaire sur l’expression personnelle.
Utilisation systématique de la grille.
43. Grilles macro-typo 43 /184
Le métier de web designer est un
métier de conception.
Le rôle du design est de répondre
à des besoins et de résoudre des
problèmes avec des solutions
innovantes.
44. Grilles macro-typo 44 /184
Appuyons-nous sur ces principes
plastiques fiables.
Affinons notre regard à la lumière
de cet héritage pluridisciplinaire.
45. Grilles macro-typo 45 /184
Forte densité de contenus
+ Minification des périphériques
+ Interfaces tactiles
= Intimité accrue de notre rapport
au média web.
46. Grilles macro-typo 46 /184
Les web designers et la grille :
une histoire passionnelle !
50. Grilles macro-typo 50 /184
La grille est un squelette
une charpente
un guide
51. Grilles macro-typo 51 /184
Les avantages de la grille :
1. Combattre l’angoisse de la page blanche
2. Assurer harmonie, unité et cohérence
3. Gagner du temps
4. Casser le rythme
5. Faciliter le travail en équipe
58. Grilles macro-typo 58 /184
Définir sa grille
Grille verticale
•largeur de page
•largeur de gouttière
•largeur de colonne
•nombre de colonnes
59. Grilles macro-typo 59 /184
Définir sa grille
Grille verticale
•largeur de page
•largeur de gouttière
•largeur de colonne
•nombre de colonnes
60. Grilles macro-typo 60 /184
Définir sa grille
Grille verticale Grille horizontale
•largeur de page •corps de texte
•largeur de gouttière •hauteur de ligne
•largeur de colonne
•nombre de colonnes
61. Grilles macro-typo 61 /184
Définir sa grille
Grille verticale Grille horizontale
•largeur de page •corps de texte
•largeur de gouttière •hauteur de ligne
•largeur de colonne
•nombre de colonnes
62. Grilles macro-typo 62 /184
Définir sa grille
Grille verticale Grille horizontale
•largeur de page •corps de texte
•largeur de gouttière •hauteur de ligne
•largeur de colonne
•nombre de colonnes
63. Grilles macro-typo 63 /184
Définir sa grille
•S’aider de formules
•S’aider d’outils visuels
100. Grilles macro-typo 100 /184
D’autres expérimentations sont
possibles :
• Grilles basées sur le nombre d’or
• Doubles grilles
• Grilles à colonnes inégales
• Etc.
109. Grilles macro-typo 109 /184
Grille horizontale – Rythme initial
html{font-size: 100,01%;}
body
{
font-size: 0.875em; /* soit 14 pixels */
line-height: 1.42867em; /* soit 20 pixels */
}
110. Grilles macro-typo 110 /184
Grille horizontale
p /* le body est fixé à 14 pixels */
{
font-size: 1em; /* soit 14 pixels */
line-height: 1.42867em; /* soit 20 pixels */
margin-bottom: 1.42867em;
}
161. Corps de texte
14 pixels
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
169. Grilles macro-typo 169 /184
Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim
veniam, quis nostrud
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor exercitation ullamco
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis laboris nisi ut aliquip ex ea
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. commodo consequat. Duis
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu aute irure dolor in
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in reprehenderit in voluptate
culpa qui officia deserunt mollit anim id est laborum. velit esse cillum dolore eu
fugiat nulla pariatur.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Excepteur sint occaecat
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis cupidatat non proident,
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. sunt in culpa qui officia
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu deserunt mollit anim id est
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in laborum.
culpa qui officia deserunt mollit anim id est laborum.
170. Grilles macro-typo 170 /184
Mon rythme vertical est cassé
Lorem ipsum dolor sit
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do
eiusmod tempor incididunt
amet, consectetur ut labore et dolore magna
aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
laboris nisi ut aliquip ex ea
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
commodo consequat. Duis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
aute irure dolor in
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
reprehenderit in voluptate
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
velit esse cillum dolore eu
culpa qui officia deserunt mollit anim id est laborum.
fugiat nulla pariatur.
Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
cupidatat non proident,
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
sunt in culpa qui officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
171. Grilles macro-typo 171 /184
Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
laboris nisi ut aliquip ex ea
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
commodo consequat. Duis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
aute irure dolor in
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
reprehenderit in voluptate
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
velit esse cillum dolore eu
culpa qui officia deserunt mollit anim id est laborum.
fugiat nulla pariatur.
Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
cupidatat non proident,
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
sunt in culpa qui officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
172. Grilles macro-typo 172 /184
Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis
aute irure dolor in
reprehenderit in voluptate
velit esse cillum dolore eu
fugiat nulla pariatur.
Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
cupidatat non proident,
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
sunt in culpa qui officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
173. Grilles macro-typo 173 /184
Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco
Lorem ipsum laboris nisi ut aliquip ex ea
commodo consequat. Duis
aute irure dolor in
Dolor sit amet reprehenderit in voluptate
velit esse cillum dolore eu
fugiat nulla pariatur.
Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
cupidatat non proident,
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
sunt in culpa qui officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
174. Grilles macro-typo 174 /184
Mon rythme vertical est cassé
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor Lorem ipsum dolor sit
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis amet, consectetur
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. adipisicing elit, sed do
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu eiusmod tempor incididunt
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in ut labore et dolore magna
culpa qui officia deserunt mollit anim id est laborum. aliqua. Ut enim ad minim
veniam, quis nostrud
exercitation ullamco
laboris nisi ut aliquip ex ea
commodo consequat. Duis
aute irure dolor in
reprehenderit in voluptate
velit esse cillum dolore eu
fugiat nulla pariatur.
Excepteur sint occaecat
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
cupidatat non proident,
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
sunt in culpa qui officia
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
deserunt mollit anim id est
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
laborum.
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
175. Grilles macro-typo 175 /184
Réparer le rythme vertical
•Compenser les pixels ajoutés
•Fixer des hauteurs
•Faire les calculs automatiquement
181. Grilles macro-typo 181 /184
Fixer des hauteurs
•Toujours travailler avec des unités
relatives
•Préférer les hauteurs minimales aux
hauteurs fixes
182. Grilles macro-typo 182 /184
Faire les calculs automatiquement
jquery.baseline.js
• Aucune configuration nécessaire
• Des conteneurs parents pour rétablir le
rythme
• Résultats avec des unités relatives
• Exemple : $('img, table').baseline();
bit.ly/jquery-baseline