50 termes de typographie à connaître pour optimiser le contenu de son site

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 :

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.

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.

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é.

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.

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.

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 .

“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.

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.

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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

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.

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.

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.

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

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.

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

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.

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.

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.

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.

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.

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

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.

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.

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

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.

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.

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.

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).

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.

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.).

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.

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.

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.

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.

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.

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.

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).

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.

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.

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.

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)