la macrotypographie de la page web
DESCRIPTION
TRANSCRIPT
![Page 1: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/1.jpg)
![Page 2: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/2.jpg)
La typographie a pour buts l’intelligibilité du document, la lisibilité du texte et l’esthétique de l’ensemble.
![Page 3: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/3.jpg)
![Page 4: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/4.jpg)
Un (tout petit) peu d’histoire
![Page 5: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/5.jpg)
![Page 6: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/6.jpg)
![Page 7: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/7.jpg)
Le codex morcelle le texte en pages, suscite une nouvelle ergonomie de l’objet et fait naître la mise en page.
(Et les ouvrages se conservent beaucoup mieux.)
![Page 8: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/8.jpg)
(Je vous promets qu’on parle de Web bientôt)
![Page 9: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/9.jpg)
![Page 10: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/10.jpg)
![Page 11: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/11.jpg)
Tout ce qui fait la macrotypographie telle que nous la connaissons actuellement se trouve dans le codex.
![Page 12: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/12.jpg)
![Page 13: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/13.jpg)
(Chose promise, chose due)
![Page 14: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/14.jpg)
La page Web est donc bien plus proche du volumen que de la page.
![Page 15: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/15.jpg)
Le papier a des dimensions fixes et un contenu immuable.
![Page 16: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/16.jpg)
La page Web a des dimensions et un format imprévisibles, une longueur illimitée.
Elle est interprétée par le navigateur et soumise au contrôle de l’utilisateur.
![Page 17: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/17.jpg)
Faire en sorte que la carpe et le lapin vivent une très belle histoire d’amour
![Page 18: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/18.jpg)
La page sur l’écran
![Page 19: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/19.jpg)
Les marges latérales évitent que l’oeil ne « heurte » le bord de la fenêtre et définissent le bloc de lecture.
![Page 20: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/20.jpg)
Les marges supérieure et inférieure sont essentielles pour ouvrir et clore la page et s’harmonisent avec les autres espaces blancs du document.
![Page 21: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/21.jpg)
La page sur l’écran
![Page 22: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/22.jpg)
La page sur l’écran
![Page 23: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/23.jpg)
Organiser la page : la grille
![Page 24: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/24.jpg)
La grille est un ensemble de guides qui délimitent, sur le document, les espaces où vont se placer les éléments.
![Page 25: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/25.jpg)
![Page 26: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/26.jpg)
![Page 27: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/27.jpg)
![Page 28: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/28.jpg)
La grille rationnalise l’organisation du contenu et facilite l’existence du designer.
![Page 29: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/29.jpg)
![Page 30: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/30.jpg)
Le choix de la grille dépend du contenu que l’on doit organiser : textes longs, page d’accueil de magazine, catalogue…
![Page 31: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/31.jpg)
![Page 32: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/32.jpg)
![Page 33: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/33.jpg)
![Page 34: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/34.jpg)
Les colonnes divisent la page dans le sens horizontal.Il faut compléter la grille par des divisions verticales, en s’appuyant sur la ligne de base.
![Page 35: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/35.jpg)
![Page 36: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/36.jpg)
Alignement des lignes de base
![Page 37: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/37.jpg)
Le rythme vertical donne une habitude, et donc un confort, à l’oeil. Il donne des repères dans une page qu’on ne voit jamais en entier.
![Page 38: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/38.jpg)
![Page 39: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/39.jpg)
Agencer les blocs dans la grille
![Page 40: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/40.jpg)
Typographie traditionnelleHARMONIE & SYMÉTRIE
![Page 41: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/41.jpg)
![Page 42: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/42.jpg)
Nouvelle typographieFONCTIONNALITÉ & DYNAMISME
![Page 43: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/43.jpg)
![Page 44: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/44.jpg)
Deux approches riches et pertinentes : dépasser l’opposition pour profiter de leurs enseignements complémentaires.
![Page 45: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/45.jpg)
Voir les différents éléments comme des masses et les agencer de façon à créer des contrastes, un équilibre ou un déséquilibre selon l’effet souhaité.
![Page 46: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/46.jpg)
![Page 47: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/47.jpg)
![Page 48: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/48.jpg)
Mettre à profit les paramètres typographiques pour faire varier la masse visuelle des éléments textuels.
![Page 49: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/49.jpg)
![Page 50: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/50.jpg)
![Page 51: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/51.jpg)
Par le positionnement, le blanc et divers outils graphiques (couleur, filets, etc.), les blocs et les éléments sont mis en relation et hiérarchisés de façon à ce que la structure se dégage.
![Page 52: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/52.jpg)
![Page 53: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/53.jpg)
Composer du texte courant qui donne envie de scroller, scroller, scroller…
![Page 54: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/54.jpg)
« Il est une juste quantité de texte qui, réparti sur une page, est agréable à la lecture. »— E. Ruder, Typographie
![Page 55: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/55.jpg)
Le principe de division d’un seul et même texte en pages ou en colonnes ne peut pas – et ne doit pas – être appliqué au Web.
![Page 56: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/56.jpg)
Il faut donc trouver d’autres moyens typographiques de reproduire le confort et les pauses propres à la page et à la colonne.
![Page 57: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/57.jpg)
Largeur de justification : 55 à 65 car. par ligne (Corps x 30)Fer à gauche, drapeau à droite (plus rarement justifié)Interlignage = 140–150% du corps
![Page 58: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/58.jpg)
Le paragraphe selon Tschichold : de bonnes idées… à trier ;-)
![Page 59: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/59.jpg)
Sur le Web :On sépare les paragraphes par un interligne blanc (pour préserver le rythme vertical).[padding-bottom = line-height]
![Page 60: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/60.jpg)
Une idée à garder : la lettrine en début de section.p.sectionstart:first-letter { plein de propriétés pour faire une belle lettrine }
![Page 61: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/61.jpg)
![Page 62: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/62.jpg)
Titres, sous-titres et phrases en exergue facilitent la compréhension du texte et incitent le lecteur à poursuivre.
![Page 63: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/63.jpg)
![Page 64: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/64.jpg)
Maintenir la continuité pour que la pause ne devienne pas une rupture.
![Page 65: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/65.jpg)
![Page 66: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/66.jpg)
Corps, variante, couleur, filet, ornement… les outils typographiques sont multiples pour le traitement des titres.
![Page 67: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/67.jpg)
![Page 68: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/68.jpg)
Les notes et les légendes doivent rester subordonnées au texte et/ou à l’image.
![Page 69: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/69.jpg)
![Page 70: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/70.jpg)
![Page 71: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/71.jpg)
Un exemple de traitement original : les articles « Features » de Boing Boing
![Page 72: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/72.jpg)
![Page 73: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/73.jpg)
![Page 74: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/74.jpg)
![Page 75: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/75.jpg)
![Page 76: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/76.jpg)
Merci !Et n’oubliez pas : comprendre les règles, c’est bien ; les enfreindre, c’est mieux.
Bientôt en ligne : typographisme.net(news sur @typographisme)
Mail [email protected] • Twitter @mitternacht
![Page 77: La Macrotypographie de la page Web](https://reader038.vdocuments.pub/reader038/viewer/2022103014/54901f14b47959f1728b461e/html5/thumbnails/77.jpg)
RESSOURCES
960 Grid Systemhttp://960.gs
Variable grid systemhttp://www.spry-soft.com/grids/
gridr buildrrrhttp://gridr.atomeye.com/
Baseline rythm calculatorhttp://topfunky.com/baseline-rhythm-calculator/
Mark Boulton – Design basé sur le nombre d’or [en]http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-designing-grid-systems-part-5 (mais vous pouvez tout lire hein)