Typographie Web

Jason Santa Maria

Description

La typographie est la « voix » du design et l’outil le plus puissant dont vous disposiez pour communiquer avec vos lecteurs. Apprenez à manier la lettre avec esprit et talent : jugez les polices, évaluez les contraintes techniques, créez des systèmes typographiques flexibles et constituez votre collection de caractères favoris.

Dans cet ouvrage, Jason Santa Maria, designer graphique de renom, veut vous amener à voir au-delà du code et des ornements pour vous faire découvrir comment

la typographie façonne notre façon de lire et comment adapter nos pratiques de la discipline à l’écran. Lancezvous : choisissez et mariez les caractères, composez et invitez votre public à la lecture !

chapitre 1 L’expérience de lecture

chapitre 2 Les rouages de la typographie

chapitre 3 Évaluer une police

chapitre 4 Choisir et associer des polices

chapitre 5 Systèmes typographiques

chapitre 6 Composition

Conclusion

Ressources

Références

Remerciements

Index

Sujets

• Sciences & Techniques
• Informatique
• police
• Web Design
• Computers
• Interfaz (desambiguación)
• Web
• Composition
• Fonte
• Interface
• World Wide Web

Informations

• Publié par: Editions Eyrolles
• Date de parution: 14 mars 2015
• Nombre de lectures: 12
• EAN13: 9782212290127
• Langue: Français
• Poids de l'ouvrage: 3 Mo

Extrait

R sum
La typographie est la « voix » du design et l’outil le plus puissant dont vous disposiez pour communiquer avec vos lecteurs. Apprenez à manier la lettre avec esprit et talent : jugez les polices, évaluez les contraintes techniques, créez des systèmes typographiques flexibles et constituez votre collection de caractères favoris.
Au sommaire
Lecture * Lisibilité * L’acte de lecture * Les rouages de la typographie * La typographie sur le Web * La langue de la typographie * Évaluer une police * Fonte et police * Caractéristiques physiques * L’espace du cadratin * Contraste typographique * Graisses et styles * Hauteur d’x * Chiffres, ponctuation et caractères spéciaux * Petites capitales et ligatures * Groupes linguistiques * Corps optiques * Contexte historique * Trouver des alternatives * Choisir et associer des polices * Connaissez votre contenu * Méthodes pour choisir des polices * Méthodes d’association * Trouvez vos classiques * Systèmes typographiques * Hiérarchie et contraste * Paragraphes * Interface * Assembler les morceaux * Composition * Inconnues connues * Typographie réactive * Composer la page * Alignement et césure * Gris typographique * Espace blanc * Échelles et rythmes typographiques *
Biographie auteur
Dans cet ouvrage, Jason Santa Maria, designer graphique de renom, veut vous amener à voir au-delà du code et des ornements pour vous faire découvrir comment la typographie façonne notre façon de lire et comment adapter nos pratiques de la discipline à l’écran. Lancezvous : choisissez et mariez les caractères, composez et invitez votre public à la lecture !
www.editions-eyrolles.com

A BOOK APART
Les livres de ceux qui font le web
Jason Santa Maria
TYPOGRAPHIE
WEB
ÉDITIONS EYROLLES
61, bld Saint-Germain
75240 Paris Cedex 05
www.editions-eyrolles.com
Traduction autorisée de l’ouvrage en langue anglaise intitulé ON WEB TYPOGRAPHY de Jason Santa Maria (ISBN : 978-1-9375570-7-2), publié par A Book Apart LLC
Adapté de l’anglais par Anne-Sophie Gagné Fradier
© 2014 Jason Santa Maria pour l’édition en langue anglaise
© Groupe Eyrolles, 2015, pour la présente édition, ISBN : 978-2-212-14148-1
Dans la même collection
HTML5 pour les web designers – n°1, Jeremy Keith, 2010, 96 pages.
CSS3 pour les web designers – n°2, Dan Cederholm, 2011, 128 pages.
Stratégie de contenu web – n°3, Erin Kissane, 2011, 96 pages.
Responsive web design – n°4, Ethan Marcotte, 2011, 160 pages.
Design émotionnel – n°5, Aarron Walter, 2012, 118 pages.
Mobile first – n°6, Luke Wroblewski, 2012, 144 pages.
Métier web designer – n°7, Mike Monteiro, 2012, 156 pages.
Stratégie de contenu mobile – n°8, Karen McGrane, 2013, 164 pages.
La phase de recherche en web design – n°9, Erika Hall, 2015, 176 pages.
Sass pour les web designers – n°10, Dan Cederholm, 2015, 96 pages.
Web designer cherche client idéal – n°12, Mike Monteiro, 2015, à paraître
Design web responsive et responsable – n°13, Scott Jehl, 2015, à paraître
Dépôt légal : mars 2015
N° d’éditeur : 9412
Imprimé en Italie par D’Auria printing
Le code de la propriété intellectuelle du 1 er juillet 1992 interdit en effet expressément la photocopie à usage collectif sans autorisation des ayants droit. Or, cette pratique s’est généralisée notamment dans les établissements d’enseignement, provoquant une baisse brutale des achats de livres, au point que la possibilité même pour les auteurs de créer des œuvres nouvelles et de les faire éditer correctement est aujourd’hui menacée. En application de la loi du 11 mars 1957, il est interdit de reproduire intégralement ou partiellement le présent ouvrage, sur quelque support que ce soit, sans autorisation de l’éditeur ou du Centre Français d’Exploitation du Droit de Copie, 20, rue des Grands Augustins, 75006 Paris.
TABLE DES MATIÈRES
CHAPITRE 1 L’expérience de lecture
CHAPITRE 2 Les rouages de la typographie
CHAPITRE 3 Évaluer une police
CHAPITRE 4 Choisir et associer des polices
CHAPITRE 5 Systèmes typographiques
CHAPITRE 6 Composition
Conclusion
Ressources
Références
Remerciements
Index
AVANT-PROPOS
A VANT MÊME DE COMMENCER à lire le moindre mot d’un site web, un utilisateur en juge déjà la typographie. Plus que tout autre élément du design, la typographie envoie un message instantané sur le contenu et l’objectif d’un site. Pour quoi cet environnement numérique est-il conçu ? La lecture, le commerce, le jeu ? Est-il destiné à une expérience prolongée ou à un parcours d’une minute ou deux ? Sa fonction principale est-elle de vous guider dans un processus (abonnement à un service, participation à une enquête) ou de vous immerger dans un contenu (lecture d’un article, visionnage d’une vidéo, choix d’une photo, etc.) ? La typographie – sa taille, son style, son système – aide le visiteur à comprendre la raison d’être du contenu à l’écran.
La qualité et le ton de la typographie d’un site web envoient également des messages immédiats au sujet des personnes qui l’ont réalisé. Une bonne typographie fait une bonne impression. Une mauvaise typographie nuit à votre image. Une bonne typographie inspire la confiance – une mauvaise typographie, le mépris. Il nous est tous arrivé de visiter un site et d’y reconnaître immédiatement un déversoir de contenu volé et de publicités douteuses. Sans même lire les accroches vantant une crème miracle ou un secret pour s’enrichir à domicile, nous avons tôt fait de cliquer sur le bouton de retour en quête d’un lieu plus accueillant.
Clair et compréhensible, le guide de typographie web de Jason Santa Maria décrit la réflexion qui alimente le travail typographique, du choix de la police à la construction de la grille, en passant par l’élaboration de la hiérarchie. Plutôt que de dresser une liste de prescriptions et d’interdits, Santa Maria accompagne ses lecteurs dans un parcours créatif. Il nous invite sans délai à réfléchir à notre propre expérience de lecture – celle de ce livre – et nous offre des exemples visuels clairs et convaincants. C’est à nous, lecteurs, de juger et d’évaluer la variété des styles, combinaisons et configurations typographiques appliqués à du texte réel que l’on peut imaginer dans le monde réel.
Le design pour le Web devrait toujours prendre en compte les besoins des utilisateurs. Ce livre tient compte de vos besoins à vous, le lecteur de ces pages. Que vous soyez développeur ou designer, étudiant ou professionnel, vous trouverez de l’inspiration et des conseils dans cet ouvrage intelligent et sympathique, écrit par l’un des penseurs typographiques les plus respectés du Web.
Ellen Lupton
INTRODUCTION
Dans leur documentaire de 1977 intitulé Powers of Ten (« Puissances de dix »), les designers Charles et Ray Eames enquêtent sur ce qui compose la structure de notre monde et de l’univers, des plus petites particules aux plus grands amas de matière ( http://bkaprt.com/owt/1/ ). Ce film s’ouvre sur un plan, en vue de dessus, d’un couple en train de pique-niquer sur une couverture d’un mètre carré ( FIG 1 ). De là, la caméra opère un zoom arrière équivalent à une puissance de dix (c’est astucieux) toutes les dix secondes, jusqu’à 10 24 , soit 100 millions d’années-lumière de la Terre. Nous revenons ensuite en arrière jusqu’au piquenique pour plonger dans les puissances de dix de l’échelle microscopique, jusqu’à 10 -16 , le niveau des quarks. Ce film montre que les grandes choses sont faites de plus petites et comment les relations qui existent entre les petites choses participent directement à la composition des plus grandes. Même lorsque nous ne pouvons pas toutes les percevoir simultanément.
La première fois que j’ai vu ce film, j’ai eu une révélation. Il mettait en mots et en images des idées que je n’avais jamais verbalisées. La façon dont tout est connecté, implicitement ou explicitement, est semblable à ma manière d’aborder le design typographique.
Je travaille souvent en zoomant entre le général et le particulier pour orchestrer le ton et le message d’un design. Le caractère est la plus petite unité atomique, le fondement de tout ce que nous essayons de communiquer avec nos cadres, nos grilles, nos propriétés CSS et tous les autres éléments qui composent un site web.
Que vous passiez du grand au petit ou l’inverse, ces éléments sont tous imbriqués. La largeur d’une colonne de grille influence la longueur de ligne d’un paragraphe. Le contraste d’une police détermine la taille minimale qu’elle peut avoir sans perdre de sa lisibilité sur votre téléphone. Les outils que nous utilisons et les choix que nous faisons affectent un design en amont et en aval de la chaîne logistique.
C’est cette relation à double sens qui assure la cohérence d’un design ; elle est l’équivalent, dans notre domaine, de la gravitation. D’accord, j’exagère peut-être, mais la typographie est l’art d’agencer le texte de façon à donner au langage une forme visuelle. La typographie est la voix du design.

FIG 1 : Le court-métrage documentaire Powers of Ten de Charles et Ray Eames, 1977
Cette idée alimente la manière dont j’aime travailler et m’aide à aborder la typographie de façon pratique et détendue. Je ne dis pas que je jette les caractères au hasard sur la page, mais je pense que développer une intuition typographique est plus utile que de posséder une connaissance encyclopédique de son histoire.
Vous me suivez ? Très bien !
CE QUE CE LIVRE VOUS APPRENDRA
Préparez-vous, car je veux vous apprendre à voir dans la typographie bien plus qu’un élégant agencement de texte et d’ornements, à regarder chaque police sous tous les angles, à comprendre son langage.
Je veux vous apprendre à faire connaissance avec les myriades de polices qui existent aujourd’hui, à évaluer leur adéquation à différents usages, à comprendre en quoi vos choix affectent la façon dont nous lisons un contenu et interprétons un design.
Je veux vous montrer comment améliorer votre design typographique dès maintenant. Si la typographie est un langage visuel vieux d