Historique

On a retrouvé l'apostrophe dans des textes médiévaux datant de 1180. Elle disparut avec le latin classique mais perdura en latin populaire. En 1501, Alde Manuce - connu pour l'impression du premier livre en caractère italique - publia un texte ancien en italien doté de l'apostrophe. Ce signe d'élision est alors peu utilisé en français. En 1533, Geofroy Tory, est le premier imprimeur français a en faire un usage systématique. Peu de temps après, le caractère plomb fait partie intégrante du meuble du typographe et devient obligatoire en français [¹].

Règle grammaticale

En français, l'apostrophe sert d'élision. Elle remplace la voyelle finale quand le mot suivant commence par une voyelle ou un h muet. On dit « l'école » pour « la école ». Il existe de très rares exceptions comme (le) onze, (le) yacht, (le) oui ou (le) yucca. L'apostrophe précède des noms communs mais aussi des noms propres.

Dans des cas particuliers, l'élision est à éviter notamment pour les abréviations.

Une forme controversée

Voici donc la partie plus délicate. D'après certains internautes, il existe une apostrophe droite (dite anglaise) et une apostrophe courbe (dite française). Dans cette affirmation fondé sur très peu de chose, il serait normal de préférer la version adaptée à sa langue. Autrement dit, nous sommes tous en train d'utiliser une apostrophe anglaise sans même le savoir. Voilà ce qu'écrit Jacques André à propos du tracé...

Les premières apostrophes imprimées ont un dessin inspiré de l’apostrophe grecque, puis ressemblent à un « point crochu » selon Tory, ou à un « demi-cercle » selon Estienne. Mais très vite, elle prendra la forme d’une virgule, forme qu’elle gardera jusqu’à nos jours. (...) L’apostrophe traditionnelle n’est pas obligatoirement courbe comme on le lit parfois : il suffit de regarder les linéales anciennes pour s’en rendre compte. En revanche, elle est toujours oblique...

Jacques André

Le français écrit use abondamment des apostrophes. Les Italiens ont recours à ce signe moins souvent. Quand à l'anglais, l'apostrophe est réservé à un tout autre usage et se fait rare dans les textes. Néanmoins, on trouve l'apostrophe tout en rondeur dans des textes manuscrits anciens de langue anglaise. Preuve en est que la verticalité du signe n'est pas une particularité des Anglo-saxons.

Jusqu'à preuve du contraire, la forme du caractère est dessinée par le typographe. Les traits sont personnalisés pour coller au mieux aux caractéristiques de sa fonte. Au début de la typographie plomb, l'apostrophe est rare. Le caractère gravé fait son apparition en 1533. La forme ressemble assez fidèlement à la virgule à quelques variantes subtiles.

(...) à cause d’un effet d’optique, phénomène fréquent en typographie, l’apostrophe doit être redessinée un peu plus petite que la virgule et souvent avec quelques modifications dans la forme afin de préserver la couleur ou afin de mieux épouser à leur niveau respectif le contour différent des caractères avoisinants.

Jacques André

L'apostrophe dactylographique

Ils sont bien beaux ces signes graphiques mais ils ne correspondent pas à l'apostrophe du clavier. En effet, le symbole du clavier est souvent très droit, sans harmonie avec la typographie. Cette "verticalisation" est à mettre sur le compte de la machine à écrire. D'origine anglo-saxonne, le créateur a cru bon d'ôter tout signe distinctif de l'apostrophe. Débarrassé de sa courbe, elle pouvait prendre le rôle d'autres signes et libérer de la place sur le clavier. Le signe filiforme se chargeait de l'élision mais aussi de l'ouverture et la fermeture des guillemets. Ce caractère mutant et multifonction est le résultat d'une adaptation par rapport à une contrainte physique.

Il est amusant de remarquer la présence de l'accent grave dans la table ASCII [²] mais pas de l'accent aigu. La plupart des informaticiens anglophones ne l'utilisaient pas. En cas de nécessité, l'apostrophe droite occupait ce rôle. Il faut attendre la table ASCII étendu pour voir apparaître un accent aigu.

Choisir le bon caractère pour le web

L'apostrophe sur le clavier d'ordinateur (y compris le clavier Azerty français) est définit dans la table des caractères ASCII de base sous l'entité numérique '. Il désigne effectivement l'apostrophe mais on lui attribue également d'autres fonctions.

En ASCII, il (ndlr U+0027 ou 039) représente un signe de ponctuation (un guillemet-apostrophe gauche ou droit, une apostrophe proprement dite, une ligne verticale ou le signe prime) ou encore un signe modificateur (un accent aigu ou un diacritique apostrophe).

Unicode 3.1 [³]

Étonnant de voir autant d'attributions pour un signe linguistique qui a toute sa place dans la langue française. Dans ces conditions, il n'est pas surprenant de le voir bien droit et dépourvu de tout attribut distinctif. Il ne peut être courbe si dans la même foulée il remplit la fonction d'un guillemet gauche ou le signe prime. On peut se demander pourquoi il n'a pas été redessiné dans l'ASCII étendu tout comme ce fut le cas avec les guillemets français.

La polysémie des caractères est un sujet délicat et difficile à trancher. D'autres signes possèdent des usages différents, comme le trait d'union: liant dans un mot composé, signe de la césure, signe de la soustraction.

Apostrophe dans le code HTML

Caractère	Entité numérique	Entité nommée	Nom
	'	—	apostrophe
	’	’	right quote
	’	—	right single quote

De l'apostrophe à la volée

Comme le recommande Unicode, nous devrions utiliser le caractère Unicode 8217 (et revoir le code de toutes les pages en archives !). Dans la pratique, cela pose évidemment un soucis. Il est inimaginable de faire l'impasse sur un caractère directement accessible au clavier pour le remplacer par un code barbare et abscons. Les utilisateurs de Mac ont plus de chance grâce au raccourci clavier Alt + Maj + '. Pas certain que le quidam y comprenne quelque chose.

Certains CMS convertissent automatiquement les apostrophes. C'est le cas de WordPress depuis sa version 2.5. Les automatismes c'est bien, mais ils ont leurs limites [⁴]. Par exemple, la recherche d'une expression sur une page web ne donnera pas le même résultat si l'accent n'est pas identique. Autre risque d'erreur, les programmeurs seront fort déçus en constatant que leur code n'est plus opérationnel à cause de la conversion.

Conclusion

Nous devrions faire honneur à la lettre et à notre langue française par des apostrophes élégantes. Les erreurs du passé - prises en habitude - nous contraignent à la régression. Une niche de passionnés, sensibilisés à cette finesse typographique, ont adopté des solutions sans être tous d'accord entre eux. Quant au grand public, à défaut d'avoir un clavier Azerty digne de ce nom, les éditeurs de contenu devraient les assister par un remplacement automatique.

[¹] « Funeste destinée: l'apostrophe détournée » Jacques André (PDF - 5 Mo)
[²] Les tableaux ASCII
[³] Unicode - chapitre 7 (PDF - 111 Ko)
[⁴] À lire: « WordPress et ses guillemets »

Lucida Console est la police par défaut des documents textes dans Windows. C'est également la typographie du texte lors d'un plantage de l'ordinateur PC et son fameux écran bleu de la mort. Depuis Mac OS X, le Lucida Grande est devenu la police standard.

Pour compléter la lecture: « Notes on Lucida designs »

Dans l'exemple ci-dessous, le choix des couleurs est problématique d'un point de vue du contraste. Pour s'en rendre compte, j'ai passé la capture en noir et blanc. Le titre de section (1: luminosité 20 %) a du mal à se détacher du fond en raison de sa faible luminosité. Par contre, le texte (2: luminosité 100 %) obtient un contraste maximum. La teinte du lien visité (3: luminosité 40 %) est d'une meilleure lisibilité. Inversement, la couleur de l'hypertexte (4: luminosité 20 %) est problématique pour la lecture. Le dernier lien (5: luminosité 40 %) est de la même couleur mais avec un niveau d'éclairage doublé.

Capture Études photographiques

Capture en niveaux de gris

On remarque une évidence: plus la différence de luminosité est importante et plus le contraste est fort. Sur cette base, on pourrait en déduire une théorie bête et méchante. On aurait donc automatiquement du noir à 0 % de luminosité et une autre couleur à 100 % de luminosité. Avec un fond coloré et un texte noir, cela fonctionne relativement bien sauf avec des couleurs très saturées. Dans le cas inverse (fond noir et texte coloré), les résultats sont satisfaisants à l'exception des tons bleus.

Outre les accords de goût discutables et les problèmes de lisibilité flagrants cités précédemment, un fort contraste agresse l'œil, diminue le confort de lecture et augmente la fatigue oculaire. À cela, il faut ajouter l'impact négatif de la luminosité sur écran. Sur ce type de support, la couleur n'est pas la combinaison de pigments mais le mélange d'une lumière plus ou moins forte. L'absence de lumière affiche du noir et la projection des trois faisceaux à leur maximum donne du blanc. Cette intensité lumineuse influence la rapidité de lecture et la fatigue de l'œil. Qu'on se le dise une fois pour toutes: à l'écran, le texte noir sur fond blanc n'est pas le meilleur choix. Un fond faiblement assombri ou coloré est une solution mais souvent un inconvénient par rapport à l'intégration d'images. Le mieux pour un fond clair c'est d'utiliser une couleur de texte foncée légèrement éclaircie.

Peter Gabor est le seul blogueur - à ma connaissance - à écrire ses longs paragraphes dans différents coloris. On pourrait croire à une méconnaissance de la chose mais il se fait que Peter est passionné de typographie et expert dans la discipline. « Ces changements de couleurs permettent à l'œil de se reposer un peu des contrastes trop violents du noir & lumière et aussi de faire des relances de lecture d'un paragraphe sur l'autre ».

Capture paris.blog.lemonde.fr

Outils en ligne

Colour constrast check — Très simple, il suffit d'ajouter les valeurs de la couleur du texte et la couleur d'arrière plan. Ensuite, le système calcule la luminosité et la différence de tonalité. Selon l'outil, vous devriez avoir une luminosité supérieure ou égale à 125 et une différence de tonalité supérieure ou égale à 500.

Colour contrast analyser — Logiciel à télécharger (existe en français) et réagit comme le précédent: il calcule la différence entre les deux couleurs d'avant et d'arrière plan selon des algorithmes proposés par le W3C.

Web accessibility Toolbar — Barre d'outils qui s'ajoute à Internet Explorer et permet d'analyser les contrastes, de passer toute la page en niveaux de gris et de simuler le rendu de la page comme si elle était présentée à un daltonien.

Graybit — Entrez l'adresse d'un site et Graybit se charge de le passer en niveaux de gris (texte, images). Très pratique pour avoir un aperçu général.

À lire également: « Daltonisme dans la conception web »

Cette innovation est une façon de répondre aux inconvénients du téléchargement de police sur le poste client. Pas de secret, la rapidité de l'affichage d'une page dépend du poids du fichier complet de la page (texte, images, javascript, CSS...). En dessous de la seconde, la page se charge presque instantanément et l'utilisateur n'a pas l'impression d'attendre le chargement. Si je me souviens bien, Jokob Nielsen préconise de ne pas dépasser les 5 secondes, auquel cas le risque de fuite est important. Pour avoir essayé, il y a un très léger décalage entre l'affichage du texte et le chargement des polices.

L'autre intérêt réside dans l'insertion de métadonnées sur l'origine de la police. Surtout utile pour les nombreuses fontes gratuites. Au niveau technique, l'insertion se fait via une règle CSS de type @font-face. Dans l'exemple, le navigateur télécharge la super-police.woff ou la super-police.ttf si ce dernier ne gère pas le nouveau format.

@font-face {
font-family: SuperPolice;
src: url(fonts/super-police.woff) format("woff"),
url(fonts/super-police.ttf) format("truetype");
}

Pour approfondir le sujet et tester: « WOFF for Firefox 3.6 ».

Capture All-for-design.com

Dans ce monde de la typographie sur le web, il reste encore tout à inventer. Reste à trouver un modèle viable tout en respectant le travail des typographes professionnels. Aurélien a publié un billet intéressant sur un système alternatif: « Typographie et web: la solution Typekit ». Ce n'est pas la panacée, mais on fait avancer le schmilblick.

[¹] Codestyle
[²] « Les titres en images »
[³] « Comment utiliser une fonte "non-standard" sur un site web ? »

Pour installer une police de caractère, il suffit de copier-coller le fichier de la police dans le dossier spécifique de Windows et le tour est joué. Ouvrez Word, Excel, Photoshop et vous pourrez utiliser la nouvelle fonte. Cas pratique en vidéo.

Pour trouver des polices gratuites, il n'y a pas que Dafont.com mais une panoplie d'autres ressources. Designrfix a repris une liste de free fonts.

Prenez la précaution de toujours bien sauvegarder les nouvelles polices téléchargées car en cas de formatage, elle ne seront plus disponibles. C'est sans doute pas très important dans l'immédiat mais ça risque de poser problème pour tous vos projets créatifs.

[¹] Autrefois, les graphistes avaient tendance à supprimer les polices TrueType au profit des PostScript plus adaptées au flashage. Plus tard, les gestionnaires de polices (ATM, Sutcase) ont permis d'activer ou désactiver les polices au lieu de les jeter.

ElPaís.es — H2, Georgia, 32 px

DeMorgen.be — H1, Arial, 34 px

MidiLibre.fr — H1, Trebuchet, 34 px

LeFigaro.fr — H1, Trebuchet, 36 px

IlSole24Ore.com — H1, Times New Roman, 38 px

20minutes.fr — H3, Arial, 54 px

Le grand gagnant XXL est le site 20minutes.fr. Il explose les scores de taille et jongle avec les pourcentages pour une titraille de même niveau. L'exploitation intensive des images et des intitulés surdimensionnés font de 20minutes.fr une espèce de bric-à-broc. Les titres sont concis et la page est très longue. Pas question ici de commencer à développer sur quelques lignes; il faut marquer des points avec un minimum de mots pour inciter l'internaute à cliquer.

Alignement à gauche

Largement utilisé, c'est le positionnement par défaut des logiciels de rédaction. En typographie, on dit que le texte est en drapeau. Cette expression est une métaphore entre la fluctuation de la longueur des lignes et l'aspect imprévisible d'un drapeau flottant à l'air libre. En drapeau, sous-entendu aligné à gauche puisque l'alignement à droite est considéré comme une aberration dans une lecture continue. On dit aussi au fer à gauche faisant référence à la forme métallique utilisée par le typographe pour bloquer le texte. Le travail de mise en page est alors de réduire les blancs optiques en fin de ligne pour donner une impression d'homogénéité.

Alignement à droite

L'alignement au fer à droite est utilisé avec parcimonie car il rend la lecture difficile. Bien que le bord droit est clairement marqué, l'œil cherche à se poser à chaque retour à la ligne. On trouve cet alignement dans les magazines, les catalogues, les affiches, la publicité, les cartes de visite et beaucoup moins sur le web. Il agit alors comme complément à l'information principale.

Capture Causeur.fr

Alignement centré

L'alignement centré se fait suivant un axe central sans aucun ajustement en début et fin de ligne. Cette disposition convient pour une invitation officielle, un menu de restaurant, une carte de visite, un en-tête de lettre, etc. Sur le web, l'alignement centré est réservé pour les titres, légendes, citations, texte de présentation. Tout comme l'alignement à droite, la lecture est plus difficile et ne convient pas pour de longs textes.

Capture Csszengarden.com/062 (sous Internet Explorer)

Alignement justifié

Les navigateurs web sont capables d'afficher un texte justifié de manière rudimentaire. Pour alléger l'application, le browser est dépourvu de dictionnaire de césure automatique. On imagine mal l'intégration d'un éventail de dictionnaires selon que vous lisez du texte en français, en anglais, en italien... La justification est basique et se limite à former des lignes d'égale longueur, à l'exception de la dernière du paragraphe. À noter que la justification en alinéa ou en sommaire est toujours possible avec les feuilles de style.

Alignements variés

En PAO, on peut donner de nombreuses formes au texte. Une composition où le texte prend une forme non rectangulaire est appelée en allégorie. Cet alignement se destine aux ouvrages anciens. Les paramètres de césures et la justification sont plus difficiles dans la mesure où chaque ligne a une longueur différente. Sur le web, l'alignement en allégorie est impossible puisque le texte se trouve enfermé dans des boîtes rectangulaires. Le webmaster peut se risquer à forcer le retour à la ligne mais c'est loin d'être la meilleure solution.

Les magazines, et plus rarement les quotidiens, habillent le texte selon les contours de l'image. Cette technique, assez simple avec les logiciels récents, mettent en valeur l'illustration pour se rapprocher du personnage, de l'objet. Les bords de l'image sont dotés d'une série de points mobiles et peuvent être déplacés pour adapter au mieux le rédactionnel.

Le Soir du 23 juin 2007

Ce procédé n'est pas faisable sur le net. Les webmasters peuvent tout au plus aligner le visuel d'un côté ou de l'autre du texte. L'espace autour de l'image est ajusté avec précision grâce aux feuilles de style plutôt que les valeurs hspace et vspace qui agissent par paires. Malgré tout, il n'est pas évident de trouver les bonnes valeurs d'espacement entre l'image et le texte pour que ce dernier tombe soigneusement sous la photo.

Capture Judorijeka.com

Alignement vertical

La grande majorité des alignements sont horizontaux et c'est très bien ainsi. Au nom de l'originalité certains sites choisissent de basculer le texte. Le cas le plus fréquent se situe au niveau des intitulés de rubriques. Une typo trop petite, un texte trop long et cela devient totalement illisible. À quand l'idée d'un lettrage en miroir ?

Capture Jardindessens.com

De temps en temps, il y a lieu d'ajuster ces automatismes ou de les régler pour correspondre aux règles de césure propres à chaque langue. Dans l'exemple ci-dessous (tiré du site Estrepublicain.fr), le paragraphe de gauche contient de nombreux blancs. On peut s'en rendre compte avec l'illustration de droite en plissant les yeux.

Sur le web, les choses ne sont pas aussi simple. Comme on l'a déjà vu [¹], les navigateurs ne disposent pas de dictionnaire interne et la coupure automatique est inexistante. On peut se risquer à séparer les mots manuellement mais il est très difficile de maîtriser le rendu final en raison de la multiplicité des supports: écran d'ordinateur, téléphone portable, iPhone, tablette numérique...

Les coupures et ses règles

Le plus souvent, la coupure d'un mot est syllabique: in-sé-ca-ble [²]. Par contre, il est préférable de diviser le mot selon son étymologie: atmo-sphère. À cette règle générale, il faut compter sur de nombreuses exceptions. On ne coupe pas...

• des mots sur plus de trois fins de lignes consécutives
• le dernier mot d'une page impaire (à droite)
• un mot de moins de 5 lettres: pa/ge
• un mot de fin de paragraphe (cf. veuve et orpheline)
• avant une syllabe finale sonore de moins de 3 lettres, ni avant une syllabe finale muette de 4 lettres: tend/du
• un mot composé ailleurs qu'en place du trait d'union: tire-bou/chon
• une abréviation: géo/gra. (géographie)
• les prénoms ni les noms de familles, sauf composés: Lu/cien
• avant ou après une apostrophe: aujourd/'/hui
• en cas de coupe douteuse (fes~, con~, cul~ et chi~): il est con/vaincu...
• entre deux voyelles, sauf si l'étymologie le permet: cré-ancier, pro-éminent
• avant ni après les lettres x ou y placées entre deux voyelles: deu/x/ième
• entre les consonnes bl, br, ch, cl, cr, dr, fl, fr, gl, gn, gr, pl, pr, th, tr et vr: apost/rophe

À l'inverse, on peut / on doit...

• laisser deux lettres avant la coupure: a/gré-able
• diviser entre les consonnes doubles d'un mot, sauf dans le cas d'une syllabe muette: com-miss-sion, feuil/le
• diviser un mot entre les consonnes: bv, cq, ct, mb, ng, pç, pt, sc, sh, sp et st: des-cendre

Pas de coupure dans les mots des titres

Observez un quotidien papier et ses nombreux titres et sous-titres. Point de césure à l'horizon, même les cas extrêmes. L'éditeur du journal adapte chaque titre (longueur et formatage) en fonction du niveau de visibilité souhaité mais aussi des contraintes de place. Dans l'exemple suivant, le maquettiste ne s'est pas contenté de coller simplement les titres mais de les adapter pour obtenir un équilibre visuel en évitant les césures de mot.

Le Soir du 23 juin 2007

L'adaptation du contenu papier au web est sensiblement différente. L'outil en ligne se concentre avant tout sur la réactivité et la rapidité de diffusion de l'information. Le contenu prend un circuit rapide de publication et adopte les attributs de formatage de manière automatique. Le maquettiste peut aller se rhabiller. À ma connaissance, seul 20minutes.fr règle la taille de ses titres en Une. De plus, l'information est souvent contrainte d'habiter un espace vertical réduit. Fort est de constater qu'il n'y a bien souvent plus aucune recherche de mise en page: titre, sous-titre, contenu, illustration et parfois un complément d'information en colonne. Le Figaro.fr sectionne ses titres par des retraits de paragraphe pour valoriser les mots-clés.

Capture le Figaro - 04/04/10

Les séparations

Les règles de coupure énoncent les mots qui peuvent ou non être divisés par un trait d'union pour un texte étroit. Il existe également des règles pour empêcher la séparation entre deux mots. Dans ce cas, il est impératif d'utiliser un espace insécable. On ne sépare pas...

• le titre de civilité (ainsi que son abréviation) du nom associé: M./Durand
• le nom du souverain et son numéro dynastique: Louis/XIV
• les nombres, décimaux ou non, écrits en chiffres: 20/000
• les nombres écrits en chiffres de son symbole associé: 300/kilomètres
• une date: 24/juin/1997
• le mot page (ou son abréviation) de son chiffre qui suit: voir p./324
• après le 2e trait d'union pour une locution qui en contient deux: c'est-à-/dire
• une suite mathématique: 4/+/2/=/6
• les sigles et les acronymes: Unes/co

La césure dans le code HTML

La césure manuelle sur une page web est un pari risqué. Le rendu est certainement correct sur votre écran mais tous les internautes ne visualisent pas vos pages sur le même écran. Du coup, le mot sectionné risque d'apparaître comme un mot composé dans la phrase et perdra tout son sens. Il existe bien un trait d'union conditionnel: ­. Ce trait d'union de l'ombre agit sur le mot en fin de ligne et disparait dès qu'il n'a plus son utilité. Malheureusement (ou heureusement), il n'est pas correctement interprété par tous les navigateurs [³].

Dans certains cas, le trait d'union doit être insécable et ne peut être coupé en fin de ligne (St-Luc, à-propos). Il faut alors remplacer le signe du clavier par le caractère Unicode ‑. Dans la pratique, la démarche est contraignante et il n'existe pas d'astuce ou d'aide pour la contourner.

[¹] Pour compléter sa lecture: « Le texte se justifie-t-il ? »
[²] Le trait d'union est une césure permise et la barre oblique une césure interdite.
[³] « Trait d'union et tirets »

Capture bailly.blogs.com

publicité Kia dans le quotidien L'Équipe

dessin de l'humoriste Kroll (source: Le Soir)

Dans certains ouvrages, les alinéas sont précédés du caractère de paragraphe (U+00A7 §), un pied de mouche (U+00B6 ¶), un pied de mouche réfléchi (U+204B ⁋) ou tout autre signe graphique. Il n'existe pas de norme précise pour représenter le paragraphe. Ces symboles sont plutôt rares dans les textes courants. La largeur de l'alinéa est égale à 3 ou 4 cadratins et dépend de la longueur de ligne: un petit alinéa pour une petite colonne.

Dans un courrier administratif, il n'est pas rare d'ajouter un retrait en plus de l'espace entre les paragraphes. On ne sait pas trop pourquoi, cela donne de l'élégance et un souci du détail. Les traitements de texte traditionnels gèrent les alinéas de manière systématique grâce aux styles.

Sur le web, <p> est une balise bloc et ajoute une marge supérieure et inférieure de 12 %. Les paragraphes sont bien distincts et l'espace se gère au niveau de la feuille de style. La propriété text-indent en CSS permet de créer un retrait à droite ou à gauche (valeur négative) de la première ligne. C'est assez rare de la rencontrer sur le web. Son utilisation ne devra être hasardeuse mais cohérente sur l'ensemble des textes de largeur moyenne ou importante.

Capture ObjetsLivres.fr

Dans cet exemple, au niveau visuel on constate que les groupes de paragraphes sont séparés par un espace et les idées par un alinéa. Dans le code HTML, ce sont tous des paragraphes avec un retrait à droite de la première ligne. Les alinéas à proprement parlé sont arrangés en supprimant le retrait et l'espace environnant:

p.noalinea {
  text-indent: 0;
  padding: 0;
}

Ce travail contraignant n'améliore pas la lisibilité et donne une impression d'irrégularité dans la gestion des espaces. Les textes sont compacts et mériteraient d'être plus aérés. À mon humble avis, cette règle d'alinéa convient sans doute pour la PAO mais pas vraiment pour le web.

Interlettrage

L'interlettrage est l'espace entre les caractères. En CSS, on modifie cette valeur via la propriété letter-spacing. L'effet s'applique sur l'ensemble du texte.

L'interlettrage varie en fonction de la partie imprimée du caractère et des contreformes. L'espacement normal est déterminé par le dessinateur des lettres. Généralement, l'interlettrage par défaut est suffisant et ne nécessite pas de modification. Il a été pensé pour assurer un rythme régulier des caractères et une bonne lisibilité. Une augmentation de l'interlettrage trop importante risque de découper les mots et rendre la lecture plus difficile. Une diminution excessive donne des lettres qui s'entrechoquent. Cet effet est accentué avec les lettres capitales.

Intermot

Comme son nom l'indique, l'intermot est l'espace entre chaque mot. La propriété word-spacing en CSS modifie sa valeur. Par défaut, les logiciels d'édition de texte ou d'édition graphique génèrent automatiquement un espace variable en fonction du corps du texte. Le rédacteur ne doit pas, comme son ancêtre typographe, ajouter lui même les espaces entre les mots.

Dans la plupart des cas, cela suffit pour garantir une lisibilité correcte. Il faut juste être attentif en cas de justification afin de ne pas créer des blancs trop importants qui font apparaître des lézardes dans le texte. Dans le cas d'un texte justifié, plus l'interlignage sera grand plus l'espace inter-mot semblera petit. En cas de modification, ne descendez pas en dessous de 80 % et au-dessus de 120 % de la valeur par défaut.

Interligne

L'interlignage est l'espace entre deux lignes de base consécutives. En CSS, line-height fait varier cette valeur. Dans une logique graphique, il n'y a pas de règle en matière d'interlignage. Chacun apprécie le résultat en fonction de ses affinités, des objectifs à atteindre. Dans une logique de lisibilité, l'interlignage a tout son importance. Jadis, ce travail revenait à l'imprimeur muni de bandes de plomb (leading) pour espacer correctement les lignes.

Le texte doit être suffisamment aéré et ne pas donner l'impression d'un gros bloc. Inversement, un interlignage trop important donne une impression de vide et de flottement des lignes. L'attention du lecteur est distraite par les blancs optiques entre les lignes. Toute la difficulté consiste à choisir un juste milieu entre ces deux extrêmes.

Par défaut, les navigateurs web affichent un interlignage de 120 % par rapport à la taille du texte. Selon les typographes, un interlignage correct se situe entre 120 et 150 % pour un texte destiné à être lu. Sur ce blog, j'utilise un interlignage d'une valeur de 130 % (Verdana, 13 px, longueur de ligne à 550 px). J'évite ainsi l'effet de tassement des paragraphes et je donne plus de légèreté aux blocs de texte.

Un bon moyen de vérifier l'interlignage c'est de repérer la rencontre entre les ascendantes, les descendantes d'une ligne et les montantes de la ligne suivante. On peut aussi se concentrer sur le rendu des capitales accentuées qui posent souvent problème dans ce cas.

L'interlignage doit également tenir compte de l'œil de la police. Plus l'œil est grand, plus grand sera l'interlignage. L'espace entre les lignes d'un Georgia sera différent d'un Times. Idem pour la longueur de ligne: de longues lignes obligent à augmenter l'interlignage pour faciliter le saut de l'œil au début de la ligne suivante. D'autres facteurs influencent le choix de l'interlignage comme la graisse, la justification, le choix typographique, etc.

Je me suis attardé en premier sur ce qu'on appelle dans le métier la « pédale ». À l’origine, un ouvrier actionnait la presse à la force de sa jambe pour permettre une juste pression du papier contre la forme imbibée d’encre. Aussi, ce même homme alimentait la machine feuille par feuille. Que de travail !

Ici, la pédale est automatisée. Elle révolutionne le métier puisqu’elle affranchit l’homme de cette tâche fastidieuse. Le travail le plus long est le réglage parfait de la machine en fonction du type de papier, son épaisseur, la surface d’impression… Un système de ventouse absorbe le papier pour la faire passer à travers une pince. Cette dernière positionne la feuille et vient se positionner contre la forme typographique si les réglages sont bien faits.

Presse typographique à pédale

Très étonné de voir dans ces lieux une linotype. À l'heure actuelle, elle n'est plus utilisée mais elle reflète tout le génie d'une époque. Un clavier aux touches très sensibles sélectionne des matrices pour chaque caractère. Ensuite, une barrette est produite à partir de plomb fondu à 280 °C. Chaque plaquette correspond à une ligne. Ici, la ligne pèse 80 g. Une page pèse donc presque 2,5 kg. Imaginez tout un livre entier ! Bien souvent, le matériau est refondu. En cas de ré-édition il fallait alors tout recommencer.

Linotypiste en plein travail

Linotype

Ligne de caractères en plomb

Page de caractères

Pour illustrer les pages d'un livre, un artisan façonne des formes dans du bois noble de première qualité. Le travail est minutieux et demande beaucoup de précision dans les gestes. La forme pivote sur le coussin en cuir et l'outil creuse les sillons. Aujourd'hui ce métier a disparu.

Gravure sur bois

Plusieurs ateliers pour les enfants étaient prévus: confection du papier et dessin à partir de formes et d’encre pour les plus petits. L’occasion de venir visiter les lieux en famille. Journée très enrichissante auprès des pros d’une grande gentillesse et jamais avares de commentaires.

Atelier pour les enfants: le papier à l'ancienne

Atelier pour les enfants: les tampons de couleur

Genèse

L'origine de cette mauvaise pratique remonte au début de l'imprimerie. Les lettres étaient montées sur des petits blocs de plomb. Chaque pièce avait la même taille. Les minuscules possédaient un espace suffisant pour l'accent alors que les majuscules occupaient tout l'espace. Aussi, les machines composeuses - d'origine anglo-saxonne - aucune capitale était accentuée. Le même problème se posa plus tard avec l'arrivée des machines à écrire.

De nos jours

Trop souvent, les adultes reproduisent une mauvaise habitude apprise à l'école: les capitales ne s'accentuent pas dans l'écrite manuscrite. Ceux qui se destinent à une vocation plus littéraire, apprendront à corriger cette maladresse orthographique. Mais on trouve régulièrement bon nombre d'articles de presse ignorant cette particularité. Le lecteur y perd son français.

D'autre part, les logiciels informatiques ne permettent pas une utilisation aisée de ces caractères. Il faut souvent avoir accès à des menus enfouis, des combinaisons de touches ou faire appel à une table des caractères. Sans compter l'absence des signes diacritiques dans certaines polices de caractère.

Pour compliquer le tout, les recommandations officielles varient en fonction des pays. Par exemple, en Suisse romande on n'accentue pas les majuscules alors que les minuscules mis en capitales sont accentuées. Au Québec, on accentue les abréviations tandis que chez nous cette pratique est déconseillée. Difficile de s'y retrouver.

Alors, faut-il accentuer les capitales ?

La réponse semble évidente pour certains professionnels. À partir du moment où elle a pleine valeur orthographique et évite les confusions sémantiques, alors elle doit s'imposer. D'ailleurs, tous les grands dictionnaires de langue française ont opté pour ce choix. Il ne reste pas moins que les claviers français mériteraient un petit lifting pour faciliter cet usage [¹].

Les plus permissifs acceptent les deux formes. L'accent diacritique est de mise si le sens est remis en cause ou si on souhaite apporter une attention typographique particulière. Dans tous les autres cas, il n'est pas obligatoire. À chacun de choisir.

En pratique

Il n'est pas bien compliqué d'écrire des lettres capitales munies de l'accent circonflexe ou du tréma. Pour y arriver, il convient de taper au clavier ^ (accent circonflexe) ou ¨ (tréma) puis de maintenir la touche Maj et presser la lettre souhaitée. On peut donc écrire aisément « Âpre » ou « Île » sans pour autant avoir recours au codage des caractères.

Pour les accents aigu et grave, regardez bien votre clavier. Sous le % (pourcents) et la £ (livre sterling) se trouve respectivement l'accent aigu et l'accent grave. Pour y avoir accès, il faut appuyer sur la touche Alt Gr et suivre les même instructions citées ci-dessus.

Il reste d'autres caractères qui ne se trouvent pas sur le clavier, notamment le « Ç ». Là, ça commence à devenir un poil pompeux. Il faut faire un tour dans la Table des caractères de Windows [²] puis copier-coller la lettre. L'autre méthode est d'ajouter le code HTML du signe. Le Ç fait partie de la table ASCII étendue [³] et porte le code Ç à ajouter dans le HTML. À noter que sur les Mac c'est nettement plus simple car il suffit de taper Alt + ç.

Avec un peu de pratique, il sera facile de coder correctement les caractères. Tout est une question d'habitude. Retenez les entités nommées suivantes précédées de la lettre de votre choix.

• l'accent aigu → acute;
• l'accent grave → grave;
• l'accent circonflexe → circ;

[¹] À lire sur le même sujet: « De la machine à écrire au clavier »
[²] Menu Démarrer > Accessoires > Outils système > Table des caractères
[³] Voir « Les tableaux ASCII »