Typographisme

Un site tenu par des amoureux de la typo, sur le Web comme ailleurs.

Les espaces typographiques et le web

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 avantPonctuationEspace après
AucunePoint
« . »
Espace justifiante
AucuneVirgule
« , »
Espace justifiante
Espace insécable[3]Deux-points
« : »
Espace justifiante
Espace fine insécablePoint-virgule
« ; »
Espace justifiante
Espace fine insécablePoint d’exclamation
« ! »
Espace justifiante
Espace fine insécablePoint d’interrogation
« ? »
Espace justifiante
Espace justifianteGuillemet ouvrant
«
Espace insécable
Espace insécableGuillemet fermant
»
Espace justifiante
Espace justifianteParenthèse ouvrante
« ( »
Aucune
AucuneParenthèse fermante
« ) »
Espace justifiante
Espace justifianteCrochet ouvrant
« [ »
Aucune
AucuneCrochet fermant
« ] »
Espace justifiante
AucuneTrait 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 Entité XML Taille
Espace justifianteU+0020

1/4em
Espace insécableU+00A0  1/4em
Demi-cadratinU+2000
 1/2em
CadratinU+2001
 1em
Demi-espace fixeU+2002  1/2em
Espace fixeU+2003  1em
Espace fineU+2009  ±1/6em
Espace fine insécableU+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 :

  1. Pensez à mettre les caractères d’espace dans vos fontes Web
  2. 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 :

  1. 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).
  2. 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 »).
  3. 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.

  1. On parle d’ailleurs aussi parfois « d’espace-mot » [retour]
  2. 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]
  3. Oui, oui, vous avez bien lu, il n’y a pas d’erreur, c’est bien une espace insécable ordinaire. [retour]
  4. 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 concernant l’utilisation des tirets en typographie [retour]
  5. Ah ben vous voyez, si vous voulez, vous pouvez. [retour]
  6. 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]
  7. 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]

dans Règles & usages Par Jeremie