Typographie et mise en page. Virginie Ahrens - Master 1 ILTS-CDMM



Documents pareils
Le Portfolio d une... Marion Bossaton. #Curieuse #Créative #Connectée

Avantages et méthode de la bonne gouvernance d'entreprise - le cas pratique des PSF

Plateforme publicitaire Entreprendre. Guide de normes

STUDIO INDEPENDANT DE CREATION GRAPHIQUE BOOK

Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS

PLATEFORME GRAPHIQUE INSTITUT DU NOUVEAU MONDE

LA VISION DU BARILLA CENTER FOR FOOD & NUTRITION

ATHOMEMAGAZINE. Les prix de l immobilier au Luxembourg!

ECRIRE. Linguistyle. typographie 2 Lisibilité 3 Ecrire 4 Exercices. typographie. R e a l v i r t u e. 1 Anatomie du mot. Comprendre Comprendre

Élaborer une charte graphique. Comment élaborer une charte graphique?

- Génération de trafic - Analyse du comportement des visiteurs

GESTION DES CONNAISSANCES AU GEIPAN

Qui sommes-nous? Buddyweb est une agence digitale spécialisée dans les projets web et mobiles.

02/2011. charte graphique d arte pour le print

Web Agency. Kevin Papot Christophe De Almeida. Anthony Moysan. Faye Hughes. Thomas Faganello

PREMIERS PAS AVEC LA

State of the Media Democracy Observatoire des usages et interactions télécom & média

Conduite et présentation des activités professionnelles. Prénom NOM BTS Assurance. Session 20XX

«Cachez-moi cette page!»

GE Measurement & Control. Intecal v10. Logiciel de gestion d'étalonnage

Tour d horizon des CMS. Content Management System

PARLONS ROTARY. Charte graphique à l usage des Rotariens

Comment les moteurs de recherche voient votre site?

Parler. DU Rotary. Charte graphique à l usage des Rotariens

Serge CORMIER. L'écrit. et les normes typographiques. UNIVERSITÉ DE NANTES. Faculté des Sciences et des Techniques.

Manuel de mise en page de l intérieur de votre ouvrage

portfolio CAMILLE MORIZOT

Traitement de texte. et PAO 3/10/06. Initiation au traitement de texte 1. C est quoi le traitement de texte? C est quoi la PAO?

Bien encaisser en ligne 1. Panorama des moyens de paiement 2. Le point sur la fraude. Club PME 2.0 Damien Jacob

AGENCE CONSEIL STRATÉGIE VISUELLE DESIGN GRAPHIQUE

L'API DOM : Document Object Model

E-COMMERCE TRANSFORMEZ LES CLICS EN CLIENTS

5big Storage Server DESIGN BY NEIL POULTON. Guide de démarrage rapide

Le point sur les services en ligne employeurs

La mission de soutien judiciaire : la préparation du rapport (Troisième partie)

Les aides de TheBookEdition.com. La mise en page. (Temps de réalisation : 10 à 15 minutes)

Pour votre succès : acier et solutions intelligentes

Comprendre l ictère du nouveau-né

Énergie Texte : Gwenola Doaré Photos : Refuge de Sarenne/Espace Visuel Digital

< _17_0>

e-commerce+ Solution globale e-commerce Trafic web E-commerce BtoB Travailler les contenus d'un site e-commerce : un critère de qualité

Bombardier Guide des NORMES. L évolution de la mobilité

Comment mettre en page votre livre

Troisième projet Scribus

Elevators & Escalators

AFRIQUE DU NORD / INDEX PAR PAYS

Ce guide, offert par Atramenta. net est proposé sous licence Creative Commons BY-SA http ://creativecommons. org/licenses/by-sa/3.0/deed.

Pourquoi utiliser des visuels et des logiciels de présentation?

Cyril Codogno Concepteur centré utilisateur / Architecte d'information. Book.08

TRAVELEASY GILLIAN SOKOLOFF ET MARCELLO CARLINO 1BGDB

Logiciels ou outils pouvant aider des élèves atteints de dyslexie, dysorthographie,

Charte graphique 2011

La réglementation et les obligations qui en découlent

Créer un site Internet dynamique

Logiciel libre. Arduino, EPFL - Domaine IT, responsable des services réseau

La Joconde. ( , 0,77x 0,53 m) de Léonard de Vinci TEMPS MODERNES

L ACCESSIBILITÉ DES ERP DE 5ÈME CATÉGORIE

Premiers pas avec Scribus

Pollution, stress, fatigue, déplacement : Où en êtes-vous avec la mobilité?

CORRIGE LES NOMBRES DECIMAUX RELATIFS. «Réfléchir avant d agir!»

3 ème Acte , rue Édouard Vaillant MONTREUIL - tel :

Développement Joomla! Le Guide Pour Débutant

Notice d'utilisation Site Internet administrable à distance

1. Informations préliminaires

sommaire Charte graphique - identité visuelle éléments constitutifs de la charte papeterie contenu du CD-ROM

Plan. Traitement de texte et PAO 4/10/06. Initiation à Word

Charte Graphique Caisse d Epargne Rhône Alpes

Encore plus de widgets et de conteneurs

LE DÉCLIC DU COUPE-FEU.

charte graphique 1 - logotype de la FMSH 2 - logotype / couleurs 3 - logotype / variantes 5 - logotype / zone d exclusion 6 - logotype / utilisation

Changer la taille des caractères en L A TEX

Interface PC Vivago Ultra. Pro. Guide d'utilisation

... identité visuelle logotype. CONCEPTION GRAPHIQUE [ print / web ]

Conseils pour rédiger vos posters scientifiques

Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog :

Utilisation de l éditeur.

IUP APTER - L3 UE 19B

eduscol Ressources pour la voie professionnelle Français Ressources pour les classes préparatoires au baccalauréat professionnel

Nom : Groupe : Date : 1. Quels sont les deux types de dessins les plus utilisés en technologie?

TUTORIEL CartoDB 11/03/15

L'ENTREPRISE À L'ŒUVRE

DÉFINITION DE LA NEWSLETTER : OUVERTURE DU LOGITIEL ETARGET

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. HSBC Garantie Habitation Guide de l Assuré

NOM équipement. Notice accessibilité pour les établissements recevant du public

VIVRE LA COULEUR DOSSIER PÉDAGOGIQUE. Musée des beaux-arts de Brest

Rédiger pour le web. Objet : Quelques conseils pour faciliter la rédaction de contenu à diffusion web

Inspiration 7.5. Brève description d Inspiration. Avantages d Inspiration. Inconvénients d Inspiration

Introduction à Adobe Illustrator pour la cartographie et la mise en page

Découvrir OpenOffice Comment optimiser et formater votre ebook avec OpenOffice

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

SOMMAIRE AIDE À LA CRÉATION D UN INDEX SOUS WORD. Service général des publications Université Lumière Lyon 2 Janvier 2007

expo communication visuelle expographie expographie communication visuelle impression numérique création graphique matériel

Le livre numérique désigne le contenu de lecture que l on intègre dans ces liseuses. Ses synonymes sont : le livre électronique, l ebook et le livrel.

Calcul du niveau de transition

SOMMAIRE. Des dallages de caractère pour des piscines très exclusives RUSTIQUE BULLÉE 04 ABBAYE 12 PIERRE DU LOT 10 COLLÉGIALE 16

G U I D E D U T I L I S A T I O N LIFTING IDENTITÉ VISUELLE

PEUT- ON SE PASSER DE LA NOTION DE FINALITÉ?

Musée temporaire. Le jeu

Transcription:

Typographie et mise en page

Typographie : notions élémentaires Caractères Familles de caractères Polices de caractères Unités de mesure typographiques : point didot, point pica, pica, pouce.

Détail d une typo 1/2

Détail d une typo 2/2

Les classifications de caractères 1921 Thibaudeau 1952 Vox 1962 Atipy 1964 Din 1964 Novarese 1978 Jacno 1980 Alessandrini

Exemple : classification Vox (la plus connue)

Classification Vox 1/6 Classification Époques Valeurs Manuaires Humanes Moyen-âge La famille Manuaires comprend les caractères dont la forme s inspire des lettres dessinées au moyen âge. Renaissance Humanisme XVIe siècle La famille Humanes s inspire des formes de lettre romaines rénovées à la Renaissance. Fantastique Biblique Imaginaire Ténébreux Mythique Mystérieux Tradition Sciences humaines Savoir Culture (au sens large) Texte à lire sur papier

Classification Vox 2/6 Classification Époques Valeurs Garaldes XVIIe siècle La famille des Garaldes sont les caractères dont la forme rappelle celle des créations classiques françaises et italiennes. Féminin Léger Douceur Sensible Souplesse Réales XVIIIe siècle La famille de Réales comprend les caractères de labeur dont le dessin rappelle les types les plus utilisés au 18e siècle. Masculin Riche Prestigieux Luxe

Classification Vox 3/6 Classification Époques Valeurs Didones Mécanes XIXe siècle (exemples au musée d Orsay) La famille des Didones comprend les caractères qui évoquent la typographie pure du 19e siècle. XXe siècle (Renault, Marlboro) La famille des Mécanes comprend les caractères qui, par leurs formes géométriques, évoquent l ère de la mécanique. Droit Précis Exigent Rigueur Impeccable Presque sévère Début de la pub Mécanique Solide Stable Construit Puissant Fort

Classification Vox 4/6 Classification Époques Valeurs Linéales Contemporaine (Pas d empattement) La famille des Linéales comprend les types de caractères bâton (sans empattement) de la typographie moderne. Valeurs de notre époque Information pure (et pas communication) Moderne Actuelle Design Claire Nette Basique Epurée

Classification Vox 5/6 Classification Époques Valeurs Incises Mairies, Imitations, écritures gravées (exemple : Bistrot Romain) Institutionnelle Administratif Loi Scriptes Les familles Incises comprend les caractères s inspirant des inscriptions de l antiquité (terminales élargies). Ecriture courante Les familles Scriptes comprennent les caractères qui imitent l écriture courante ou la calligraphie. Humaine Unique Singulière Personnelle Emotion Plaisir Affect

Classification Vox 6/6 Classification Époques Valeurs Excessives/ Expressives Electronique

Quelques polices de caractère dans la Classification Vox

La classification d Aldo Novarese 1/2 Aldo Novarese (1920 1995) propose une classification en 10 familles découlant directement de la classification Thibaudeau (fin des années 50) classée à partir des empattements.

La classification d Aldo Novarese 2/2 Lapidaires Ornées Médiévaux Egyptiennes Bodoniens Vénitiens Linéraires Transitionnels Fantaisies Ecritures

Police Serif et Sans-Serif Police sans serif (caractères baton) ici Helvetica Police serif (caractères avec empattement) ici Times Empattements en rouge

Exemples Arial 14 (sans serif) abcdefghijklmnopqrstuvwxyz1234567890 Comic 14 (sans serif) abcdefghijklmnopqrstuvwxyz1234567890 Franklin 14 (sans serif) abcdefghijklmnopqrstuvwxyz1234567890 Times 14 (serif) abcdefghijklmnopqrstuvwxyz1234567890 Garamond 14 (serif) abcdefghijklmnopqrstuvwxyz1234567890

Le choix des polices Chaque police a sa spécificité Attention aux polices capitalisées Arial Courier Garamond Copperplate Century

Exemple serif / sans-serif 1 Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie 2 éteinte, mes yeux se fermaient si vite que je n avais pas le temps de me dire : 3 «Je m endors.» Et, une demi-heure après, la pensée qu il était temps de 4 chercher le sommeil m éveillait ; je voulais poser le volume que je croyais avoir 5 dans les mains et souffler ma lumière ; je n avais pas cessé en dormant de faire 6 des réflexions sur ce que je venais de lire, mais ces réflexions avaient pris un 7 tour un peu particulier ; il me semblait que j étais moi-même ce dont parlait 8 l ouvrage : une église, un quatuor, la rivalité de François I er et de Charles-Quint. 1 Longtemps, je me suis couché de bonne heure. Parfois, à peine ma bougie éteinte, mes yeux 2 se fermaient si vite que je n avais pas le temps de me dire : «Je m endors.» Et, une demiheure après, la pensée qu il était temps de chercher le sommeil m éveillait ; je voulais poser le 3 4 volume que je croyais avoir dans les mains et souffler ma lumière ; je n avais pas cessé en 5 dormant de faire des réflexions sur ce que je venais de lire, mais ces réflexions avaient pris 6 un tour un peu particulier ; il me semblait que j étais moi-même ce dont parlait l ouvrage : 7 une église, un quatuor, la rivalité de François I er et de Charles-Quint.

Variantes typographiques Romain Italiques ou penchés Caractères gras Petites capitales

Simplification et lisibilité deux mille un, odyssée de l espace 2001, odyssée de l espace MDCCLXXXIX 10 signes 1789 4 signes mille sept cent quatre-vingt-neuf 28 signes

Niveaux de lecture Visualisation de la hiérarchie des informations sur la page Variation du corps, de la graisse des caractères, de l alignement permettent de différencier ou au contraire de regrouper visuellement les éléments de même nature

Analyse des caractères et lisibilité Critères impactant la lisibilité : La longueur des ascendantes et des descendantes L axe et l encombrement des caractères Le corps des caractères L interlignage

Analyse des caractères et lisibilité Corps (taille) des caractères : Au dessus de 24 pts : à voir Au dessous de 24 pts : à lire Interlignage Espacement vertical entre deux lignes de texte successives Exprimé à l aide de deux chiffres : 10/12 par exemple

Analyse des caractères et lisibilité Longueur des lignes Distance du texte entre la marge de gauche et la marge de droite Moyenne: entre 40 et 70 caractères de texte, soit 10 à 12 mots par ligne

L approche, la chasse, l encombrement 1/3 L approche est un blanc placé entre 2 lettres d un mot La chasse est la largeur visible de chaque caractère L encombrement est la largeur invisible de chaque caractère

L approche, la chasse, l encombrement 2/3 Encombrement Chasse Approche

L approche, la chasse, l encombrement 3/3 Approche standard Approche excessive Approche trop serrée

Mise en valeur des paragraphes Alinéas Renfoncement de certaines lignes de texte. Visuellement, l œil enregistre qu il s agit de débuts de paragraphes. Une rentrée d alinéas permet de distinguer 2 paragraphes sans ajouter d espace Permet d indiquer au lecteur un nouveau paragraphe en cas de ligne pleine

Composition de textes ou de mots 1/8 Justifié Fer à gauche Fer à droite Centré Vertical Détouré

Composition de textes ou de mots 2/8 Justifié Le texte occupe la largeur fondamentale du format donné Le format Justifié est utilisé dans un texte long 1500 signes minima

Composition de textes ou de mots 3/8 Fer à gauche Créer un effet d annonce Lecture transversale Brèves, textes courts

Composition de textes ou de mots 4/8 Fer à droite Dissonance Pas dans les habitudes de lectures occidentales, de gauche à droite Textes extrêmement courts (maxi 5 lignes) Textes d appoint

Composition de textes ou de mots 5/8 Centré Communication sans tension Cartons d invitation par exemple

Composition de textes ou de mots 7/8 Vertical Classer Répertorier A utiliser avec parcimonie

Composition de textes ou de mots 8/8 Détouré Par rapport à une forme ou une image

Lézarde, cheminée Blanc disgracieux devant être corrigé.

Veuves et orphelins Une ligne veuve est la dernière ligne d'un paragraphe apparaissant isolée en haut d'une page. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellensodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices sodales. Veuve Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet. Un orphelin est la première ligne d'un paragraphe apparaissant isolée en bas d'une page. Orphelin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellen massa suscipit pulvinar. Nulla sollicitudin. Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis. Curabitur aliquet pellentesque diam. Integer quis metus vitae elit lobortis egestas. Lorem ipsum dolor sit amet, lorem vel rhoncus faucibus, felis magna fermentum augue, et ultricies lacus lorem varius purus. Curabitur eu amet. Ec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Proin porttitor, orci nec nonummy molestie.

Autres termes typographiques Crénage Cadratin Esperluète Lettrine Texte en drapeau