La typographie : Quelques règles
Le 4 septembre 2008
- La typographie : premier contact
- La typographie : Quelques règles
- La typographie dans Photoshop
Introduction |
Après avoir fait connaissance avec la typographie et le caractère, je vous propose d’entrer maintenant dans le vif du sujet qu’est l’utilisation de la typographie. Nous commencerons donc par quelques rappels sur les règles typographiques françaises, puis nous nous intéresserons sur les propriétés des paragraphes, l’écriture des caractères spéciaux, pour enfin terminer par quelques conseil quand à l’utilisation de la typographie dans vos travaux.
Règles typographiques françaises |
La typographie, c’est bien… On a vu ce que c’était dans le premier chapitre, mais vous vous en doutez certainement, elle ne se limite pas exclusivement aux caractères.
Voici donc certaines (pas toutes) des règles qui la régisse et qu’il est toujours bon de rappeler.
 |
Les accents sur les capitales :
Contrairement à une idée reçue extrêmement courante, IL FAUT écrire les accents sur les lettres capitales.
Parce qu’en français, l’accent n’est pas juste là pour décorer :
|
 |
Les sigles :
Les sigles s’écrivent généralement en capitales, sans points entre les lettres. |
 |
Les abréviations de civilités :
De même que pour les accents sur les capitales, les abréviations que l’on utilise couramment pour écrire les civilités ne sont par forcément « justes ». Prenons l’exemple de Mr. Pour Monsieur. Cette écriture est rentrée dans les mœurs et nous viens de la dactylographie, mais les règles typographiques originales nous précisent que l’abréviation de Monsieur est M. tout simplement. |
 |
Les espaces avant et après les signes de ponctuation :
Chacun sait qu’entre le dernier mot d’une phrase et le point qui clôture celle-ci, on ne doit pas mettre d’espace, mais qu’en est-il pour les autres signes de ponctuation ? Voici au travers de l’illustration d’exemple, les règles à respecter concernant ces espaces. Vous noterez l’utilisation d’un espace appelé « espace insécable ». Il s’agit en fait d’un espace légèrement plus court que l’espace habituel entre les mots. Malheureusement cet espace est relativement difficile à mettre en place. Il existe bien des raccourcis pour Word et les logiciels d’édition comportent des options à ce sujet, mais il est généralement très difficile à mettre en place, aussi généralement, il est remplacé par un espace « classique ». |
 |
Les abréviations de premier, première,… :
Ici aussi les règles sont strictes (voir illustration d’exemple). |
Textes et paragraphes |
Lorsque l’on rédige un texte, c’est dans le but d’être lue, ça semble évident.
Pour autant nombre de gens rédigent des « pavés » sans la moindre considération pour leurs lecteurs, ces derniers devant eux-mêmes se débrouiller pour s’y retrouver dans un texte long, sans saut de lignes ni mise en avant d’un mot de quelque manière que ce soit.
Pourtant la typographie nous fournit quelques outils utiles à la mise en forme de nos textes.
 |
L’aération :
Commençons d’abord par le bon sens. Pour rendre un texte plus agréable à lire, les premiers outils dont l’on dispose sont le retour à la ligne et le saut de ligne. C’est plutôt simple à utiliser pour peu que l’on ne soit pas trop avare ou généreux dans leur utilisation. |
 |
Les justifications :
Il s’agit ici de positionner le texte. Un texte peut être :
|
 |
L’interlignage :
C’est la valeur de l’écart entre les lignes d’un texte, il peut être augmenté ou diminué. |
 |
L’interlettrage :
C’est la distance entre les caractères, de même que l’interlignage, il peut être augmenté ou diminué. Elle permet de « contrôler » l’approche entre les caractères. C’est très utile pour aérer des titres. |
 |
L’alinéa :
Non il ne s’agit pas du petit personnage animé que vous avez pu voir à la télé… L’alinéa est l’espace vide que l’on place au début d’un paragraphe pour signifier généralement que l’on change de sujet. |
Les caractères spéciaux |
Plutôt qu’un long discourt, voici un tableau récapitulatif des principaux caractères spéciaux, les raccourcis clavier pour les afficher sous MAC et PC, ainsi que leurs noms (ça peut servir) :
Il s’agit d’un tableau non exhaustif.
Attention la mention pas de combinaison ne signifie pas forcement qu’il n’existe pas de combinaison pour obtenir la lettre. Considérez-la plutôt comme une mention.
Par exemple, sous Mac, pour écrire un É il suffit de taper é lorsque les majuscules sont verrouillées.
Les combinaisons présentées ici ne sont pas les codes permettant d’afficher les caractères spéciaux dans vos pages web (nous les verrons dans un prochain chapitre).
| — SIGNES — | |||
|
Caractère |
Combinaison PC |
Combinaison MAC |
Nom du caractère |
| ¤ | Alt + 0164 | pas de combinaison | symbole monétaire |
| † | Alt + 0134 | Alt + T | croix (doute sur le nom) |
| × | Alt + 0215 | pas de combinaison | signe multiplication |
| ÷ | Alt + 0247 | Alt + : | signe division |
| ¶ | Alt + 0182 | Alt + 6 | pied de mouche (fin de paragraphe) |
| ‡ | Alt + 0135 | Alt + Q | double croix (doute sur le nom) |
| ± | Alt + 0177 | Alt + Maj + = | signe plus-ou-moins |
| — | Alt + 0151 | Alt + - | tiret long ??? |
| – | Alt + 0150 | Alt + Maj + - | tiret, trait d’union, signe moins |
| § | Alt + 0167 | Alt + Maj + B | paragraphe (Alinéa) |
| ˆ | Alt + 0136 | touche directe | accent circonflexe |
| ˜ | Alt + 0152 | Alt + N | tilde |
| « | Alt + 0171 | Alt + 7 | guillemet français ouvrant |
| » | Alt + 187 | alt+7 (maj + è) | guillemet français fermant |
| ¦ | Alt + 0166 | pas de combinaison | barre verticale interrompue |
| ‰ | Alt + 0137 | Alt + Maj + ù | signe pour mille |
| © | Alt + 0169 | Alt + C | signe Copyright |
| ® | Alt + 0174 | Alt + R | signe Marque déposée |
| ™ | Alt + 0153 | Alt + Maj + T | signe Trade Marketing |
| ø | Alt + 0248 | Alt + à | o barré oblique (espace vide, diamètre) |
| Ø | Alt + 0216 | Alt + Maj + à | o barré oblique capitale (espace vide, diamètre) |
| ª | Alt + 0170 | Alt + Maj + u | indicateur ordinal féminin |
| þ | Alt + 0222 | pas de combinaison | lettre minuscule Thorn |
| þ | Alt + 0254 | pas de combinaison | lettre majuscule Thorn |
| ƒ | Alt + 0131 | Alt + F | lettre minuscule F hameçon |
| ß | Alt + 0223 | Alt + B | lettre minuscule S dur (S dur allemand, Szed) |
| µ | Alt + 0181 | Alt + M | symbole micro |
| ð | Alt + 0208 | pas de combinaison | lettre majuscule ETH |
| º | Alt + 0186 | Alt + u | symbole degré |
| • | Alt + 0149 | Alt + @ | signe balle |
| „ | Alt + 0132 | pas de combinaison | double virgule |
| … | Alt + 0133 | Alt + . | points de suspension |
| ¬ | Alt + 0172 | Alt + L | signe négation (symbole non) |
| ¿ | Alt + 0191 | Alt + Maj + , | point d’interrogation renversé |
| ¡ | Alt + 0161 | pas de combinaison | point d’exclamation renversé |
| ¥ | Alt + 0165 | Alt + Maj + $ | symbole Yen |
| £ | Alt + 0163 | pas de combinaison | symbole Livre |
| € | Alt + 0128 | Alt + $ | symbole Euro |
| ¢ | Alt + 0162 | Alt + Maj + C | symbole centimes |
| ² | Alt + 0178 | pas de combinaison | signe exposant 2 |
| ³ | Alt + 0179 | pas de combinaison | signe exposant 3 |
| ½ | Alt + 0189 | pas de combinaison | symbole un demi |
| ¼ | Alt + 0188 | pas de combinaison | symbole un quart |
| ¾ | Alt + 0190 | pas de combinaison | symbole trois quarts |
| La pomme | pas de combinaison | Alt + 1 | La pomme (logo Macintosh) |
| ∞ | pas de combinaison | Alt + , | symbole infini |
| ¸ | Alt + 0184 | pas de combinaison | cédille |
| π | pas de combinaison | Alt + P | symbole pi minuscule |
| Π | pas de combinaison | Alt + Maj + P | symbole pi majuscule |
| & | pas de combinaison | pas de combinaison | perluète (esperluète, esperluette) |
| — CARACTÈRES — | |||
|
Caractère |
Combinaison PC |
Combinaison MAC |
Nom du caractère |
| á | Alt + 0225 | pas de combinaison | A minuscule accent aigu |
| à | Alt + 0224 | pas de combinaison | A minuscule accent grave |
| â | Alt + 0226 | pas de combinaison | A minuscule accent circonflèxe |
| ä | Alt + 0228 | pas de combinaison | A minuscule tréma |
| å | Alt + 0229 | pas de combinaison | A minuscule rond en chef |
| Á | Alt + 0193 | Alt + Maj + G | A capitale accent aigu |
| Ã | Alt + 0195 | pas de combinaison | A capitale tilde |
| Ä | Alt + 0196 | pas de combinaison | A capitale tréma |
| Å | Alt + 0197 | Alt + Maj + Z | A capitale rond en chef |
| À | Alt + 0192 | pas de combinaison | A capitale accent grave |
| Â | Alt + 0194 | Alt + Z | A capitale accent circonflèxe |
| æ | Alt + 0230 | Alt + A | ligature minuscule AE |
| Æ | Alt + 0198 | Alt + Maj + A | ligature capitale AE |
| ç | Alt + 0231 | pas de combinaison | C cédille minuscule |
| Ç | Alt + 0199 | Alt + 9 | C cédille capitale |
| ê | Alt + 0234 | Alt + E | E minuscule accent circonflèxe |
| é | Alt + 0233 | pas de combinaison | E minuscule accent aigu |
| ë | Alt + 0235 | Alt + 2 | E minuscule tréma |
| è | Alt + 0232 | pas de combinaison | E minuscule accent grave |
| Ê | Alt + 0202 | Alt + Maj + E | E capitale accent circonflèxe |
| Ë | Alt + 0203 | Alt + Maj + K | E capitale tréma |
| É | Alt + 0201 | pas de combinaison | E capitale accent aigu |
| È | Alt + 0200 | pas de combinaison | E capitale accent grave |
| ï | Alt + 0239 | pas de combinaison | I minuscule tréma |
| í | Alt + 0237 | pas de combinaison | I minuscule accent aigu |
| î | Alt + 0238 | pas de combinaison | I minuscule accent circonflèxe |
| ì | Alt + 0236 | pas de combinaison | I minuscule accent grave |
| Í | Alt + 0205 | Alt + Maj + J | I capitale accent aigu |
| Ì | Alt + 0204 | Alt + H | I capitale accent grave |
| Î | Alt + 0206 | Alt + Maj + H | I capitale accent circonflèxe |
| Ï | Alt + 0207 | Alt + J | I capitale tréma |
| ñ | Alt + 0241 | pas de combinaison | N minuscule tilde |
| Ñ | Alt + 0209 | pas de combinaison | N capitale tilde |
| œ | Alt + 0156 | Alt + O | ligature minuscule OE |
| Π| Alt + 0140 | Alt + Maj + O | ligature capitale OE |
| ô | Alt + 0244 | Alt + ˆ | O minuscule accent circonflèxe |
| ö | Alt + 0246 | pas de combinaison | O minuscule tréma |
| ò | Alt + 0242 | pas de combinaison | O minuscule accent grave |
| õ | Alt + 0245 | pas de combinaison | O minusucle tilde |
| ó | Alt + 0243 | pas de combinaison | O minusucle accent aigu |
| Ó | Alt + 0211 | Alt + Maj + M | O capitale accent aigu |
| Ô | Alt + 0212 | Alt + Maj + ˆ | O capitale accent cirocnflèxe |
| Õ | Alt + 0213 | pas de combinaison | O capitale tilde |
| Ö | Alt + 0214 | pas de combinaison | O capitale tréma |
| Ò | Alt + 0210 | Alt + S | O capitale accent grave |
| š | Alt + 0154 | pas de combianison | S caron minuscule |
| Š | Alt + 0138 | pas de combinaison | C caron capitale |
| ú | Alt + 0250 | pas de combinaison | U minuscule accent aigu |
| ü | Alt + 0252 | pas de combinaison | U minuscule tréma |
| û | Alt + 0251 | pas de combinaison | U minuscule accent circonflèxe |
| ù | Alt + 0249 | pas de combinaison | U minuscule accent grave |
| Ù | Alt + 0217 | Alt + ù | U capitale accent grave |
| Ú | Alt + 0218 | Alt + y | U capitale accent aigu |
| Ü | Alt + 0220 | pas de combinaison | U capitale tréma |
| Û | Alt + 0219 | Alt + Maj + 8 | U capitale accent circonflèxe |
| ÿ | Alt + 0255 | pas de combinaison | Y minuscule tréma |
| Ÿ | Alt + 0159 | Alt + Maj + y | Y capitale tréma |
| ý | Alt + 0253 | pas de combinaison | Y minuscule accent aigu |
| Ý | Alt + 0221 | pas de combinaison | Y capitale accent aigu |
Bons usages |
Sans avoir la prétention d’être exhaustif, voici quelques petits conseils pour l’utilisation de la typographie dans vos projets :
 |
Pas plus de 3 polices différentes dans le même projet :
Pensez à vos lecteurs, et limitez le nombre de polices différentes à 3, grand maximum sur le même document. Changer de style typographique trop souvent au court d’un même document nui gravement à votre sujet. Il le rend fatiguant à lire car le lecteur doit constamment s’adapter à un nouveau style et s’en lassera très (très) rapidement. De plus un document comportant peu de polices différentes conserve une meilleure homogénéité. |
 |
Choisissez vos polices en fonction de vos sujets :
Comme nous l’avons vue dans le premier chapitre, les différentes familles de caractères représentent plusieurs « styles graphiques » différents qui s’adaptent plus ou moins bien selon le sujet. Il me semble un peu « stupide » et réducteur de vous faire une liste de sentiments ou des concepts et de tenter de les rattacher à des familles de caractères ou des polices (même si je l’ai fait pour les couleurs…) . En effet si vous souhaiter traiter d’un sujet « doux » vous allez préférer une (des) police(s) plutôt fine(s) ou enlevée(s), si le style se veut plutôt solennel, vous vous orienterez peut-être vers des caractères « posés » avec un bel empattement. Bref, ils y a des associations qui vont clairement ensemble, d’autres moins, et là le (la) seul(e) juge c’est vous ! Bien sûr au début ce choix peut vous sembler difficile, mais essayez d’analyser le sujet que vous traitez et vous trouverez certainement l’association qui s’imposera de façon logique. Scrutez les publicités, les magazines, observez et vos sens s’aiguiseront d’eux-même. |
 |
Caractères visibles en partie :
Que ce soit pour une raison graphique (What else ?) ou autre, si vous devez ne faire apparaître qu’une partie d’un caractère, préférez la partie haute. En effet un caractère reste plus facilement identifiable si on l’ampute de sa partie basse plutôt que de sa partie haute (voir illustration d’exemple). |
 |
Attention à vos approches :
La grande majorité des logiciels de mise en page et de graphisme (pour ne pas dire tous), vous permet de régler l’approche des caractères, et bien que cela soit très utile dans certains cas, prenez garde de ne pas trop en abuser dans vos textes. Par contre vous êtes beaucoup plus libres pour ce qui est des titres ou phrases courtes où l’impacte et moins « perturbant ». |
 |
Attention à la lisibilité de vos polices :
De même que pour l’approche, réservez les polices très complexes aux titres et autres textes courts qui pourront êtres écrits plus gros et seront donc plus déchiffrables. |
Conclusion |
Ce chapitre clôt la partie théorique sur la typographie.
Pour compléter le précédent chapitre, nous venons de voir quelques règles qui régissent la typographie, ainsi les deux premiers chapitres posent les bases qu’il est bon de connaître pour manipuler les caractères. Aussi j’espère que ces connaissances vous permettront de gagner du temps dans la manipulation des textes ou au moins vous éviterons de commettre des erreurs pouvant nuire à la lisibilité de vos créations.
Bien sûr comme toutes les règles (enfin presque) elles peuvent êtres transgressées, alors à vous de jouer…
Dans le prochain chapitre, nous verrons comment se manipule les caractères dans Photoshop et Illustrator.
Ressources ayant servit à la rédaction de ce cours :
http://pagesperso-orange.fr/damien.jullemier/typ/index.htm
http://francois.huet.free.fr/typographie/
http://www.petitkar.com/plugins/openfiches/fiches.php?lng=fr&nom_fiches=Fiches%20Typographie&mode=fichestypographie
http://www.osxfacile.com/caractere.html
http://www.affaire-esperluette.com/
http://www.starr.net/is/type/altnum-fr.html
http://www.synapse-fr.com/typographie/TTM_0.htm
http://fr.wikibooks.org/wiki/R%C3%A9daction_technique/Glossaire_de_typographie
http://marcautret.free.fr/sigma/pratik/typo/guilles/index.php
http://www.table-ascii.com/
http://www.mus.ulaval.ca/roberge/gdrm/08-codes.htm
http://www.typographie.images-en-france.fr/lexique-regles-typographiques.php
http://www.mus.ulaval.ca/roberge/gdrm/08-codes.htm
http://a1.esa-angers.educagri.fr/informa/web_pao/pao_34.htm
http://alis.isoc.org/codage/iso10646/rang_00.htm
http://bcev.nfrance.com/typo.htm
http://www.orthotypographie.fr.st
http://www.synec-doc.be/doc/accents2.htm
Wikio
Catégorie(s) : Cours théoriques, Typographie
Article lu 4 209 fois
[4,40 / 5 - 10 vote(s)]
Loading ...
Mon dieu que tu fais ça bien <3
merci
Qu’il est bon de redécouvrir certains principes !Merci au passage pour le tableau des caractères accentués, ca peut être très utile
Merci à toi pour tes compliments dans tes 2 commentaires.
).
Et de rien pour le tableau des caractères.
A ce propos d’ailleurs je me suis longtemps demandé si je devais l’intégrer directement dans l’article ou bien en faire une page à part, mais finalement j’ai trouvé sur le net un outil interactif bien plus complet que j’ajouterais en lien dans le dernière partie sur la typo (il faut juste que je retrouve tous les liens
Les subtilités de la langue francaise sont belles!Merci!
C’est vrai que j’ai longtemps trouvé la langue française trop compliquée (et ça m’arrive encore parfois, d’ailleurs vous avez certainement due rencontré des fautes pars-ci par-là) avec les nombreuses formes du passé, etc…
Et il serait facile de trouver des langues telles que l’anglais plus « simples » à utiliser.
Mais au fil du temps et grâce à la typographie, je commence à entrevoir toutes les subtilités qu’elle offre et je prends plaisir à « jouer » avec…
Bonjour et tout d’abord toutes mes félicitations pour ce site web didactique d’une qualité d’approche remarquable de la matière ! Je vais y passer et y repasser !
Petites infos pour « améliorer » le tableau des combinaisons avec ma modeste contribution.
Sur Mac, verr. maj+é donne un é minuscule (Sous Leopard en tout cas). Je dois utiliser la combinaison alt+1(maj+&) puis saisir e.
Pour les guillemets françaises, simplement presser alt+7 pour « et alt+7(maj+è) pour ».
Pour les points de suspension : alt+.
Pour euro : alt+$
Pour le centime, si je ne m’abuse, alt+maj+c
Voilà.
Si besoin, je puis aussi vous fournir les combinaisons sous Linux (enfin, Ubuntu)
Bonjour,
Merci à toi je vais rajouter tes indications au tableau.
Par contre c’est étrange que tu n’ai pas les capitales en majuscule sous Mac grâce à la touche Maj. verrouillée. Je travail sous Mac à mon travail, sous Leopard aussi, et ça passe tout seul… étrange (peut-être un réglage dans les préférence système au niveau du clavier) je ne sais pas trop je m’y connais beaucoup moins en Mac.
Merci également pour ta proposition de combinaisons de touches sous Ubuntu. Je suis preneur évidement (plus on en regroupera et mieux ce sera).
Tu peux me les transmettre par mail si tu veux ou via le forum c’est comme tu préfère, comme ça je les rajouterai au tableau.
[...] La typographie premier contact et quelques règles [...]
[...] explainMe | La typographie : Quelques règles – [...]
Encore un article très intéressant. Merci.
Cependant, je trouve étrange d’écrire « Combinaison PC » là où il aurait AMHA fallu écrire « Combinaison MS Windows » car comme l’a évoqué Aurélien Paulus, ces combinaison ne sont pas valides sur la plupart des distributions GNU/Linux (toutes ?).
Il existe une polémique au sujet des abréviations : certains affirment qu’il faut séparer les lettres par un point (le point final faisant également polémique), d’autres non.
Personnellement, je respecte les directives de l’Académie Française : je fais la différence entre les acronymes (lus comme un mot normal) que j’écris sans mettre de point séparateur et les abréviations pour lesquelles je fais suivre chaque lettre d’un point : NASA (lu comme un mot) mais I.U.T. (on épelle les lettres).
Je ne comprends pas la logique du site du Ministère de l’Éducation Nationale qui mélange étrangement les deux : http://www.education.gouv.fr/pid95/sigles.html
Il existe aussi une polémique sur la mise en capitales des acronymes (certains différenciant ceux supérieurs à trois lettres des autres).
Pourquoi n’utilises-tu plus les guillemets français dans ton commentaire ? Y a-t-il une raison typographique ou est-ce un simple relâchement (acceptable, bien sûr) ?
Oui c’est vrai que l’amalgame Windows / PC n’est pas des plus heureuses. A l’occasion il faudra que je modifie cela.
Pour les guillemets à la française c’est un peu pour 2 raisons en fait :
- un relâchement car si je m’efforce d’appliquer les règles typographiques lorsque je réalise un travail, je reste plus « souple » lorsque je discute
- et parce que personnellement je n’aime pas les guillemets à la française (donc s’ils sont présents dans les articles c’est tout simplement parce que Wordpress me les met par défaut, et que j’avoue, je ne me donne pas la peine de les remplacer. :/)
Pour ce qui est du site du Ministère de l’Éducation Nationale, c’est assez étrange en effet (à mon avis il s’agit d’un copier/coller
).
Beaucoup de choses que j’ai apprit car mon français n’est pas très bon !
très pratique la liste des combinaisons !
J’ajoute le site dans mes marques pages ^^
Des règles qu’il est bon de rappeler. Notez toutefois que, contrairement à une croyance répandue, dans l’acronyme « SNCF », le F ne signifie pas « fer » mais bel et bien « français » : société nationale des chemins de fer français.
À bon entendeur !
Autant pour moi, dans mes premières recherches je n’avais pas trouvé ça.
Comme quoi il faut toujours vérifier ses sources…
Merci je met à jour.
Tiens je repasse ici et je vois un « Autant pour moi »… incorrect. ^^
http://www.academie-francaise......l#au_temps
Alors là je suis skotché ! Je n’aurai jamais pensé que la définition de cette expression venez de là. Du coup ça me fait même bizarre car je trouver l’écriture que j’utilise (et je ne suis pas le seul je pense) plus logique, mais il faut juste s’y habituer je pense.
Merci pour l’info !
Faut que je prenne l’habitude d’aller plus souvent sur le site de l’académie française… On y apprend plein de choses qui mettent en pièce tout un tas d’idées reçues.