SlideShare ist ein Scribd-Unternehmen logo
1 von 20
Downloaden Sie, um offline zu lesen
La typographie dans vos créations          Théorie

            Chapitre 1 | Premier contact
Avant-propos

          Tout d’abord bonjour et merci de l’intérêt que vous portez à mes cours.

          Ce cours a été rédigé entièrement par moi, cependant je n’ai pas la science
          infuse, c’est pourquoi je me base sur divers sources collectées au fil de mes
          recherches.
          De ce fait je tiens à remercier les auteurs des ces sources dont vous pourrez
          trouver la liste à la fin du document (il est possible dans certains cas qu’il n’y
          en ai pas, auquel cas cela signifie qu’aucune source n’a été utilisée pour la
          rédaction de ce cours).




          Ce cours est livré tel quel, aussi si vous avez des question ou des remarques,
          veuillez les adresser directement sur le site ou par mail.

          Si vous souhaitez utiliser ce document dans n’importe quel cadre (formation,
          école, entreprise, loisirs, famille, ...), je vous y autorise à la seule condition de le
          diffuser gratuitement et de l’utiliser dans son intégralité (toute les pages, même
          la couverture s’il vous plaît) de sorte que chacun puisse avoir connaissance
          de la source d’où provient le document (j’en profite donc pour vous remercier
          pour la pub gratuite).

          Seule restriction, je vous demanderai de ne pas proposer ce document en
          téléchargement direct depuis votre propre site. Préférez un lien sur explainMe,
          ainsi si des mises à jour sont faites sur le fichier, il sera d’autant plus simple de
          les récupérer si la source de diffusion online reste unique.

          Enfin, si vous ré-utilisez ce cours dans le cadre d’une formation ou d’un cours,
          j’apprécierai beaucoup si vous pouviez me l’indiquer par mail. Histoire de savoir
          si mon travail a pu servir à quelqu’un tout simplement...




          Ce cours est la reprise d’un article publié sur le site www.explain-me.com

          Il a fait l’objet d’une remise en forme du fait du changement de support, mais
          reste identique dans son contenu.

          Malgré toute l’attention que je porte à la rédaction des articles il est possible
          que quelques fautes d’orthographes persistent. Aussi si vous en rencontrez,
          merci de bien vouloir m’en avertir par mail à l’adresse suivante :

          boris@explain-me.com

          De sorte que je puisse effectuer les corrections et remplacer le fichier sur le
          site.



                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Conventions typographiques

               Afin de simplifier et d’organiser mon propos, j’utilise les conventions typographiques
               suivantes :




  [Ctrl + ...] Les raccourcis claviers sont indiqués entre crochés ( les trois points étant
               remplacés par la lettre correspondant bien évidement).


        Ctrl Touche contrôle.
             Sous Mac bien que la touche existe, c’est la touche ‘Pomme’ qui est utilisée
             pour les raccourcis clavier, elle est symbolisée par une pomme.


           Alt Touche ‘Alt’ située à gauche de la barre espace.
               Sous Mac elle est remplacée par la touche ‘Option’.


     Alt Gr Touche ‘Alt’ située à droite de la barre espace.


      Shift La touche ‘Majuscule’ sera désigné par l’appellation anglaise Shift.



               Le code sera écrit sur fond gris et avec une autre police de caractère, pour
<?php ?>
               simplifier son identification.




               Conseil / Avertissement
               Cette icône introduit un conseil ou un avertissement susceptible de vous éviter
               des complications face à l’action traitée.

               Astuce
               Cette icône dispense une astuce susceptible de vous faire gagner du temps
               par rapport à la technique décrite. Ou encore quelque chose qu’il est bon de
               savoir.
               Variante
               Cette icône indique une autre manière d’obtenir le résultat escompté, ou apporte
               un complément d’information sur une méthode utilisée.




                                                explainMe | TUTORIEL
    boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Introduction

          Dans ce premier chapitre, je vous propose de faire connaissance avec la
          typographie. Avant de commencer à manipuler les caractères et les textes,
          voyons dans un premier lieu, ce qu’est la typographie.




                                        Définition




          Typographie : la typographie est l’art d’assembler des caractères mobiles afin
          de créer des mots et des phrases. Cette technique d’imprimerie a été mise au
          point vers 1440 par Gutenberg qui n’a pas inventé l’imprimerie à caractères
          mobiles mais les caractères en plomb.

          Plus généralement, et suite au développement des supports autres que le
          papier, tel qu’internet ou la vidéo par exemple, la typographie désigne tout ce
          qui touche à l’usage des caractères.

          Aussi il est fréquent de trouver, en débutant la lecture d’un livre que je qualifierais
          d’explicatif («… pour les nuls » par exemple), une page précisant les conventions
          typographiques utilisées dans l’ouvrage. On parle ici des règles utilisées (ex :
          les textes en gras et en rouge signifient un point important).

          Le mot typographie vient de typos (caractère gravé) et graphein (écrire).

          On parle aussi très souvent d’une « typographie » ou d’une « typo » pour
          désigner une police de caractère (Font in English).



                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Caractère (ou types) : en typographie, le caractère n’est ni plus ni moins que
          la représentation graphique d’une lettre, c’est un dessin.

          Bien que cette définition soit assez parlante, l’usage du mot lettre me chagrine
          un peu car il est réducteur je trouve. En effet, le caractère peut représenter une
          lettre, mais aussi un chiffre ou bien encore un symbole ( € / . ? @ …). D’autant
          plus aujourd’hui avec le média informatique grâce auquel nous pouvons utiliser
          des typographies uniquement composés de symboles.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Police de caractères : souvent lorsque l’on veut désigner une police de
          caractères, on emploi les termes typographie, typo ou fonte. Et bien que le
          dernier puisse sembler juste, cela n’est pas totalement vrai.

          En fait une police de caractère est l’ensemble des déclinaisons d’un même
          caractère. Alors qu’une fonte est la désignation correspondent à une police,
          dans un corps et pour un style donné (ex. : Garamond, Italic, 10 pt).

          Cette confusion vient du fait qu’en anglais, le mot FONT désigne aussi une
          police de caractères.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Capitales : le mot capitales désigne les « grandes lettres » d’une police, nommée
          de la sorte car elles occupent le haut du tiroir (ou meuble) où sont rangés les
          caractères en plomb (la casse).

          La confusion avec le mot majuscule vient du fait que les capitales sont souvent
          utilisées pour l’écriture des majuscules, mais le mot majuscule désigne en fait
          la lettre (le caractère) qui débute une phrase.




          Bas-de-casse : les bas-de-casse sont les lettres minuscules d’une fonte. Elles
          sont appelées ainsi car elles sont rangées dans le bas de la casse (le tiroir, ou
          meuble en bois où sont rangés les caractères en plomb utilisés en imprimerie).




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Anatomie du caractère

          Un caractère est donc la représentation graphique d’une lettre (principalement,
          n’oublions pas les chiffres et autres symboles), comme nous venons de le voir. Et
          à ce titre, il se compose de différentes parties qui portent des noms bien définis.

          Nous ne les verrons pas toutes ici, mais les principales, histoire de vous en
          donner un aperçu :


          La connaissance de ces termes n’est pas impérative pour pouvoir manier la
          typographie, mais cela nous servira à comprendre certaines notions abordées
          dans les prochains chapitres.




          Le corps : c’est la taille globale du caractère, il se mesure du bas du jambage
          inférieur jusqu’au sommet du jambage supérieur. Il comprend l’œil et la chasse
          du caractère, ainsi que les petit espaces vides au dessus et au dessous des
          caractères (les talus), permettant d’éviter un quelconque chevauchement avec
          ceux de la ligne en dessous.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
L’œil : c’est la partie du caractère qui sera imprimée sur le papier (faisant
          référence à la partie du caractère en plomb qui sera induite d’encre et donc
          imprimée). En informatique, l’œil se fond dans le corps du caractère et représente
          plutôt la hauteur du caractère, sans les jambages (voir illustration d’exemple).




          Hauteur de x : désigne la hauteur de référence des caractères bas-de-casse,
          il sert d’unité de mesure en typographie.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Plein : c’est la partie la plus épaisse d’un caractère.

          Délié : par opposition au plein, c’est la partie la plus fine d’un caractère.




          Ligne de pied : c’est une ligne imaginaire sur laquelle s’aligne les caractères.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Le jambage : c’est la partie d’un caractère bas-de-casse qui est au dessus
          ou au dessous de la hauteur d’x. Le jambage au dessus est appelé jambage
          supérieur (ou hampe supérieure ou ascendante). Le jambage au dessous est
          appelé jambage inférieur (ou hampe inférieure ou descendante).




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
L’empattement : aussi nommé serif en anglais, l’empattement désigne les
          petites sections qui terminent en haut ou en bas, les caractères (voir illustration).




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Ligature : terme désignant les caractères composés de plusieurs lettres tels
          œ, æ, fi, ff, …

          On distingue 2 types de ligatures : les ligatures esthétiques, qui n’ont d’autre but
          que d’enrichir le document et d’en rendre la lecture plus aisée, et les ligatures
          linguistiques qui elles sont obligatoires.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
La chasse : la chasse d’un caractère correspond à sa largeur, comprenant ses
          approches. Ainsi un « a » n’aura pas la même chasse qu’un « i » par exemple.

          En typographie, les principales chasses sont le très étroit (extra-condensed),
          l’étroit (condensed), le normal (medium), le demi-large (demi-bold), le large
          (expansed), et l’extra-large (extra-expansed).




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
L’approche : un caractère ne se compose pas seulement de son œil. Ainsi le
          corps d’un caractère se compose de son œil plus deux petits espaces vides à
          gauche et à droite de l’œil : l’approche du caractère. Bien évidement, l’approche
          d’un caractère lui est propre et donc ne sera pas la même suivant le caractère.
          C’est une étape très fastidieuse de la création d’une police de caractères, mais
          c’est aussi ce qui rend une police agréable à lire.




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Les classifications



                      « À quoi ça sert une classification ? »



          Avec la naissance de l’imprimerie et la prolifération des différentes polices de
          caractères , il devint essentiel d’organiser tout ça pour pouvoir s’y repérer. De là
          est née l’idée de classification, visant à classer les polices de caractères dans
          des familles. Permettant ainsi une meilleure gestion des polices.




        La classification Thibaudeau


          Elle doit son nom à son créateur (Francis Thibaudeau) qui décide de classer
          les polices de caractères en fonction de leurs empattements.

          Dans sa forme de base, la classification Thibaudeau se compose de 4 grandes
          familles :




                                                         ELZEVIR, à l’empattement triangulaire.




                                                         DIDOT, à l’empattement filiforme.




                                                         EGYPTIENNE, à l’empattement quadrangulaire.




                                                         ANTIQUE, sans empattement.



                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
La classification Vox

          C’est la classification la plus utilisée aujourd’hui. Mise au point par un français
          Maximilien Vox, en 1954, elle est devenue la référence, de part le faite qu’elle
          prenne en compte les classifications historiques, mais aussi car elle a été traduite
          en anglais et en allemand, ce qui lui confère une dimension internationale.

          Elle se compose de 9 familles qui plus tard ont été complétées par l’ATypI
          (l’Association Typographique internationale), qui lui a ajouté 2 familles
          supplémentaires (Fractures et Non-latines) :



                                                        Les HUMANES, qui représente les plus anciens
                                                        caractères, caractérisés par peu de différences
                                                        entre les pleins et les déliés, et un axe incliné vers
                                                        l’arrière et des ‘e’ à la traverse oblique (pour les
                                                        bas-de-casse).



                                                        Les GARALDES, dérivées des Humanes, les
                                                        Garaldes ont des déliés de jonctions plus souples
                                                        et des traits plus fins. La traverse du ‘e’ devient
                                                        horizontale. C’est la famille des Garamond (d’où
                                                        elle tient la moitié de son nom, l’autre lui venant
                                                        d’un éditeur vénitien Alde Manuce).



                                                         Les RÉALES, famille de transition entre les
                                                         Humanes et les Didones, elle est empreinte
                                                         des deux, avec des empattements plus fins, un
                                                         contraste un peu plus fort entre les pleins et les
                                                         déliées, …




                                                         Les DIDONES, représentent l’aboutissement de
                                                         la rationalisation des caractères entreprise plus
                                                         tôt, avec des traits verticaux, un fort contraste
                                                         entre les pleins et les déliés, et des empattements
                                                         parfaitement horizontaux.




                                                        Les MÉCANES, aux empattements très forts et
                                                        aux faibles contrastes pleins/déliés, sont des
                                                        caractères très construits.



                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
La classification Vox - suite




                                                         Les LINÉALES, que l’on nomme par moment
                                                         ‘bâton’ sont les caractères sans empattements.




                                                         Les INCISES, nommées ainsi du fait de leur
                                                         ressemblance avec les caractères gravés, ils sont
                                                         proches des linéales, mais ont des empattements
                                                         triangulaires assez discrets.




                                                         Les SCRIPTS, représentent tous les caractères
                                                         écrits à la plume.




                                                         Les MANUAIRES, regroupent les caractères écrits
                                                         à la main ou au pinceau.




                                                         Les FRACTURES, qui privilégient l’aspect à la
                                                         lisibilité, regroupent les caractères dits gothiques.




                                                         Les NON-LATINES, enfin, rassemblent tous les
                                                         caractères non-latins, tel que ceux des langues
                                                         arabes, coréennes,…




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Conclusion


          De nos jours, grâce aux outils informatiques, certaines polices de caractère n’ont
          plus de police que le nom. Je fais référence ici aux polices dites « Dingbats »,
          dans lesquelles chaque caractère affiche un symbole, une flèche, un logo…

          Ces polices, même si elles peuvent êtres rangées dans la famille des non-latines,
          à mon sens, ne correspondent pas vraiment à des polices de caractères, du
          fait que leurs caractères n’en sont pas réellement. Pour autant elles gardent un
          grand intérêt de par leur potentiel graphique.

          Internet regorge de polices de ce type qui rendent bien des services…

          Internet est également une mine d’or où chacun pourra trouver une police libre
          de droits correspondant à ses besoins. Attention tout de même, car elles ne
          comportent pas toutes l’ensemble des caractères utiles. Par exemple, certaines
          ne comprennent pas de caractères accentués, ce qui peut être un problème
          dans certains cas…

          Un dernier point encore au sujet d’internet. Il est très facile de s’y procurer tout
          un tas de police. Prenez tout de même garde aux propriétés intellectuelles qui
          les régissent et renseignez vous sur les limites de leur utilisation. Bien sûr dans
          le cas d’une utilisation à but non lucrative, vous risquez à priori peut de choses
          (je vous laisse vous renseigner à ce sujet ce n’est pas le sujet du cours), par
          contre pour une utilisation « commerciale », il arrive que des procès éclatent pour
          utilisation non-autorisé d’une police de caractères. Et là ça peut faire très mal !

          Voilà, ça fait pas mal de choses pour un premier chapitre donc on va s’arrêter
          là pour le moment.

          Bien sûr tout ce vocabulaire n’est pas systématiquement employé de nos jours,
          (peut-être en imprimerie, mais pour être totalement honnête je n’ai encore
          rencontré personne qui m’ai demande de faire une composition avec une police
          de caractère Linéale (par exemple)). Par contre, des termes comme l’approche
          peuvent vous servir lors d’un échange avec un imprimeur.

          Pour autant, avant de rentrer plus avant dans l’utilisation de la typographie, il
          me semblait important de faire un point sur ce qu’est la typographie. On voit
          immédiatement que c’est un univers très riche, ce qui nous laisse présager
          que nous allons pourvoir puiser dedans sans relâche, et c’est ce que nous
          commenceront à voir dans le prochain chapitre, en même temps que quelques
          règles d’écritures…


          							                                                Boris | explainMe




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
Références




          Voici les références qui m’ont servies lors de la rédaction de ce cours :

          http://caracteres.typographie.org/http://perso.univ-lyon2.fr/~poitou/Typo/t01.html

          http://fr.wikipedia.org/wiki/Typographie

          http://fr.wikipedia.org/wiki/Caract%C3%A8re

          http://police.planete-typographie.com/

          http://alis.isoc.org/glossaire/

          http://www.tutoweb.com/typo-plomb.htm

          http://fr.wikibooks.org/wiki/R%C3%A9daction_technique/Glossaire_de_typographie

          http://www.tutoweb.com/dico-typo.htm

          http://www.epfl.ch/repro/conseils/typo-polices/

          http://aleph2at.free.fr/index.html?http://aleph2at.free.fr/glossaire/caractere.htm




                                            explainMe | TUTORIEL
boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Cours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfCours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdf
ssuserc72852
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
AmgdoulHatim
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
ikospam0
 

Kürzlich hochgeladen (20)

La mondialisation avantages et inconvénients
La mondialisation avantages et inconvénientsLa mondialisation avantages et inconvénients
La mondialisation avantages et inconvénients
 
Formation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptxFormation qhse - GIASE saqit_105135.pptx
Formation qhse - GIASE saqit_105135.pptx
 
Les roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptxLes roches magmatique géodynamique interne.pptx
Les roches magmatique géodynamique interne.pptx
 
Cours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdfCours Préparation à l’ISO 27001 version 2022.pdf
Cours Préparation à l’ISO 27001 version 2022.pdf
 
Bilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdfBilan énergétique des chambres froides.pdf
Bilan énergétique des chambres froides.pdf
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film français
 
Cours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdfCours ofppt du Trade-Marketing-Présentation.pdf
Cours ofppt du Trade-Marketing-Présentation.pdf
 
L application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptxL application de la physique classique dans le golf.pptx
L application de la physique classique dans le golf.pptx
 
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANKRAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
RAPPORT DE STAGE D'INTERIM DE ATTIJARIWAFA BANK
 
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
Conférence Sommet de la formation 2024 : Développer des compétences pour la m...
 
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
GIÁO ÁN DẠY THÊM (KẾ HOẠCH BÀI DẠY BUỔI 2) - TIẾNG ANH 6, 7 GLOBAL SUCCESS (2...
 
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptxCopie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
Copie de Engineering Software Marketing Plan by Slidesgo.pptx.pptx
 
Chapitre 2 du cours de JavaScript. Bon Cours
Chapitre 2 du cours de JavaScript. Bon CoursChapitre 2 du cours de JavaScript. Bon Cours
Chapitre 2 du cours de JavaScript. Bon Cours
 
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projetFormation échiquéenne jwhyCHESS, parallèle avec la planification de projet
Formation échiquéenne jwhyCHESS, parallèle avec la planification de projet
 
les_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhkles_infections_a_streptocoques.pptkioljhk
les_infections_a_streptocoques.pptkioljhk
 
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
CompLit - Journal of European Literature, Arts and Society - n. 7 - Table of ...
 
La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film français
 
Boléro. pptx Film français réalisé par une femme.
Boléro.  pptx   Film   français   réalisé  par une  femme.Boléro.  pptx   Film   français   réalisé  par une  femme.
Boléro. pptx Film français réalisé par une femme.
 
Computer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptxComputer Parts in French - Les parties de l'ordinateur.pptx
Computer Parts in French - Les parties de l'ordinateur.pptx
 
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptxIntégration des TICE dans l'enseignement de la Physique-Chimie.pptx
Intégration des TICE dans l'enseignement de la Physique-Chimie.pptx
 

Empfohlen

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Empfohlen (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

explainMe | La typographie, premier contact

  • 1. La typographie dans vos créations Théorie Chapitre 1 | Premier contact
  • 2. Avant-propos Tout d’abord bonjour et merci de l’intérêt que vous portez à mes cours. Ce cours a été rédigé entièrement par moi, cependant je n’ai pas la science infuse, c’est pourquoi je me base sur divers sources collectées au fil de mes recherches. De ce fait je tiens à remercier les auteurs des ces sources dont vous pourrez trouver la liste à la fin du document (il est possible dans certains cas qu’il n’y en ai pas, auquel cas cela signifie qu’aucune source n’a été utilisée pour la rédaction de ce cours). Ce cours est livré tel quel, aussi si vous avez des question ou des remarques, veuillez les adresser directement sur le site ou par mail. Si vous souhaitez utiliser ce document dans n’importe quel cadre (formation, école, entreprise, loisirs, famille, ...), je vous y autorise à la seule condition de le diffuser gratuitement et de l’utiliser dans son intégralité (toute les pages, même la couverture s’il vous plaît) de sorte que chacun puisse avoir connaissance de la source d’où provient le document (j’en profite donc pour vous remercier pour la pub gratuite). Seule restriction, je vous demanderai de ne pas proposer ce document en téléchargement direct depuis votre propre site. Préférez un lien sur explainMe, ainsi si des mises à jour sont faites sur le fichier, il sera d’autant plus simple de les récupérer si la source de diffusion online reste unique. Enfin, si vous ré-utilisez ce cours dans le cadre d’une formation ou d’un cours, j’apprécierai beaucoup si vous pouviez me l’indiquer par mail. Histoire de savoir si mon travail a pu servir à quelqu’un tout simplement... Ce cours est la reprise d’un article publié sur le site www.explain-me.com Il a fait l’objet d’une remise en forme du fait du changement de support, mais reste identique dans son contenu. Malgré toute l’attention que je porte à la rédaction des articles il est possible que quelques fautes d’orthographes persistent. Aussi si vous en rencontrez, merci de bien vouloir m’en avertir par mail à l’adresse suivante : boris@explain-me.com De sorte que je puisse effectuer les corrections et remplacer le fichier sur le site. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 3. Conventions typographiques Afin de simplifier et d’organiser mon propos, j’utilise les conventions typographiques suivantes : [Ctrl + ...] Les raccourcis claviers sont indiqués entre crochés ( les trois points étant remplacés par la lettre correspondant bien évidement). Ctrl Touche contrôle. Sous Mac bien que la touche existe, c’est la touche ‘Pomme’ qui est utilisée pour les raccourcis clavier, elle est symbolisée par une pomme. Alt Touche ‘Alt’ située à gauche de la barre espace. Sous Mac elle est remplacée par la touche ‘Option’. Alt Gr Touche ‘Alt’ située à droite de la barre espace. Shift La touche ‘Majuscule’ sera désigné par l’appellation anglaise Shift. Le code sera écrit sur fond gris et avec une autre police de caractère, pour <?php ?> simplifier son identification. Conseil / Avertissement Cette icône introduit un conseil ou un avertissement susceptible de vous éviter des complications face à l’action traitée. Astuce Cette icône dispense une astuce susceptible de vous faire gagner du temps par rapport à la technique décrite. Ou encore quelque chose qu’il est bon de savoir. Variante Cette icône indique une autre manière d’obtenir le résultat escompté, ou apporte un complément d’information sur une méthode utilisée. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 4. Introduction Dans ce premier chapitre, je vous propose de faire connaissance avec la typographie. Avant de commencer à manipuler les caractères et les textes, voyons dans un premier lieu, ce qu’est la typographie. Définition Typographie : la typographie est l’art d’assembler des caractères mobiles afin de créer des mots et des phrases. Cette technique d’imprimerie a été mise au point vers 1440 par Gutenberg qui n’a pas inventé l’imprimerie à caractères mobiles mais les caractères en plomb. Plus généralement, et suite au développement des supports autres que le papier, tel qu’internet ou la vidéo par exemple, la typographie désigne tout ce qui touche à l’usage des caractères. Aussi il est fréquent de trouver, en débutant la lecture d’un livre que je qualifierais d’explicatif («… pour les nuls » par exemple), une page précisant les conventions typographiques utilisées dans l’ouvrage. On parle ici des règles utilisées (ex : les textes en gras et en rouge signifient un point important). Le mot typographie vient de typos (caractère gravé) et graphein (écrire). On parle aussi très souvent d’une « typographie » ou d’une « typo » pour désigner une police de caractère (Font in English). explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 5. Caractère (ou types) : en typographie, le caractère n’est ni plus ni moins que la représentation graphique d’une lettre, c’est un dessin. Bien que cette définition soit assez parlante, l’usage du mot lettre me chagrine un peu car il est réducteur je trouve. En effet, le caractère peut représenter une lettre, mais aussi un chiffre ou bien encore un symbole ( € / . ? @ …). D’autant plus aujourd’hui avec le média informatique grâce auquel nous pouvons utiliser des typographies uniquement composés de symboles. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 6. Police de caractères : souvent lorsque l’on veut désigner une police de caractères, on emploi les termes typographie, typo ou fonte. Et bien que le dernier puisse sembler juste, cela n’est pas totalement vrai. En fait une police de caractère est l’ensemble des déclinaisons d’un même caractère. Alors qu’une fonte est la désignation correspondent à une police, dans un corps et pour un style donné (ex. : Garamond, Italic, 10 pt). Cette confusion vient du fait qu’en anglais, le mot FONT désigne aussi une police de caractères. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 7. Capitales : le mot capitales désigne les « grandes lettres » d’une police, nommée de la sorte car elles occupent le haut du tiroir (ou meuble) où sont rangés les caractères en plomb (la casse). La confusion avec le mot majuscule vient du fait que les capitales sont souvent utilisées pour l’écriture des majuscules, mais le mot majuscule désigne en fait la lettre (le caractère) qui débute une phrase. Bas-de-casse : les bas-de-casse sont les lettres minuscules d’une fonte. Elles sont appelées ainsi car elles sont rangées dans le bas de la casse (le tiroir, ou meuble en bois où sont rangés les caractères en plomb utilisés en imprimerie). explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 8. Anatomie du caractère Un caractère est donc la représentation graphique d’une lettre (principalement, n’oublions pas les chiffres et autres symboles), comme nous venons de le voir. Et à ce titre, il se compose de différentes parties qui portent des noms bien définis. Nous ne les verrons pas toutes ici, mais les principales, histoire de vous en donner un aperçu : La connaissance de ces termes n’est pas impérative pour pouvoir manier la typographie, mais cela nous servira à comprendre certaines notions abordées dans les prochains chapitres. Le corps : c’est la taille globale du caractère, il se mesure du bas du jambage inférieur jusqu’au sommet du jambage supérieur. Il comprend l’œil et la chasse du caractère, ainsi que les petit espaces vides au dessus et au dessous des caractères (les talus), permettant d’éviter un quelconque chevauchement avec ceux de la ligne en dessous. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 9. L’œil : c’est la partie du caractère qui sera imprimée sur le papier (faisant référence à la partie du caractère en plomb qui sera induite d’encre et donc imprimée). En informatique, l’œil se fond dans le corps du caractère et représente plutôt la hauteur du caractère, sans les jambages (voir illustration d’exemple). Hauteur de x : désigne la hauteur de référence des caractères bas-de-casse, il sert d’unité de mesure en typographie. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 10. Plein : c’est la partie la plus épaisse d’un caractère. Délié : par opposition au plein, c’est la partie la plus fine d’un caractère. Ligne de pied : c’est une ligne imaginaire sur laquelle s’aligne les caractères. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 11. Le jambage : c’est la partie d’un caractère bas-de-casse qui est au dessus ou au dessous de la hauteur d’x. Le jambage au dessus est appelé jambage supérieur (ou hampe supérieure ou ascendante). Le jambage au dessous est appelé jambage inférieur (ou hampe inférieure ou descendante). explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 12. L’empattement : aussi nommé serif en anglais, l’empattement désigne les petites sections qui terminent en haut ou en bas, les caractères (voir illustration). explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 13. Ligature : terme désignant les caractères composés de plusieurs lettres tels œ, æ, fi, ff, … On distingue 2 types de ligatures : les ligatures esthétiques, qui n’ont d’autre but que d’enrichir le document et d’en rendre la lecture plus aisée, et les ligatures linguistiques qui elles sont obligatoires. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 14. La chasse : la chasse d’un caractère correspond à sa largeur, comprenant ses approches. Ainsi un « a » n’aura pas la même chasse qu’un « i » par exemple. En typographie, les principales chasses sont le très étroit (extra-condensed), l’étroit (condensed), le normal (medium), le demi-large (demi-bold), le large (expansed), et l’extra-large (extra-expansed). explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 15. L’approche : un caractère ne se compose pas seulement de son œil. Ainsi le corps d’un caractère se compose de son œil plus deux petits espaces vides à gauche et à droite de l’œil : l’approche du caractère. Bien évidement, l’approche d’un caractère lui est propre et donc ne sera pas la même suivant le caractère. C’est une étape très fastidieuse de la création d’une police de caractères, mais c’est aussi ce qui rend une police agréable à lire. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 16. Les classifications « À quoi ça sert une classification ? » Avec la naissance de l’imprimerie et la prolifération des différentes polices de caractères , il devint essentiel d’organiser tout ça pour pouvoir s’y repérer. De là est née l’idée de classification, visant à classer les polices de caractères dans des familles. Permettant ainsi une meilleure gestion des polices. La classification Thibaudeau Elle doit son nom à son créateur (Francis Thibaudeau) qui décide de classer les polices de caractères en fonction de leurs empattements. Dans sa forme de base, la classification Thibaudeau se compose de 4 grandes familles : ELZEVIR, à l’empattement triangulaire. DIDOT, à l’empattement filiforme. EGYPTIENNE, à l’empattement quadrangulaire. ANTIQUE, sans empattement. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 17. La classification Vox C’est la classification la plus utilisée aujourd’hui. Mise au point par un français Maximilien Vox, en 1954, elle est devenue la référence, de part le faite qu’elle prenne en compte les classifications historiques, mais aussi car elle a été traduite en anglais et en allemand, ce qui lui confère une dimension internationale. Elle se compose de 9 familles qui plus tard ont été complétées par l’ATypI (l’Association Typographique internationale), qui lui a ajouté 2 familles supplémentaires (Fractures et Non-latines) : Les HUMANES, qui représente les plus anciens caractères, caractérisés par peu de différences entre les pleins et les déliés, et un axe incliné vers l’arrière et des ‘e’ à la traverse oblique (pour les bas-de-casse). Les GARALDES, dérivées des Humanes, les Garaldes ont des déliés de jonctions plus souples et des traits plus fins. La traverse du ‘e’ devient horizontale. C’est la famille des Garamond (d’où elle tient la moitié de son nom, l’autre lui venant d’un éditeur vénitien Alde Manuce). Les RÉALES, famille de transition entre les Humanes et les Didones, elle est empreinte des deux, avec des empattements plus fins, un contraste un peu plus fort entre les pleins et les déliées, … Les DIDONES, représentent l’aboutissement de la rationalisation des caractères entreprise plus tôt, avec des traits verticaux, un fort contraste entre les pleins et les déliés, et des empattements parfaitement horizontaux. Les MÉCANES, aux empattements très forts et aux faibles contrastes pleins/déliés, sont des caractères très construits. explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 18. La classification Vox - suite Les LINÉALES, que l’on nomme par moment ‘bâton’ sont les caractères sans empattements. Les INCISES, nommées ainsi du fait de leur ressemblance avec les caractères gravés, ils sont proches des linéales, mais ont des empattements triangulaires assez discrets. Les SCRIPTS, représentent tous les caractères écrits à la plume. Les MANUAIRES, regroupent les caractères écrits à la main ou au pinceau. Les FRACTURES, qui privilégient l’aspect à la lisibilité, regroupent les caractères dits gothiques. Les NON-LATINES, enfin, rassemblent tous les caractères non-latins, tel que ceux des langues arabes, coréennes,… explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 19. Conclusion De nos jours, grâce aux outils informatiques, certaines polices de caractère n’ont plus de police que le nom. Je fais référence ici aux polices dites « Dingbats », dans lesquelles chaque caractère affiche un symbole, une flèche, un logo… Ces polices, même si elles peuvent êtres rangées dans la famille des non-latines, à mon sens, ne correspondent pas vraiment à des polices de caractères, du fait que leurs caractères n’en sont pas réellement. Pour autant elles gardent un grand intérêt de par leur potentiel graphique. Internet regorge de polices de ce type qui rendent bien des services… Internet est également une mine d’or où chacun pourra trouver une police libre de droits correspondant à ses besoins. Attention tout de même, car elles ne comportent pas toutes l’ensemble des caractères utiles. Par exemple, certaines ne comprennent pas de caractères accentués, ce qui peut être un problème dans certains cas… Un dernier point encore au sujet d’internet. Il est très facile de s’y procurer tout un tas de police. Prenez tout de même garde aux propriétés intellectuelles qui les régissent et renseignez vous sur les limites de leur utilisation. Bien sûr dans le cas d’une utilisation à but non lucrative, vous risquez à priori peut de choses (je vous laisse vous renseigner à ce sujet ce n’est pas le sujet du cours), par contre pour une utilisation « commerciale », il arrive que des procès éclatent pour utilisation non-autorisé d’une police de caractères. Et là ça peut faire très mal ! Voilà, ça fait pas mal de choses pour un premier chapitre donc on va s’arrêter là pour le moment. Bien sûr tout ce vocabulaire n’est pas systématiquement employé de nos jours, (peut-être en imprimerie, mais pour être totalement honnête je n’ai encore rencontré personne qui m’ai demande de faire une composition avec une police de caractère Linéale (par exemple)). Par contre, des termes comme l’approche peuvent vous servir lors d’un échange avec un imprimeur. Pour autant, avant de rentrer plus avant dans l’utilisation de la typographie, il me semblait important de faire un point sur ce qu’est la typographie. On voit immédiatement que c’est un univers très riche, ce qui nous laisse présager que nous allons pourvoir puiser dedans sans relâche, et c’est ce que nous commenceront à voir dans le prochain chapitre, en même temps que quelques règles d’écritures… Boris | explainMe explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]
  • 20. Références Voici les références qui m’ont servies lors de la rédaction de ce cours : http://caracteres.typographie.org/http://perso.univ-lyon2.fr/~poitou/Typo/t01.html http://fr.wikipedia.org/wiki/Typographie http://fr.wikipedia.org/wiki/Caract%C3%A8re http://police.planete-typographie.com/ http://alis.isoc.org/glossaire/ http://www.tutoweb.com/typo-plomb.htm http://fr.wikibooks.org/wiki/R%C3%A9daction_technique/Glossaire_de_typographie http://www.tutoweb.com/dico-typo.htm http://www.epfl.ch/repro/conseils/typo-polices/ http://aleph2at.free.fr/index.html?http://aleph2at.free.fr/glossaire/caractere.htm explainMe | TUTORIEL boris@explain-me.com [pour donner votre avis] - www.explain-me.com [pour télécharger d’autres cours et biens plus]