Sélectionner une page

Le monde de la typographie est plein de termes spécifiques. Que vous vous essayez à la création de votre propre site ou que vous ayez recours à un webdesigner professionnel, connaître ces termes pourrait vous être d’une grande aide.

Car derrière une apparence complexe, ces termes révèlent un savoir qui peut vous aider à optimiser la lisibilité et l’apparence de votre site web. Et comme nous l’avons vu dans un article précédent (19 générateurs de palettes de couleurs pour simplifier le web-design), l’apparence de votre site est capital pour attirer l’œil, inciter un internaute à rester sur votre site, et même à y revenir ultérieurement.

Voici donc la liste de 50 termes en la matière qu’il peut être utile de connaître :

1. Crénage (Kerning en anglais)

Crénage - Http5000

Le crénage représente l’espace entre deux lettre. Contrairement à l’inter-lettre (tracking), qui place un espace de taille égale entre chaque lettre, le crénage varie selon la paire de lettre à espacer.

Le crénage est important sur un site web. En effet, cela peut subtilement affecter la façon dont les internautes percevront le texte. Si le crénage n’est pas utilisé, certaines lettres sembleront trop proches ou trop éloignées les unes des autres.

2. Inter-lettre (Tracking)

Interlettre - Http5000

L’inter-lettre est donc un espace de taille égale entre toutes les lettres.

Si vous avez besoin que votre texte recouvre plus d’espace (sur un bouton par exemple), augmenter l’inter-lettre peut être la solution.

3. Interligne (Leading)

Interligne - Http5000

L’interligne est l’espace entre deux lignes de texte.

Le bon espacement d’interligne aide à rendre la lecture de l’internaute plus fluide le long d’une page, améliorant la lisibilité.

4. Glyphe (Glyph)

Glyphe - Http5000

Un glyphe est la plus basique des unités d’une police d’écriture qui peut avoir une signification. Cela inclut les lettres, numéros, signes de ponctuation et autres caractères.

Si vous pensez proposer votre site en plusieurs langues, vous devez vous assurer que la police d’écriture choisie comprend bien tous les glyphes des langues concernées.

5. Empattement (Serif)

Empattement - Http5000

L’empattement est la ligne qui apparaît au bas d’un caractère. En typographie, vous entendrez surtout le terme Serif pour nommer une police précise.

Traditionnellement, les polices avec empattement sont utilisées pour le corps du texte, particulièrement sur papier. Ainsi, utiliser une police avec empattement sur le corps de texte de votre site est une bonne idée si vous voulez faire penser à une page imprimée.

6. Sans empattement (Sans-Serif)

Sans empattement - Http5000

Une police sans empattement ne présente pas de ligne en bas de lettre.

Ces polices sans empattement sont parfaites pour les en-têtes. En effet, leur aspect plus “direct” et droit attire l’attention des internautes. Contraster une police sans empattement avec une qui en présente un est principe clé pour appareiller des polices.

A noter que les polices sans empattement sont plus simples à lire pour les dyslexiques.

7. Police d’écriture (Font)

Police d'écriture - Http5000

“Font” est le terme anglais, mais on l’utilise tout autant en français.
En typographie, la police d’écriture est le terme qui englobe le style, la taille et l’épaisseur d’un texte. Un exemple connu de police d’écriture : Arial (sans empattement), ou encore Time News Roman (avec empattement).

Le choix de la police influence la façon dont les internautes percevront votre texte. Chaque police renvoie à une personnalité, une ambiance, un ton.
A titre d’exemple, le Comic sans MS, dans ses débuts, était beaucoup utilisé pour son originalité. Depuis, à force d’être utilisée pour égayer les textes, cette police est maintenant évitée au possible par les professionnels car elle donne l’idée d’un texte peu sérieux, voire enfantin.
Toute police a donc un subtile (mais important) effet sur la façon dont les internautes recevront votre message.

8. Famille de polices (Font family)

Famille de polices - Http5000

Une famille de polices est un groupe de polices aux glyphes similaires. Une famille de polices peut ainsi contenir une police sans empattement, la même avec empattement, ou bien proposer un style ancien et un style moderne.

Par exemple : Arial, Arial Black, Arial Narrow, Arial Unicode MS et quelques autres variantes représentent une famille de polices.

Utiliser plusieurs polices d’une même famille est une bonne façon d’ajouter un contraste harmonieux entre vos en-têtes et le corps de texte.

9. Point de police (Point size)

Taille de polices - Http5000

Le point de police, ou point size, représente la taille relative d’une police.

Si on vous parle de Times News Roman point 12, le 12 sera évidemment pour renseigner sur la taille du texte.

Choisir la bonne taille de police est l’une des actions les plus faciles à réaliser pour améliorer la lisibilité d’une page web.

10. Graisse (Weight)

Graisse de polices - Http5000

La graisse, en typographie, concerne l’épaisseur des lettres. Un texte peut ainsi être, dans l’ordre d’épaisseur, “léger” (light), normal (regular), gras (bold), noir (black). Il existe bien d’autres déclinaisons de graisse en termes de polices d’écriture.

Chaque police peut proposer diverses épaisseurs et choisir la bonne graisse peut être essentiel dans la lisibilité de votre site.

11. Romain (Roman)

Police romain - Http5000

En typographie, romain est le terme utilisé pour parler d’une police à l’apparence “normale”, en opposition aux polices en italique ou en gras.

C’est évidemment l’apparence de texte que vous utiliserez pour la majorité de votre contenu en ligne. C’est bien entendu plus lisible et confortable pour les internautes qu’une police en italique ou en gras.

12. Italique (Italic)

Police italique - Http5000

L’italique décrit une police qui est penchée sur le côté.

L’italique sert surtout à insister sur certains termes, et est à utiliser avec modération sur votre site, afin de conserver sa puissance.

13. Gras (Bold)

Police gras - Http5000

Le gras décrit une police plus épaisse que la moyenne.

Tout comme l’italique, le gras est à utiliser avec parcimonie sur un site web, seulement pour les mots les plus importants ou pour les en-têtes.

14. Ligne de base / Ligne de pied (Baseline)

Baseline - Http5000

L’ironie avec ce terme, c’est que sa version anglaise est généralement mieux comprise que son pendant français.
La ligne de base est donc la ligne invisible où se “posent” les caractères.

La baseline permet d’avoir un point de référence pour parler d’autres aspects de la typographie, comme le jambage ou la hauteur d’x.

15. Hauteur de capitale (Cap Line)

Hauteur de capitale - Http5000

La hauteur de capitale est, à l’image de la ligne de base, la ligne invisible au-dessus des lettres, qu’elles ne dépassent pas

Comme la baseline, la hauteur de capitale est principalement un point de repère pour pouvoir parler d’autres éléments typographiques comme le jambage supérieur (ou hampe).

16. Ligne médiane (Midline)

Ligne médiane - Http5000

La ligne médiane est la ligne à l’exact milieu entre la ligne de base et la hauteur de capitale.

La ligne médiane est aussi un concept important pour appréhender le jambage supérieur.

17. Hauteur d’x ou Hauteur d’oeil (X-height)

Hauteur d'x - Http5000

Le nom de la hauteur d’x parle de lui-même : il s’agit de la hauteur de la lettre x minuscule dans une police.

La hauteur d’x permet d’avoir un point de repère pour décrire la taille (“grande” ou “petite”) d’une police.

18. Fût (Stroke)

Fut - Http5000

En typographie, un fût est le trait vertical d’une lettre.

La façon dont le fût se termine détermine si la police est avec ou sans empattement.

19. Stem

Stem - Http5000

Stem est l’appellation anglaise du fût vertical principal d’une lettre.

20. Cross stroke

Cross stroke - Http5000

On nomme ainsi l’endroit où un fût croise un stem. C’est le cas dans les lettres f et t.
Similaire à une traverse (arm), le cross stroke s’en différencie par le fait qu’il passe complètement à travers une lettre, quand une traverse est un trait horizontal qui n’est pas au milieu de la lettre.

21. Jambage inférieur (Descender)

Jambage inférieur - http5000

Le jambage inférieur concerne toute lettre qui descend sous la baseline. C’est le cas notamment des lettres minuscules g, j, q, y et p qui présentent donc un jambage inférieur.

22. Jambage supérieur (Ascender)

Jambage inferieur - Http5000

Le jambage supérieur concerne toute lettre qui monte au-delà de la hauteur d’x. Par exemple, les lettres minuscules b, f, d, k et h.

23. Hauteur de capital (Ascender line)

Jambage superieur - Http5000

En typographie, la hauteur de capital est l’espace entre la ligne médian et la partie supérieure du caractère.

24. Ligature

Ligature - Http5000

Une ligature est la combinaison de deux lettres en un seul glyphe. Par exemple le œ de œuf ou de cœur.

Si vous comptez écrire un texte sur votre site qui comprend des ligatures, vous devriez vérifier qu’elles fonctionnent avec les polices que vous utilisez.

25. Joint

Joint - Http5000

En anglais, le terme joint représente le point où un fût touche un stem.

26. Vertex

Vertex - Http5000

En typographie, le vertex représente la rencontre entre deux fûts pointant vers le bas. Par exemple, la pointe du V ou que les deux du W.

27. Pointe (Apex)

Apex - Http5000

L’apex est l’inverse du vertex. Il s’agit de la rencontre entre deux fûts, sous forme de pointe, dans la partie supérieur d’un glyphe. Par exemple, la pointe du A.

28. Crotch

Crotch - Http5000

En typographie, crotch est le terme anglais qui désigne un vertex (la rencontre entre deux fûts formant une pointe) à l’intérieur d’une lettre. C’est ainsi le cas de la pointe à l’intérieur de la lettre y.

29. Epaule (Shoulder)

Epaule - Http5000

L’épaule est une partie incurvée d’une lettre qui prolonge un fût. Par exemple, on en retrouve dans les lettres n, m et h.

30. Traverse (Arm)

Traverse - Http5000

Dans un glyphe, une traverse est un long fût horizontal, comme les traits supérieurs des lettres E, F et T, ou encore la barre inférieure du L.

31. Bar

Bar - Http5000

En anglais, le terme bar désigne un court fût horizontal comme dans les lettres f, A et t, par exemple.

32. Panse (Bowl)

Bolw - Http5000

La panse est un trait courbé ou ovale, fermé, qui renferme le contrepoinçon. On en retrouve, par exemple, dans les lettres b, e et o.

33. Contrepoinçon (Counter)

Contrepoincon - Http5000

En typographie, le contrepoinçon représente l’espace blanc à l’intérieur des glyphes telles que les lettres O ou e, par exemple.

Être attentif aux contrepoinçons aide à ajuster correctement le crénage, l’interligne et l’interlettre d’un texte.

34. Ouverture (Aperture)

Ouverture - Http5000

Littéralement traduit par “Ouverture”, l’aperture concerne un contrepoinçon ouvert, comme dans les lettres u ou C.

35. Terminaison (Terminal)

Terminaison - Http5000

La terminaison, comme son nom l’indique, concerne la fin d’un fût qui n’a pas d’empattement. Elle a souvent une forme arrondie ou effilée.

De bonnes terminaisons sont une façon d’ajouter de l’intérêt à une police sans empattement.

36. Ornement (Swash)

Ornement - Http5000

Un ornement est l’ajout d’un fût sur un glyphe en guise de décoration et d’embellissement.

Pour décorer un texte, lui donner un aspect fantaisiste, quelques ornements bien positionnés peuvent faire l’affaire.

37. Arc of stem

Arc of stem - Http5000

C’est le terme anglais qui désigne un fût courbé dans la continuité d’un stem droit. Par exemple, le bas du t dans certaines polices, ou encore le haut du f.

38. Diacritique (Diacritic)

Diacritique - Http5000

En typographie, la diacritique est l’accent qui accompagne une lettre pour en modifier le son correspondant. Par exemple, l’accent de rêve, sans lequel on prononçait le mot “reuve”.

La plupart des polices comprennent les diacritiques. Mais il est toujours bon de vérifier que la police de votre choix peut écrire correctement tout type d’accent (du simple é au ö plus rare).

39. Police de texte (Font text)

Une police de texte se dit d’une catégorie de polices reconnues pour mieux fonctionner en petite taille. Cela en fait une catégorie idéale pour le corps de texte.

40. Police d’affichage (Display text)

Police d'affichage - Http5000

On parle d’une police d’affichage pour un type de police conçu pour être optimal en grande taille. Ce qui en fait un type de police parfait pour les en-têtes (H1) et sous titres d’un texte (H2, H3, etc.).

41. Couleur du texte ou Gris typographique (Typographic color)

Gris typographique - Http5000

La couleur du texte renvoie en fait à sa relative luminosité/obscurité que perçoit l’œil à première vue. C’est ainsi l’impression produite sur la vision des internautes par la vue d’ensemble de votre texte.

Selon l’interligne, le crénage, l’interligne, la police, et bien d’autres variantes, vos blocs de texte paraîtront ainsi plus ou moins sombre.
Quand vous créez/ajoutez le contenu d’une page, assurez-vous que les titres et le corps de texte présentent une différence de gris typographique visible.

42. Contraste (Constrat)

Contraste - Http5000

En typographie, le contraste est la différence perçu entre les polices. Le contraste dépend du contexte, mais on y retrouve des éléments récurrents tels que la taille, le poids, la famille, le mode de la police concernée.

En terme de site web, un contraste approprié entre les différentes polices de votre page optimisera la lisibilité de votre contenu.

43. Corps de texte (Body copy)

Corps de texte - Http5000

Le corps de texte est la partie principale de votre texte, en opposition avec les en-têtes et sous-titres.

Soyez particulièrement soigneux dans le choix de votre police de corps de texte, qui doit être très attractive et lisible. En effet, c’est sur cette partie du texte que les internautes liront et passeront donc la plupart de leur temps sur votre site. C’est donc une présentation et une lisibilité optimales qu’il faut viser.

44. En-tête (Heading)

Entete - Http5000

L’en-tête est le texte qui définit les différentes sections d’une page. L’en-tête utilise généralement une police et une taille de police différentes de celles du corps de texte, pour rendre la distinction claire au possible.

Une en-tête est essentielle pour casser un corps de texte trop long (qui dépasse les 2-3 paragraphes) ou quand l’on souhaite montrer une séparation claire entre deux parties d’un texte.

45. Sous-titres (Subheadings)

Sous-titres - Http5000

Comme l’en-tête, les sous-titres servent aussi à morceler un texte pour le rendre plus clair visuellement et plus attractif. Comme l’indique le “sous”, il s’agit de titres plus petit que l’en-tête et qui doivent apparaître après cette dernière dans un corps de texte.

Pour les pages ou articles vraiment longs, les sous-titres sont utiles, voire capitaux, pour créer des sections claires et aérées. En plus de rendre le texte plus attractif pour l’internaute, segmenter votre texte par des sous-titres lui permettra d’atteindre plus vite la partie du texte qui l’intéresse. En effet, il lui suffira ainsi de lire les sous-titres pour voir lequel contient l’information qu’il recherche.

46. Trait d’union (Hyphen)

Tiret - Http5000

Petite ligne horizontale qui n’est plus à présenter, le trait d’union sert principalement aux mots composés et dans le cas où un mot est coupé en fin de ligne.

47. Tiret semi-cadratin (En-Dash)

Tiret semi-cadratin - Http5000

Le tiret semi-cadratin est un tiret horizontal environ de la même largeur qu’un N majuscule dans une police. En général, sur les logiciels de traitement de texte, le tiret du 6 ( – ) se change de lui-même en tiret semi-cadratin quand il se trouve entre deux mots. Dans certains cas, il faut noter deux tirets du 6 à la suite ( — ).
Le tiret semi-cadratin sert généralement entre deux dates (1992 – 2016).

48. Tiret cadratin (Em-Dash)

Tiret cadratin - Http5000

Le tiret cadratin est un tiret plus long. On l’utilise surtout pour séparer deux idées dans une phrase (à l’image des virgules) ou bien pour ajouter une information supplémentaire (à l’image de parenthèses).

En tapant trois tirets — WordPress génère automatiquement un tiret cadratin. Hors WordPress, dans les logiciels de traitement de texte, il est aussi possible d’obtenir ce tiret en appuyant simultanément sur la touche Alt Gr et le – du pavé numérique.

49. Alignement (Alignment)

Alignement - Http5000

L’alignement décrit la position du texte par rapport à la marge (que ce soit sur papier ou en numérique).

On retrouve généralement trois types d’alignement : Aligner à gauche, Centré, Aligner à droite. L’alignement à gauche est celui par défaut et est adapté pour tout langage où la lecture se fait de gauche à droite.

50. Justifié (Justified)

Justifier un texte - Http5000

En typographie, il existe un quatrième type d’alignement : le texte justifié. Dans ce cas-ci, le texte est aligné et droit à droite et à gauche.

Un texte en justifié n’est pas toujours conseillé pour un site web. C’est surtout un alignement de texte qu’on utilise dans les romans et les journaux. Toutefois, si le but est de créer un site proposant une esthétique similaire à un livre, un texte justifié peut être un bon format.

Des termes de typographie importants pour un contenu efficace

Les termes techniques de typographie présentent des concepts fondamentalement utiles en matière de site web.

Avoir certaines connaissances en la matière vous permettra ainsi de mieux connaître l’univers du webdesign, d’influencer l’humeur des internautes qui vous liront, d’optimiser l’impact de vos contenus les plus importants.
Nous espérons que cette liste de 50 termes francophones et anglophones vous permettront d’y voir plus clair dans ce domaine. Et d’en tirer le meilleur pour proposer du contenu attractif sur votre site, car un contenu bien traité et bien ciblé est un des facteurs clés du succès d’un site.

 

(Librement traduit de Elegentthemes ; Photos de Elegentthemes et Wikipedia)

Centre de préférences de confidentialité

Cookies

En poursuivant sur ce site, vous confirmez accepter l'utilisation de cookies (et de Google Analytics ou tout autre module de ce type, au cas par cas) dans le but d'améliorer votre expérience utilisateur/de récolter des statistiques utilisateurs et/ou tout autre raison pour laquelle on utilise les cookies.

De plus, nous recevons et enregistrons automatiquement des informations à partir de votre ordinateur et navigateur (adresse IP, logiciels, matériels et pages demandées/visitées). Nous utilisons aussi des cookies web afin d’améliorer l’accès au site http5000 et identifier les internautes réguliers. Les cookies nous aident également à optimiser l’expérience utilisateur (via le suivi et ciblage des intérêts).

http5000 - Agence de communication lyonnaise depuis 2000

Restons en contact

Des infos pertinentes, des idées, pas de spam, laissez nous votre mail.

Inscription confirmée, merci!

Pin It on Pinterest