Les règles typographiques ne t’évoquent peut-être pas grand-chose, mais elles sont pourtant essentielles pour l’optimisation de tes visuels et de l’expérience utilisateur sur ton site ! 🤩
Que ce soit en matière de webdesign ou de création de contenus (visuels Instagram, Linkedin, Pinterest, article de blog, etc.), crois-moi, bien maîtriser la typographie peut beaucoup apporter à ta communication digitale ! 👍
Prête à apprendre plein de choses intéressantes sur la mise en forme et la valorisation de tes textes ? C’est parti ! 🚀
Pourquoi respecter les règles typographiques ?
Pour beaucoup, les questions de typographie se limitent au choix d’une police (ou d’une combinaison de polices), de sa couleur, de sa graisse et de sa taille. Mais c’est loin d’être aussi simple ! Comme pour de nombreuses choses en graphisme et en langue française (puisque cela touche à ces deux sujets à la fois), il existe un certain nombre de codes qu’il convient de respecter pour bien faire les choses… 🤓
Eh oui, maîtriser les règles typographiques ça s’apprend, et il y a de très bonnes raisons à cela… 😉
La principale est esthétique bien sûr ! Car en appliquant soigneusement ces principes, tu t’assures d’avoir des textes visuellement harmonieux, avec un rendu professionnel, crédible et cohérent qui ne peut que t’avantager en termes d’image. 💫
Au-delà de servir positivement ton identité visuelle, soigner ta typographie va aussi être un plus pour ta cible, puisque tu vas nettement améliorer l’ergonomie de tes contenus et l’expérience utilisateur avec des textes plus fluides et agréables à lire. 👍 Et qui dit textes agréables, dit textes lus ! 🤓 Eh oui tu t’en doutes, si les internautes qui visitent ton site internet accrochent sur toutes les phrases parce qu’elles sont coupées bizarrement ou mal ponctuées, il y a des chances pour qu’ils ne s’attardent pas ta page ! Alors, fais en sorte que ça n’arrive pas. 😉
Il faut que ton texte soit suffisamment bien formaté pour que le lecteur se concentre sur ton message plutôt qu’il perde son énergie à essayer de le décrypter. Et c’est ici que la typographie va jouer un rôle essentiel dans la mesure où elle vient faciliter la compréhension et l’assimilation de l’information. 🧠
Bref, pour assurer l’harmonie, la bonne lisibilité et l’efficacité de tes textes, tu as tout intérêt à te pencher sérieusement sur la question. 🙂
Tu peux considérer ces règles typographiques comme une passerelle entre le fond et la forme. C’est grâce à elles que tu vas encourager la lecture des internautes, alors prend la bien en considération lorsque tu fais une mise en page ! 📄
Les 8 règles de typographie que tu dois absolument connaître
1. Avoir la bonne longueur de lignes
En graphisme, on considère généralement que la longueur optimale d’une ligne se situe entre 60 et 72 caractères en moyenne. 👍🏻
Mais parce qu’il existe une multitude de formats et de types de contenus (articles de blog, publications social media, pages de magazine, page web…), ce critère est assez variable et tu n’es pas obligée de le suivre au pied de la lettre. 😉
L’idée principale à retenir étant qu’il vaut mieux éviter les blocs de texte qui s’étendent trop dans la largeur et qui vont d’un côté à l’autre de l’écran. ↔️ C’est assez désagréable à lire et tu risques de perdre un certain nombre de lecteurs en cours de route. 😢 Eh oui, plus la ligne est longue, plus les gens ont des difficultés à trouver le début de celle d’en dessous, alors surtout fais attention à cet aspect. 😉
Bien sûr, cela ne veut pas dire que tu dois faire des lignes toutes riquiqui qui à l’inverse peuvent fatiguer le regard et ralentir la compréhension. 😅
À toi d’ajuster selon ton ressenti personnel. 😉
2. Penser aux interlignes
Autre aspect important : l’interlignage qui correspond à la taille de l’écart situé entre les lignes de ton texte.
Que ce soit avec un logiciel de traitement de texte type Word ou de création graphique (Photoshop, Canva…), tu as la possibilité de l’augmenter ou de le réduire, ce qui s’avère parfois très utile pour optimiser la lisibilité de ton texte, mais aussi l’espace qu’il occupe sur ton visuel. 👌
En général, l’interlignage est sensiblement plus grand que la taille de ta police. Par exemple, pour une police de 12 pt, on observe souvent un interlignage de 14 pt.
Ces interlignes – les intervalles entre deux lignes donc – sont très utiles puisqu’ils permettent au lecteur de mieux distinguer et comprendre les caractères et donc le texte dans sa globalité. Cela contribue aussi à améliorer le rendu visuel de ce dernier. 😍
Il faut savoir qu’un certain nombre de facteurs tels que la police, sa taille, sa graisse, sa casse, sa fonte ou sa justification peuvent avoir un impact sur l’interlignage. Donc si tu modifies ta typo, n’hésite pas à vérifier si l’interligne est toujours adapté ou s’il vaut mieux l’ajuster. ⚙️
La règle sur cet aspect est d’avoir un interlignage de 2 à 5 points supérieur à la taille de la fonte (en fonction de la police utilisée), ce qui permet un rendu harmonieux et un bon confort de lecture.
Bien sûr, n’hésite pas à faire quelques essais pour l’ajuster au mieux selon ton feeling. 🙂
3. Éviter les mots orphelins et les césures
Les mots orphelins sont ces petits mots de fin de phrase qui se retrouvent seuls, abandonnés au début d’une ligne et à la fin d’un paragraphe. 😢
Leur rendu visuel n’est pas des plus esthétiques et ils peuvent aussi nuire à la fluidité de lecture. 😓
Pour les éviter, n’hésite pas à reformuler légèrement ta phrase afin d’améliorer la répartition des mots sur les lignes et d’avoir un bloc de texte plus équilibré. Si tu travailles sur une zone de texte, tu peux aussi jouer sur sa largeur en l’ajustant légèrement ou bien forcer des sauts de ligne à d’autres endroits pour décaler des mots vers la ligne suivante. 😉
De même, tu peux parfois être confrontée à des problèmes de césures qui correspondent aux coupures de mots à la fin d’une ligne. Ces mots hachés avec un tiret sont loin d’être agréables à lire et ont tendance à casser l’harmonie visuelle du texte ; alors là encore, mieux vaut les éviter ! Pour cela, tu peux changer le paramétrage de ton logiciel de traitement de texte ou bien reformuler légèrement ta phrase afin que chaque mot préserve son intégrité. 😆
4. Respecter l’échelle et la hiérarchie typographique
Pour créer des textes visuellement harmonieux avec une articulation cohérente qui permette au lecteur de garder le fil, tu dois aussi te soucier des différentes tailles de police que tu vas utiliser.
Pas question de les choisir au pifomètre, au fil de ta rédaction ! 🙅🏻♀️
Tu dois toujours te baser sur une échelle de tailles 📏, qu’il s’agisse de l’échelle typographique traditionnelle (celle utilisée dans la plupart des logiciels avec la suite […] 9 – 10 – 11 – 12 – 14 – 16 – 18 – 20 – 22 – 24 – 36 – 48 […]), ou d’une autre que tu auras créée toi-même afin d’avoir un rendu homogène et de créer des repères visuels pour tes lecteurs. 🤓
C’est à partir de cette échelle que tu vas pouvoir établir une hiérarchie dans tes textes entre les titres (H1), les différents niveaux de sous-titres (H2,H3,H4, H5…) et le corps du texte.
Cette hiérarchisation est vraiment importante pour faciliter la compréhension des internautes, mais aussi pour donner une image plus carrée et professionnelle à tes contenus.
Notons aussi que c’est un aspect très utile pour ton référencement, si tu utilises bien les différentes balises de titres. 👌
5. Adopter une belle composition en drapeau
Le drapeau ⛳ désigne le côté d’un texte qui n’est pas justifié. Il peut donc se situer à gauche ou à droite selon la justification choisie. ↔️
Si tu es une habituée du web, tu sais sans doute que la norme veut qu’on justifie les textes à gauche pour éviter d’endormir le regard avec des blocs totalement justifiés qui manquent de contraste et de points de repère pour les yeux. 👀
Cet usage s’explique aussi par les différentes tailles d’écrans qui font varier l’apparence d’un même texte selon le terminal que l’on utilise. 📱
Afin que l’apparence de ce drapeau soit la plus douce et élégante possible, tu dois donc veiller à ce qu’il n’y ait pas trop d’écart entre les différentes longueurs de lignes de ton bloc de texte. 📝
Il faut donc éviter qu’il y ait des lignes qui dépassent trop ou qui soient trop courtes par rapport aux autres.
Là encore, le seul moyen d’ajuster ça est de le faire manuellement en reprenant légèrement tes phrases ou en forçant des sauts de ligne pour décaler le texte là où c’est possible. 😉
Cela dit, ce conseil est surtout valable pour les textes “fixes” (dans des visuels Instagram ou Pinterest, un flyer ou une plaquette par exemple). Dans le cas d’un site Internet, les choses fonctionnent un peu différemment puisqu’avec le responsive design les textes sont amener à bouger pour s’adapter aux écrans. 📲
6. Bien doser la mise en avant des textes
Pour faciliter la lecture et mettre en exergue certaines informations clés, on est souvent amenés à utiliser diverses techniques de mise en avant telles que les couleurs, la graisse (texte en gras) ou l’italique. 🖊️
Cette mise en évidence de certains passages est particulièrement appréciée des internautes puisque cela leur permet de gagner du temps de lecture et de scanner plus rapidement le contenu pour trouver ce qu’ils recherchent. 🔎
Si mettre en avant de petites sections de texte est une bonne pratique, il ne faut en revanche surtout pas en abuser, au risque d’annuler totalement l’effet recherché. Eh oui, cela fait partie des grandes règles typographiques à connaître : trop de gras tue le gras (indigestion bonjour 🤢🤣) ! Idem bien sûr si tu abuses de la couleur, de l’italique ou des gros caractères. 😉
Bref, tu l’as compris, l’idée est de bien doser tes mises en avant et de ne pas utiliser toutes les techniques en même temps pour éviter de semer le trouble dans l’esprit de ton lecteur. 🤪
7. Ne pas abuser des MAJUSCULES
Si l’utilisation de majuscules peut être une bonne idée pour mettre en avant un mot, une courte accroche ou certains titres (dans la mesure où cela crée du contraste dans tes textes), là encore, la modération est de mise ! 🙂
Eh oui, c’est prouvé, notre cerveau a tendance à lire beaucoup plus facilement les minuscules, car les lettres correspondent davantage à des formes. Avec les majuscules qui arrivent toutes à la même hauteur, il y a moins de relief entre les caractères, ce qui rend la lecture moins aisée. 😅
Sans oublier le fait que les textes écrits tout en majuscules peuvent donner un côté agressif et évoquer le langage crié (ou les textos d’une grand-mère qui a un peu de mal avec la technologie 🤣).
Tout ça, tu le savais sûrement, car cela fait partie des règles typographiques de base, mais un petit rappel ne fait jamais de mal… 😉
8. Respecter les règles de ponctuation
Ah la ponctuation… vaste sujet ! Si tu fais partie de la team des littéraires, tu sais à quel point elle est importante pour la compréhension et la lisibilité du texte. 🤓
Pourtant, elle est souvent malmenée… Et si tu ne te sens pas tout à fait au point sur la question, je ne te jette pas la pierre, car c’est loin d’être aussi simple qu’on le pense ! 😅
Quel point choisir à la fin de cette phrase ? Faut-il ou non un espace avant et/ou après tel ou tel signe ? Ces questions, tu te les es sûrement déjà posées… 😉
Une chose est certaine, c’est un aspect vraiment important, car la ponctuation à non seulement un fort impact visuel, mais elle contribue aussi au sens de ta phrase.
Notons par ailleurs qu’elle apporte du rythme et du souffle dans la lecture, ce qui joue un rôle non négligeable en termes d’expérience utilisateur ! C’est en outre un moyen très utile de faire ressentir les émotions (l’effet trois petits points, tu sais… 😉)
Si je ne peux que t’encourager à creuser davantage la question, je te partage tout de même quelques règles importantes qui ne sont pas toujours maîtrisées et qui pourraient t’être utiles :
✅ il y a toujours une espace (idéalement une espace fine insécable) devant les signes doubles tels que les points d’exclamation, les points d’interrogation, les points virgule et les deux points en français.
✅ il n’y a jamais d’espace avant les signes simples comme les points et les virgules. Idem pour les points de suspension, les parenthèses fermantes, les crochets fermants, et les guillemets anglais fermants (”)
✅ dans une énumération avec une liste de tirets ou de puces, on ne met normalement pas de majuscules au début des propositions (si la phrase qui introduit la liste finit par deux points [:]). On doit également mettre une virgule ou un point-virgule après chaque élément de la liste.
✅ cela rejoint la règle précédente, mais de manière générale il n’y a jamais de majuscule après les : et les ; (sauf pour les noms propres bien sûr)
✅ il y a toujours une espace avant et une espace après les tirets d’incise (les petits tirets qu’on utilise comme des parenthèses pour faire une aparté).
✅ on met toujours une espace devant et une espace insécable derrière les guillemets français ouvrants («). Ces espaces insécables sont des caractères spéciaux qui permettent d’éviter de se retrouver avec un saut de ligne entre deux éléments qui doivent rester groupés. Cela peut être gênant par exemple dans le cas de guillemets fermants qui se retrouveraient isolés au début de la ligne suivante. 😢
✅ les crochets [] doivent être utilisés pour faire une parenthèse à l’intérieur de parenthèses ou dans le cas d’une citation tronquée (on met alors un point de suspension entre crochets pour signifier le passage coupé).
✅ il faut toujours mettre une espace avant, mais pas d’espace après les parenthèses ouvrantes, les crochets ouvrants et le guillemets anglais ouvrants.
✅ on ne met jamais de points de suspension (…) après etc. Il doit simplement être suivi d’un point. 😉
Pfffffiou ! Ça fait pas mal de règles typographiques à connaître, n’est-ce pas ?! 😅
En tout cas, j’espère vraiment que cela t’aidera à faire moins d’erreurs de typographie et donc à améliorer l’expérience de tes lecteurs…
Maintenant, fini les gros pavés de textes illisibles ! À toi les jolis designs à la typo impeccable ! 😍
Tu aimerais apprendre à te façonner une identité visuelle sur mesure et à créer de beaux contenus pour booster ta com’ ? Je t’apprends tout ça dans mon Programme Identité & Com’ ! Les portes réouvrent bientôt ! Inscris-toi sur la liste d’attente pour avoir accès à des une offre privilège lors du lancement 🤗
(N’oublie pas d’enregistrer cet article dans ton compte Pinterest ! 👇🏻)