Ecrire pour le Web @ WAW

Rédaction Web & Communication en ligne

Typographie et Web

Posted on | avril 25, 2008 | 7 Comments

J’ai trouvé sur Action-Rédaction un succinct billet sur les usages typographiques sur le Web… Juste une petite mention avant que de revenir vers vous sur la question de la dénomination de la home page…

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<sup>lle</sup> 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 ?

If you enjoyed this post, make sure you subscribe to my RSS feed!

Sur le même sujet

Category: Rédaction Web & Editorial
Tags: > >

Comments

7 Responses to “Typographie et Web”

  1. Nicolas
    avril 26th, 2008 @ 11:07

    Bonjour,
    les entités H.T.M.L. (&…;) ont été conçues pour faciliter l’implémentation de caractères accentués quelque soit le « charset » déployé. Cela entre autre qu’elles sont utilisées par les webmasters ne connaissant pas ce qu’est un jeu de caractères (http://openweb.eu.org/articles/jeux_caracteres/).

    La meilleure pratique reste d’utiliser les véritables caractères (encodés correctement) à savoir le É (alt + 144) ou encore, pour l’espace insecable le  »  » (http://fr.wikipedia.org/wiki/Non-breaking_space#Saisie_de_l.E2.80.99espace_ins.C3.A9cable_dans_les_logiciels_de_PAO).
    Les entités H.T.M.L. ne devrait pas être utilisées.

  2. Erwan
    avril 26th, 2008 @ 13:14

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

    Bonjour, il existe une exception pour les acronymes qu’on peut prononcer comme un mot ordinaire, sans épeler chaque lettre : « Unicef » est un bon exemple. Dans ce cas, on peut l’écrire en bas de casse, sauf la capitale initiale bien sûr. C’est préférable je pense, car ça fait moins de capitales.

    Erwan

  3. Gilles
    avril 28th, 2008 @ 14:10

    Les acronymes que l’on peut prononcer sont appelés des sigles.

  4. Sylvain Guéguen
    mai 6th, 2008 @ 11:46

    Bonjour et merci pour cet excellent billet.

    L’idée de la charte typographique intégrée à la charte éditoriale est très bonne. Avec du recul par rapport à différents projets, cette dimension est trop souvent délaissée en agence. Elle participe pourtant à la réussite du projet.

    Cette charte typographique pourrait aussi être utile à des bloggeurs. Je me rends compte que sur mon blog, il y a certains détails que je vais devoir revoir…

    Merci

  5. Le web a-t-il tué la ponctuation ? - Barbablog
    mai 7th, 2008 @ 13:00

    [...] papier. Muriel de écrire pour le web partage ses réflexions sur le sujet dans son billet typographie et web. Elle y compare les usages typographiques standards (présentation des noms de familles, de [...]

  6. Erwan
    décembre 23rd, 2008 @ 14:50

    En fait, après vérification, c’est le contraire. Ce sont les sigles que l’on peut prononcer comme un mot (c’est-à-dire sans épeler chaque lettre) qui sont des acronymes. « Unicef » est un acronyme, « HTML » n’en n’est pas un, ce n’est qu’un sigle. Certains sigles peuvent être prononcés et éventuellement écrits comme des acronymes, ou pas (Onu ou ONU).

  7. Tweets that mention Typographie et Web | Ecrire pour le Web @ WAW -- Topsy.com
    avril 2nd, 2010 @ 18:39

    [...] This post was mentioned on Twitter by Jérémy Viallard. Jérémy Viallard said: RT @ecrirepourleweb Typographie et Web http://ow.ly/1oUGaB Ne tuez plus la typographie sur le web ;) [...]

Leave a Reply





Image CAPTCHA
*

  • Newsletter @ WAW

    Chaque mois, des conseils, de l'actu, l'agenda des formations... Et des promos!
    * = Champ requis

    Propulsé par MailChimp!

  • Formations

    24.05.12 - Bruxelles | WAW
    Stratégie de contenu Web
    Formation Strategie de contenu Web
    12.06.12 - Bruxelles | WAW
    Bien écrire pour le web
    Formation Réussir son projet Web

  • RSS Notre veille sur le marketing éditorial et avatars (scoop.it)

  • A propos de ce blog

    Le blog Ecrire pour le web @ WAW propose ressources, conseils et formations pour vous aider à améliorer votre stratégie de marketing éditorial.

    Rédaction Web, stratégie de contenu digital, gestion de la chaîne éditoriale, campagne d'e-mailing ou formation aux médias sociaux, il est une mine intarissable pour les professionniels et apprentis.

    Pour découvrir l'agence WAW, rendez-vous sur We Are the Words.

  • Le blog sur Facebook



  • Conditions d’utilisation

    Creative Commons License

    • RSS
    • Twitter
    • Tumblr
    • Facebook
    • LinkedIn
    • Flickr