Typographisme - Règles & usages

Les espaces typographiques et le web

Jeremie — Wed, 14 Sep 2011 10:00:00 +0200

En typographie, il existe tout un tas de règles sur la gestion des espaces entre les mots et les caractères. Malheureusement, le Web est extrêmement fruste de ce point de vue là, à ce qu’il paraît. Mais qu’en est-il réellement ? Précédemment, Je vous ai parlé des ligatures qui sont une des réponses (parmi bien d’autres) à la question des espaces entre les lettres. Cette fois-ci, nous allons nous pencher sur la question des espaces entre les mots. Est-ce qu’il se pourrait qu’on puisse utiliser l’espace fine insécable… en vrai ?

Les différents types d’espaces

Avant de s’occuper de Web et de navigateurs, revenons un petit peu aux bases de la typographie. L’espace (masculin) entre les mots est composé d’espaces (féminin) de taille variable. La taille de ces espaces interstitielles dépend des règles et usages typographiques propres à chaque langue, voir à chaque culture.

Règles d’usage françaises

En France, on utilise couramment 3 sortes d’espaces :

L’espace justifiante : c’est l’espace qu’on place entre les mots [1]. Elle est dite « justifiante » car sa taille servira de variable d’ajustement lorsque le texte sera justifié (c’est particulièrement vrai sur le Web où, pour le moment, l’espace entre les caractères, l’approche, n’est pas du tout utilisée pour corriger les problèmes visuels du texte justifié. Quant à la césure… mais c’est une autre histoire).
L’espace insécable : cette espace a la particularité de préserver la continuité entre le mot qui la précède et le mot qui la suit. Ainsi, si l’un des deux mots « passe à la ligne », c’est en fait l’ensemble « mot, espace insécable, mot » qui passe à la ligne.
L’espace fine : il s’agit d’une espace qui est environ deux fois plus étroite que l’espace justifiante ordinaire. Dans la plus part des cas, elle est considérée comme insécable car son usage gravite essentiellement autour de la ponctuation et il n’y a rien de plus laid qu’un caractère de ponctuation orphelin [2].

Pour les espaces liées à la ponctuation, l’imprimerie nationale française prescrit les usages suivants :

Espace avant	Ponctuation	Espace après
Aucune	Point « . »	Espace justifiante
Aucune	Virgule « , »	Espace justifiante
Espace insécable[3]	Deux-points « : »	Espace justifiante
Espace fine insécable	Point-virgule « ; »	Espace justifiante
Espace fine insécable	Point d’exclamation « ! »	Espace justifiante
Espace fine insécable	Point d’interrogation « ? »	Espace justifiante
Espace justifiante	Guillemet ouvrant «	Espace insécable
Espace insécable	Guillemet fermant »	Espace justifiante
Espace justifiante	Parenthèse ouvrante « ( »	Aucune
Aucune	Parenthèse fermante « ) »	Espace justifiante
Espace justifiante	Crochet ouvrant « [ »	Aucune
Aucune	Crochet fermant « ] »	Espace justifiante
Aucune	Trait d’union[4] « - »	Aucune

Ces règles sont valable pour la France uniquement et ne sont jamais que des recommandations. À titre d’exemple, le Canada francophone ignore les espaces avant les points-virgules, les points d’exclamation et les points d’interrogation. La Suisse romande, de son côté, préfère l’espace fine insécable avant le deux-points [5].

Encodage et normalisation

Historiquement, la référence pour calibrer la taille d’une espace est le cadratin. À l’époque du plomb, un cadratin était un blanc carré (« quadratus »), d’une largeur égale à la force de corps, correspondant visuellement à la largeur de la lettre « M » capitale [6] (d’où la désignation anglaise du cadratin, em space). Aujourd’hui, dans l’univers numérique où la taille d’une fonte est variable, le cadratin correspond à la force de corps que vous utilisez. Cela signifie que si vous utilisez une police d’une hauteur de 12px, un cadratin fera 12px de large. La norme CSS définit d’ailleurs une unité de mesure qui correspond à cette définition du cadratin : le « em » et plus récemment le « rem ».

Les différentes espaces sont considérées comme des caractères à part entière [7] et à ce titre elles font l’objet d’une codification dans la norme Unicode. Ainsi, toute espace peut être « écrite » dans un document HTML, directement en saisissant le caractère avec votre clavier (ce qui n’est pas toujours très simple) ou en utilisant les entités HTML et/ou XML pour les écrire explicitement.

Le tableau qui suit détaille les principales espaces typographiques utiles et le cas échéant leur matérialisation pour le Web (il en existe beaucoup d’autres, souvent utiles dans d’autres langues que le français ou dans des cas d’usages très, très spécifiques, je ne les ai pas détaillées ici). Les tailles sont indicatives et peuvent varier selon les fontes (c’est particulièrement vrai dans le cas de l’espace fine)

Nom	Code Unicode	Entité HTML	Taille
Espace justifiante	U+0020		1/4em
Espace insécable	U+00A0		1/4em
Demi-cadratin	U+2000		1/2em
Cadratin	U+2001		1em
Demi-espace fixe	U+2002	&ensp;	1/2em
Espace fixe	U+2003	&emsp;	1em
Espace fine	U+2009		±1/6em
Espace fine insécable	U+202F		±1/6em

Le support navigateur

Bien. Une fois qu’on s’est dis ça, que ce passe-t-il dans les navigateurs si on utilise autre chose que l’espace justifiante ?

Un bon exemple valant mieux qu’un long discours, j’ai créé une page de test pour toutes ces espaces (±1Mo). Faites attention, j’ai utilisé la Linux Libertine en version non-optimisé, la page peut donc mettre un peu de temps à ce charger si vous avez une petite connexion.

Qui affiche quoi ?

Si vous ne faites rien de spécial, que va-t-il se passer si vous utilisez toutes ces espaces dans vos textes ? Et bien cela va dépendre à la fois de l’OS (beaucoup) et du navigateur (un petit peu).

Pour résumer simplement, sous Windows XP, c’est n’importe quoi. A l’exception de l’espace insécable qui est bien prise en charge par tous les navigateurs, vous aurez à la place de toutes les autres espaces soit des espaces justifiantes dans le meilleur des cas, soit un symbole de caractère introuvable dans le pire des cas (généralement sur l’espace fine insécable).

Vient en suite Mac OS (Snow Leopard car je ne suis pas encore passé sous Lion) qui permet à tous les navigateurs d’afficher les espaces insécables et les espaces fines (insécables ou non) mais pas les espaces fixes, demi-fixes, cadratin et demi-cadratin (là aussi, vous aurez une espace justifiante à la place).

Et puis enfin, il y a Windows 7 qui est le meilleur en la matière en proposant un support de toutes les espaces sans aucune exception pour tous les navigateurs.

Je n’ai pas fait de test avec Linux car il y a trop de distributions différentes pour que j’en ai le temps, mais les commentaires sont là pour que vous nous fassiez part de vos retours d’expérience.

Bon ! Globalement, à ce moment de votre lecture, vous devriez vous dire « Eh ben ! Bonjour la chienlit, on va peut-être arrêter les frais. », ou un truc du genre. Que nenni, il ne faut pas être défaitiste, des solutions existes.

Vous noterez ici que j’ai fait une généralisation par les OS au lieu de me poser la question des navigateurs. Si on prend des navigateurs multiplateformes comme Firefox, Chrome et Opera, on peut se poser la question : « Mais pourquoi leur comportement n’est-il pas consistant d’un OS à l’autre ? » Et bien, c’est tout simple, la différence fondamentale tient aux fontes « de base » qui sont mises à leur disposition par les OS. Les fontes de base étant celles qui sont utilisées dans les feuilles de styles CSS sous les appellations génériques : « serif », « sans-serif », « cursive », « fantasy » et « monospace »

La différence fondamental entre ces fontes de base, selon les OS, tient à la présence ou non des caractères correspondant à ces espaces dans les fichiers de fonte. Et oui. Si votre fonte dispose des caractères d’espace appropriés, tous les navigateurs affichent correctement les différentes espaces. C’est même le cas du vilain petit canard de la typographie Web, Opera, depuis la version 11.5 (avant il était réfractaire à l’espace fine insécable même quand elle était disponible).

Rajouter les espaces manquantes

Alléluia, la voila notre solution. Il suffit juste de rajouter les caractères manquant et c’est gagné.

La mauvaise idée

Une solution pour éviter ces problèmes de caractère manquant pourrait être d’utiliser une fonte spéciale ne contenant que les caractères d’espace. Ensuite, il suffirait de se reposer sur la cascade CSS pour que tout devienne merveilleux :

@font-face {
    font-family: "mesEspaces";
    src: url('ma-web-fonte-special-espaces.ttf');
}

@font-face {
    font-family: "maJolieFonte";
    src: url('ma-jolie-fonte-sans-espaces.ttf');
}

body{
    font-family: "mesEspaces", "maJolieFonte", sans-serif;
}

Sur le papier, ça a l’air prometteur, mais malheureusement, cette solution ne fonctionnera pas, ni avec Opera, ni avec Internet Explorer 6 et 7, qui n’honorent pas la pile de substitution des fontes. Ils vous afficheront bien les espaces, mais tous les autres caractères seront affichés comme des caractères manquant (ou avec une fonte qui n’est pas celle attendue).

La bonne idée

Ainsi donc, l’utilisation des fontes disponibles directement au sein des OS (ce qui inclus toutes les fontes « Web safe ») va vous empêcher d’utiliser correctement toutes les espaces. Ceci dit, si vous utilisez des fontes personnalisées, inclus via les déclarations @font-face, qui comportent bien tous les caractères, y compris les espaces, vous n’aurez absolument aucun problème. Tous les navigateurs les afficheront correctement. C’est donc ça la solution : Prenez le contrôle de vos fontes et assurez vous qu’elles comportent toujours tous les caractères dont vous avez besoin, y compris ceux qui ne se voient pas. Pour cela, n’hésitez pas à utiliser des outils comme le générateur de fonte Web du site fontsquirrel.com ou, si vous êtes équipé, à l’aide d’outil d’édition de fontes (et un jour peut-être, les fondeurs se décideront à commercialiser des fontes avec des jeux de caractères et des options OpenType à la demande… mais ce n’est pas pour tout de suite)

Conclusion

En guise de conclusion, on peut donc le dire, oui, vous pouvez utiliser les espaces fines sur le Web. Cela demande, certes, un peu de préparation et d’attention, mais ça n’a absolument rien d’irréaliste ni d’infaisable. Ça se fera sans douleur si vous respectez deux règles de mise en œuvre simples :

Pensez à mettre les caractères d’espace dans vos fontes Web
Utilisez les plugins de vos CMS préférés pour gérer les règles typographiques à la place des contributeurs (qui n’y connaissent généralement rien)

Mais si ce n’est que ça, pourquoi est-ce si difficile d’utiliser toutes ces magnifiques espaces plus subtiles les unes que les autres ? Cela tient à trois problèmes :

De manière générale les polices « Web safe » ne disposent pas toujours de tous ces caractères spéciaux (il y a de sérieuses variations d’un OS à l’autre comme on l’a vu).
Produire certaines de ces espaces à l’aide du clavier est, au pire impossible, au mieux diablement compliqué (sauf, bien sûr, l’espace justifiante pour qui il suffit d’utiliser la touche « Espace »).
Les outils de la chaîne de production Web (IDE, CMS, etc.) ne proposent pas (ou si peu) de mécanismes simples pour introduire ou substituer automatiquement ces caractères (même des outils comme SmartyPants ou les quelques rares plugins de vos CMS préférés restent assez rugueux à utiliser).

Dans tous les cas, comme souvent avec CSS, il vous faudra vivre de compromis et à moins que vous n’ayez un cas d’usage très particulier, n’essayez pas d’avoir un contrôle absolu sur cette question (en particulier, ne vous embêtez pas avec Opera si votre marché n’est pas significatif sur ce navigateur). Avoir une espace insécable ordinaire à la place d’une espace fine insécable est, dans de très nombreux cas, une dégradation tout à fait acceptable. Comme souvent, le design Web consiste à repousser les idées préconçues pour toujours aller vers le mieux, mais sans pour autant s’enliser dans une rigidité inutile. Tout cela évolue et s’améliore de jour en jour alors prenez de bonnes habitudes et mettez des espaces fines là ou il devrait y en avoir.

On parle d’ailleurs aussi parfois « d’espace-mot » [retour]
Un élément orphelin, caractère ou mot, est un élément qui se retrouve seul en début ou fin de ligne. On qualifie également d’orphelins les paragraphes ou lignes isolées en début ou fin de page. [retour]
Oui, oui, vous avez bien lu, il n’y a pas d’erreur, c’est bien une espace insécable ordinaire. [retour]
Pour la différence entre les différents tirets typographiques et les règles d’espace qui les accompagnent, je vous renvoie à l’excellent article du blog de Flavien Ganter : Petite mise au point concerna nt l’utilisation des tirets en typographie [retour]
Ah ben vous voyez, si vous voulez, vous pouvez. [retour]
C’est le mot savant pour dire « majuscule ». Pour dire « minuscule » on emploie l’expression « bas-de-casse »… normalement, avec ça, vous pouvez faire illusion quelques minutes dans une discussion sur la typographie, même si vous ni connaissez rien. :) [retour]
Ce sont des caractères qualifiés, assez justement, de « non imprimable » au même titre que les tabulations ou les retours à la ligne. [retour]

Une question délicate : les capitales dans les titres

Anne-So — Sat, 06 Nov 2010 10:33:00 +0100

À la demande générale, une tentative de synthèse des (pas tout à fait) 478 règles de l’Imprimerie nationale pour la composition des titres. Je tire directement ces recommandations de l’ouvrage de référence Lexique des règles typographiques en usage à l’Imprimerie nationale, bouquin à peine rébarbatif et indispensable si l’on a le souci du bonfrança™ à l’écrit.

Règle générale

Lorsqu’on cite le nom d’une oeuvre d’art, d’un ouvrage ou d’une publication dans du texte courant :

On reproduit exactement la dénomination choisie par l’auteur.
On utilise l’italique.
On met une capitale au moins au premier mot.

Par exemple :
En ne considérant Piège de cristal qu’à l’aune du maoïsme chancelant, on oublie trop rarement de mentionner que ce long-métrage est une interprétation moderne de Huis-clos, et donc une oeuvre profondément existentialiste.

Commençons par le début :
traitement de l’article défini initial

Il arrive fréquemment que le titre commence (ou semble commencer) par un article. Il y a alors trois cas de figure :

L’article fait partie du titre et il est écrit en entier dans la même langue que le titre[1], Le Monde ou The Night before Christmas par exemple. L’article est composé en italique et il prend une capitale.
L’article fait partie du titre mais il ne figure pas en entier, comme dans « J’ai envoyé une lettre d’insultes à un journaliste du Figaro. » Ici, l’article original disparaît dans la contraction « du », il doit donc être composé en romain, sans capitale.
L’article défini ne fait pas partie intégrante du titre, il est là par commodité, pour désigner l’ouvrage, l’Odyssée par exemple. Dans ce cas, l’article reste en romain et en bas-de-casse.

Si l’ouvrage dont vous citez le titre est un de vos proches et que vous l’appelez par son petit nom, l’article reste en romain, sans capitale, comme dans la phrase : « Il ne peut rien m’arriver, j’ai le Guide dans ma poche et une serviette de bain dans mon sac. » (et ce, que l’article fasse ou non partie intégrante du titre).

Ça va ? Jusqu’ici vous suivez ? Fort bien. Parce que c’est pas fini.

Emploi des capitales dans les titres

Si nos ~~ennemis héréditaires~~ amis anglais se simplifient l’existence en mettant des capitales partout ou presque, ce qui est bien souvent assez disgracieux mais c’est leur problème, nous autres francophones avons une palanquée de subtilités à connaître (autrement dit, bouquemarquez ce billet ou faites un coin à la page 169 du Lexique).

Le cas facile : le titre ne commence pas par un article défini

On arrête tout de suite de se poser des questions, on met une capitale au début et le reste en bas-de-casse. Sauf en cas de nom propre, naturellement. Quelques exemples :

Ding ding dong, sur la balustrade
Fantaisie finale VII
Ne dis pas à ta mère que j’ai cassé la cafetière

L’autre cas.

On prend une grande respiration, et on y va. Après tout, il n’y a que quatre sous-cas.

Le titre est une phrase, par exemple Le petit lapin est malade (mais en fait c’est juste une appendicite et après il va mieux et l’infirmière est très gentille). On se contente d’une capitale au premier mot, l’article donc.
Vous citez le titre d’un ouvrage spécialisé pour vous la raconter grave, comme Le rire de Spinoza. Tout pareil, une capitale au début, et c’est tout. On n’est pas là pour rigoler.
Le titre présente une symétrie évidente, comme dans l’ouvrage de référence de Dan Brown Anges et Démons. Dans ce cas, on met une capitale au premier mot, puis au terme avec lequel il est mis en parallèle.
Votre titre ne rentre dans aucune des catégories ci-dessus, ce qui vous déçoit un peu, on le comprend aisément. Vous devez alors mettre une capitale à l’article, bien sûr, puis au premier nom, mais aussi aux adjectifs et adverbes qui précèdent ce nom. Ce qui nous donne, par exemple : La Triste Histoire de Marguerite qui jouait si bien du violon.

Quelques bonus

Parce que vous commencez à aimer ça, je le sais.

Titres doubles

Les titres doubles se répartissent en deux cas :

Les titres des oeuvres qui parlent d’une oeuvre (qui parle d’un oeuvre), par exemple, Comment j’ai réécrit les Frères Karamazov parce que Dostoïevski s’était trompé.
Les titres d’oeuvres des auteurs indécis, comme Philosophie minimaliste ou l’Art d’améliorer les nouilles instantanées.

Si vous êtes observateur, vous aurez remarqué que l’on met les capitales comme si le second titre était seul, à l’exception de l’article défini (s’il y en a un) qui reste en bas-de-casse. Et vous aurez tout compris.

Titres successifs

C’est un cas que l’on rencontre souvent lorsqu’on rédige une bibliographie, lorsqu’on veut, par exemple, citer un article d’une revue. La vénérable Imprimerie nationale suggère le modèle suivant : « Titre de l’article », Titre de la revue. Comme ça vous ne vous tromperez pas lors de votre prochain compte-rendu de lecture de La Vie du rail.

Titres à laisser en romain

Pour terminer, parce qu’il faut bien, une liste d’exceptions (cris de foule en délire). Les titres des ouvrages suivants ne se composent pas en italique mais en romain bien droit dans ses bottes :

« Les noms des codes et recueils semblables », comme le dit joliment le Lexique : le Code civil, le Décalogue, etc.
Les noms des actes officiels
Les titres des livres sacrés
En art, les sujets un peu marronniers du genre la Crucifixion.

Je sais qu’on s’amuse bien et qu’on voudrait que cette fête n’ait pas de fin, mais point trop n’en faut, et c’est pourquoi je vais attendre un petit peu avant de vous parler de l’abréviation des grades militaires, sujet tout aussi croustillant sinon plus (le prestige de l’uniforme, tout ça).

1. Je précise dans la même langue que le titre, parce que si vous écrivez « Je lis le Times et le Guardian tous les matins », l’article défini le, pourtant traduction du The qui fait partie du titre original, doit rester en bas-de-casse (et puis je ne vous crois pas une seule seconde). [retour]