Typographie et Web

Étiquettes : lisibilité, principes formels, taxonomie, webdesign

Ce qu’écrit l’auteur du site…

« Les règles de typographie sont simplifiées sur Internet: accentuation, ponctuation, espaces, casse. Adopter un code typographique présente l’avantage d’uniformiser le rendu écrit et de crédibiliser le contenu en garantissant un confort de lecture à l’internaute »

Ce que j’en dis…

C’est d’autant plus vrai que l’internaute recherche harmonie et cohérence sur le Web, et, plus particulièrement, au sein de pages identiquement labellisées. C’est ainsi que j’invite souvent les clients à créer une charte éditoriale pour leurs contenus Web : quand mettre des majuscules, que faire des listes à puces, comment traiter les abréviations et les majuscules…

La bonne nouvelle, c’est que ce sont toujours les mêmes questions que l’on se pose. Donc, il suffit de prendre, une seule fois (mais cela peut durer un peu) le temps de développer cette charte. Si vous souhaitez un conseil sur le sujet, contactez-moi…

Que dit ensuite l’auteur du site ?

Accents sur les capitales

Accentuer une capitale ou non ? La seule règle est de prendre la décision de mettre un accent sur les capitales ou non et de s’y tenir.

Cependant, utiliser des accents sur les capitales permet une lecture plus facile et lève certaines ambiguïtés. Utiliser une majuscule accentuée ou non accentuée peut également être un choix stratégique de référencement : en effet, pour certains robots, la casse n’est pas respectée et « Histoire » majuscule retournera les mêmes résultats que « histoire » minuscule… mais lorsqu’il s’agit d’intégrer des mots clés dans le texte, intégrer un « Ecrire» majuscule permet d’afficher un mot clé sans accent sur le « e » sans que cela ne passe pour une faute de frappe dans le texte. Le mot « ecrire » sans accent aigu sur le « e » au milieu du texte est une faute d’orthographe..

Ce que j’en dis…

UN HOMME TUE ou UN HOMME TUÉ … L’exemple se suffit à lui-même, non ? Le code du e accentué aigu étant & E acute (sans espace entre les caractères).

Insérer une espace ? La ponctuation des signes simples et doubles

Les signes simples sont :

• la virgule « , »
• le point « . »
• les points de suspension « … »

La règle est : « signe simple, espace simple » ; l’espace se trouve après le signe.

Les signes doubles sont :

• le point-virgule « ; »
• les deux-points « : »
• le point d’exclamation « ! »
• le point d’interrogation « ? »

Ce qu’en dit l’auteur du site…

La règle est : « signe double, espace double » (une espace avant, une espace après).

Néanmoins, sur Internet, mieux vaut ne pas intégrer d’espace pour éviter le retour à la ligne d’un élément isolé. Autre solution : ajouter un espace insécable en HTML représenté par & nbsp (à nouveau, sans les espaces).

Ce que j’en dis…

Par simplification (et par sécurité), je suggère toujours de laisser tomber les espaces insécables. D’autant que souvent, les contenus sont préparés dans un traitement de texte. Le codage des insécables n’est donc pas automatiquement assuré.

Et puis, n’est-ce pas Le Monde ou Libé qui a abandonné, il y a quelques années, les insécables même dans le format papier ? Soyons dans notre temps, dans le média et innovons 😉

La ponctuation des parenthèses, guillemets, crochets, accolades

Laisser des espaces à l’extérieur, mais pas à l’intérieur. 2 exceptions:

• il n’y a pas d’espace entre la parenthèse finale et la ponctuation simple qui suit
• pour les guillemets à la française « », appliquer la règle des signes doubles, soit des espaces avant et après sauf s’ils sont suivis d’une ponctuation simple

Ce que j’en dis…

Voir ma bafouille sur les espaces insécables ci-dessus.

Quelle ponctuation pour les listes à puces et à numéros ?

Pour les listes, il faut laisser une espace entre le tiret et le mot qui suit ; pour terminer une liste, 2 solutions sont possibles avec une préférence pour la seconde:
1) pas de virgule à la fin de chaque élément de la liste, ni de point à la fin :

• ligne 1
• ligne 2

2) un point-virgule à la fin de chaque élément de la liste, un point à la fin :

• ligne 1 ;
• ligne 2.

Ce que j’en dis…

Par simplification (et par sécurité, à nouveau), je préconise la première solution. Cette solution est d’autant plus recommandée aux gestionnaires de contenus multilingues. Les règles typographiques varient d’une langue à l’autre. Et ces variations se ressentent pas mal dans la liste à puces.

Présentation des noms et prénoms

• écrire les initiales en capitales
• écrire les prénoms en minuscules devant le nom
• écrire les noms en (petites) capitales
• petites capitales:
  Les petites capitales sont utilisées pour donner le nom de l’auteur dans une référence bibliographique; les petites capitales peuvent être codées en définissant une taille de police inférieure au reste du texte.
  Amélie N<font size -1>othomb</font>
  Les petites capitales sont peu utilisée sur le Web.
• les titres en exposant:
  Le texte en exposant est peu utilisé sur le Web, ainsi on écrira :
  Mlle, Mme, Mlles, Mmes et non M^lle qui est une écriture très lourde.
  Idem pour les adjectifs numéraux ordinaux : 1er, 2e, 3e, etc.

Ce que j’en dis…

Je suis assez contre (à un point qui frise l’obstination) l’usage des capitales dans un contenu. Je les tolère dans des surtitres et titres de pages… A peine dans des titres d’articles. C’est dire. Donc, en ce qui me concerne, je fais fi (shame on me) des règles typographiques pour ce qui est des prénoms et des noms. il suffit de voir sur certaines pages du site public du Parlement européen pour se rendre compte de l’effet visuel de ce type de choix. Dès que sont citées plusieurs personnes dans 1 paragraphe, la lisibilité en est beaucoup atténuée.

Insertion des références bibliographiques

Plusieurs normes existent:
NOM Prénom, titre, ville, éditeur, année, autres renseignements.
ou
NOM Prénom, article, titre de revue, ville, éditeur, année, autres renseignements

Ce que j’en dis…

En général je laisse au graphiste le soin de trouver une manière soignée et web-enabled de présenter ce type de références. Je préconise les taxonomies et autres syndications pour de tels contenus. Cela donne une utilité supplémentaires à ces informations.

Acronymes

Ecrire les acronymes en majuscules, avec ou sans points :
On écrira HTML, CSS, ONU, PAM, O.C.D.E. ou OCD

Ce que j’en dis…

Parfaitement d’accord. Mais, à la première occurence de l’abréviation, selon le public cible, je donne d’abord le nom complet qui réfère à l’acronyme.

Les unités

Laisser une espace entre les chiffres et l’unité de mesure :
3,3 cm
3 000 000,00 EUR
33,3 %

Ce que j’en dis…

Dur dur, les espaces insécables sur une page Web, on l’a vu. Mais, c’est vrai que la lisibilité impose une espace. Pour les chiffres de manière générale, on suivra le conseil de Jakob Nielsen : en chiffres et pas en lettres.

Etc., et cetera, et caetera

« Etc. » n’est jamais suivi de points de suspension.

Plus d’infos ?

• Action-Rédaction… Les usages typographiques sur le Web
• Le grand déclin de la homepage?
• La homepage, la malnommée…
• Une liste des codes pour les accentués (les entités ou entities, comme disent les « Pro », je crois)
  

Par: Muriel Vandermeulen

Rédaction Web & SEO

Fondatrice de @wearethewords. Éditrice de @ellesfontduvelo & @ecrirepourleweb. Marketing & Contenu. <3 les mots, les rituels, le citron et la bicyclette!