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.

Un (tout petit) peu d’histoire

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.)

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

Tout ce qui fait la macrotypographie telle que nous la connaissons actuellement se trouve dans le codex.

(Chose promise, chose due)

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

Le papier a des dimensions ﬁxes et un contenu immuable.

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.

Faire en sorte que la carpe et le lapin vivent une très belle histoire d’amour

La page sur l’écran

Les marges latérales évitent que l’oeil ne « heurte » le bord de la fenêtre et déﬁnissent le bloc de lecture.

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.

La page sur l’écran

Organiser la page : la grille

La grille est un ensemble de guides qui délimitent, sur le document, les espaces où vont se placer les éléments.

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

Le choix de la grille dépend du contenu que l’on doit organiser : textes longs, page d’accueil de magazine, catalogue…

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.

Alignement des lignes de base

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.

Agencer les blocs dans la grille

Typographie traditionnelle HARMONIE & SYMÉTRIE

Nouvelle typographie FONCTIONNALITÉ & DYNAMISME

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

Voir les diﬀé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’eﬀet souhaité.

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

Par le positionnement, le blanc et divers outils graphiques (couleur, ﬁlets, 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.

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

« Il est une juste quantité de texte qui, réparti sur une page, est agréable à la lecture. » — E. Ruder, Typographie

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.

Il faut donc trouver d’autres moyens typographiques de reproduire le confort et les pauses propres à la page et à la colonne.

Largeur de justiﬁcation : 55 à 65 car. par ligne (Corps x 30) Fer à gauche, drapeau à droite (plus rarement justiﬁé) Interlignage = 140–150% du corps

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

Sur le Web : On sépare les paragraphes par un interligne blanc (pour préserver le rythme vertical). [padding-bottom = line-height]

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 }

Titres, sous-titres et phrases en exergue facilitent la compréhension du texte et incitent le lecteur à poursuivre.

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

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

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

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

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 asfradier@gmail.com • Twitter @mitternacht

RESSOURCES 960 Grid System http://960.gs Variable grid system http://www.spry-soft.com/grids/ gridr buildrrr http://gridr.atomeye.com/ Baseline rythm calculator http://topfunky.com/baseline-rhythm-calculator/ Mark Boulton – Design basé sur le nombre d’or [en] http://www.markboulton.co.uk/journal/comments/ﬁve-simple-steps-to- designing-grid-systems-part-5 (mais vous pouvez tout lire hein)

http://www.paris-web.fr	3566
http://www.fredreillier.com	1863
http://www.sqliagency.com	1406
http://graphism.fr	1388
http://www.scoop.it	862
http://www.conseilsmarketing.fr	158
http://technomultimedia.fr	119
http://culturecommunication-nantes.blogspot.com	112
http://culturecommunication-nantes.blogspot.fr	102
http://www.conseilsmarketing.com	92
http://ressources-numeriques-ldv.blogspot.fr	53
http://ressources-numeriques-ldv.blogspot.com	50
http://a0.twimg.com	48
http://interne.telmedia.fr	47
http://aurelientabard.tumblr.com	19
https://twimg0-a.akamaihd.net	14
http://91.209.174.206	14
http://feedthefox.net	14
http://pygiraud.host56.com	13
http://feeds.feedburner.com	12
http://voyelle.tumblr.com	12
http://www.mixterdesign.net	11
http://futurtexte.blogspot.com	10
http://futurtexte.blogspot.fr	10
http://www.netvibes.com	9
http://02.id-alizes.net	8
https://si0.twimg.com	6
http://localhost	6
http://altertoys.virtuaboard.com	5
http://lanyrd.com	4
http://static.slidesharecdn.com	4
http://webcache.googleusercontent.com	3
http://www.iweb34.com	3
http://paper.li	2
http://www.sqli-agency.com	2
https://twitter.com	2
http://tyseo.blogspot.com	2
http://www.onlydoo.com	2
http://tyseo.blogspot.fr	1
http://www.bonweb.fr	1
http://tumblr.hootsuite.com	1
http://www.twylah.com	1
http://translate.googleusercontent.com	1
http://rss.lepirlouit.com	1
http://carmie.zoy.org	1
http://edicolaeuropea.blogspot.com	1
http://culturecommunication-nantes.blogspot.ca	1
http://www.soochee.net	1

La Macrotypographie de la page Web

by Fradier Anne-Sophie on Oct 20, 2010

Accessibility

Categories

Upload Details

Usage Rights

48 Embeds 10,063

Statistics

La Macrotypographie de la page Web Presentation Transcript