77

La Macrotypographie de la page Web

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: La Macrotypographie de la page Web
Page 2: La Macrotypographie de la page Web

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
Page 4: La Macrotypographie de la page Web

Un (tout petit) peu d’histoire

Page 5: La Macrotypographie de la page Web
Page 6: La Macrotypographie de la page Web
Page 7: La Macrotypographie de la page Web

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

(Je vous promets qu’on parle de Web bientôt)

Page 9: La Macrotypographie de la page Web
Page 10: La Macrotypographie de la page Web
Page 11: La Macrotypographie de la page Web

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
Page 13: La Macrotypographie de la page Web

(Chose promise, chose due)

Page 14: La Macrotypographie de la page Web

La page Web est donc bien plus proche du volumen que de la page.

Page 15: La Macrotypographie de la page Web

Le papier a des dimensions fixes et un contenu immuable.

Page 16: La Macrotypographie de la page Web

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

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

La page sur l’écran

Page 19: La Macrotypographie de la page Web

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

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

La page sur l’écran

Page 22: La Macrotypographie de la page Web

La page sur l’écran

Page 23: La Macrotypographie de la page Web

Organiser la page : la grille

Page 24: La Macrotypographie de la page Web

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
Page 26: La Macrotypographie de la page Web
Page 27: La Macrotypographie de la page Web
Page 28: La Macrotypographie de la page Web

La grille rationnalise l’organisation du contenu et facilite l’existence du designer.

Page 29: La Macrotypographie de la page Web
Page 30: La Macrotypographie de la page Web

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
Page 32: La Macrotypographie de la page Web
Page 33: La Macrotypographie de la page Web
Page 34: La Macrotypographie de la page Web

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
Page 36: La Macrotypographie de la page Web

Alignement des lignes de base

Page 37: La Macrotypographie de la page Web

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
Page 39: La Macrotypographie de la page Web

Agencer les blocs dans la grille

Page 40: La Macrotypographie de la page Web

Typographie traditionnelleHARMONIE & SYMÉTRIE

Page 41: La Macrotypographie de la page Web
Page 42: La Macrotypographie de la page Web

Nouvelle typographieFONCTIONNALITÉ & DYNAMISME

Page 43: La Macrotypographie de la page Web
Page 44: La Macrotypographie de la page Web

Deux approches riches et pertinentes : dépasser l’opposition pour profiter de leurs enseignements complémentaires.

Page 45: La Macrotypographie de la page Web

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
Page 47: La Macrotypographie de la page Web
Page 48: La Macrotypographie de la page Web

Mettre à profit les paramètres typographiques pour faire varier la masse visuelle des éléments textuels.

Page 49: La Macrotypographie de la page Web
Page 50: La Macrotypographie de la page Web
Page 51: La Macrotypographie de la page Web

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
Page 53: La Macrotypographie de la page Web

Composer du texte courant qui donne envie de scroller, scroller, scroller…

Page 54: La Macrotypographie de la page Web

« 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

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

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

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

Le paragraphe selon Tschichold : de bonnes idées… à trier ;-)

Page 59: La Macrotypographie de la page Web

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

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
Page 62: La Macrotypographie de la page Web

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
Page 64: La Macrotypographie de la page Web

Maintenir la continuité pour que la pause ne devienne pas une rupture.

Page 65: La Macrotypographie de la page Web
Page 66: La Macrotypographie de la page Web

Corps, variante, couleur, filet, ornement… les outils typographiques sont multiples pour le traitement des titres.

Page 67: La Macrotypographie de la page Web
Page 68: La Macrotypographie de la page Web

Les notes et les légendes doivent rester subordonnées au texte et/ou à l’image.

Page 69: La Macrotypographie de la page Web
Page 70: La Macrotypographie de la page Web
Page 71: La Macrotypographie de la page Web

Un exemple de traitement original : les articles « Features » de Boing Boing

Page 72: La Macrotypographie de la page Web
Page 73: La Macrotypographie de la page Web
Page 74: La Macrotypographie de la page Web
Page 75: La Macrotypographie de la page Web
Page 76: La Macrotypographie de la page Web

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

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)