Quelques notions de mise en page : Les bases, du texte et des blancs

Nombre de personnes se lancent dans l’aventure du web, avec plus ou moins de bonheur. Si je devais être réducteur, je dirais que internet, tel qu’il se présente actuellement, n’est qu’une évolution de support pour la communication.

Quand je vois certains sites, réalisés par des amateurs qui s’excusent de leur mise en page ou de leur graphisme, parce qu’ils ne savent pas faire, j’ai envie de leur répondre : faites simple, faites propre, appliquez des principes de base…

Le problème principal d’une personne qui désire se mettre à internet, c’est que trop souvent elle s’intéresse plus à la technologie utilisée qu’au but final.

Ce qui fait qu’un site est lisible, agréable, ce n’est pas le choix entre tel ou tel langage, telle ou telle base de données, tel ou tel CMS ou encore tel ou tel effet de style plus ou moins à la mode.

Ce ne sont que des outils au service du rendu, au service de votre document.

Nous allons donc, pour l’instant, nous focaliser sur les principes de base de la mise en page, bien qu’ils aient été initialement pensés pour la communication papier aussi appelée « tradi » (pour traditionnelle), on peut sans aucun problème les transposer à la mise en page Web, moyennant bien sur quelques petits agencements.

Je ne vais pas entrer dans les techniques propres à la mise en page pour le web (partie code) pour le moment, cela viendra surement un peu plus tard dans d’autres articles de la série.

Voyons maintenant les éléments constituants un document :

Le texte :

Le texte donne à un document ce que l’on appelle le « gris typographique ». En gros, si vous prenez du recul (physiquement parlant) pour regarder un document, au bout d’un moment vous n’apercevrez plus qu’une « masse » grise.

Ce « gris typographique » sera plus ou moins harmonieux en fonction de différents critères :

  • La police utilisée
  • La taille de la police
  • L’espace entre les lettres
  • L’espace entre les lignes
  • L’espace entre les mots
  • Texte italique ou non
  • Texte en gras ou non
  • L’alignement du texte
  • La justification du texte

Comme vous le voyez je n’ai pas utilisé de gros mots comme « approche », interlignage, graisse ou autre, le but ici est que les concepts soient immédiatement accessibles à tous.

Des réglages fins de ces critères vous permettront d’obtenir des blocs de textes plus ou moins harmonieux, faites des tests, car s’ajoutent la dessus d’autres éléments difficilement contrôlables hors d’un projet précis :

  • La longueur de votre rédactionnel.
  • La taille du bloc de texte (en général on parle de largeur).

Les Blancs :

Le blanc, c’est la pause, la respiration, la coupure dans la lecture.
Le blanc c’est l’élément structurant de votre document. Des blancs trop forts écraseront les contenus, des blancs trop faibles fatigueront l’oeil du lecteur, pas simple.

En faisant un raccourci rapide, le blanc c’est tout ce qui n’est pas contenu, que l’on parle de marges de documents, d’espaces entre « gris typographiques », voir d’espaces à l’intérieur d’un « gris typographique » (saut de paragraphe).

Vous avez maintenant vos deux éléments de base.

C’est tout? Ou sont les images? Quid des couleurs? Des graphismes? De l’iconographie?

Ca c’est pour plus tard, commencez par vous amuser à tester le rendu visuel d’un document lambda (par exemple une page d’un livre).

Un petit exercice :

Utilisez un logiciel de traitement de texte ou de mise en page.

Vous pouvez générer du faux texte en utilisant un générateur en ligne : http://www.lipsum.com/

Créez un texte à trois paragraphes.
Créez un nouveau document avec le logiciel choisi et copiez y votre faux texte.

En premier, changez la police du texte (vous pouvez même en utiliser une différente pour chaque paragraphe, c’est à proscrire en terme de mise en page, mais ça vous fera gagner du temps).

Faites joujou avec vos textes, changez les espacements des lettres, des mots, les tailles des polices, bref tout ce dont je vous ai parlé dans le paragraphe sur le texte.

Changez les marges et observez l’impact sur votre document.

Changez la hauteur des sauts de paragraphe.

Puis passez votre document en mode paysage. Aaargll ça change tout.

Une fois passé en mode paysage, construisez un semblant de page web, vous pouvez utiliser pour cela les tableaux de votre logiciel de traitement de texte ou les blocs de votre logiciel de mise en page.

Première version :

  • Un titre en haut de page. (titre du site)
  • Un sous titre. (titre de la page)
  • Un « menu » horizontal contenant 6 liens : lien 1, lien 2, ou ce que vous voulez.
  • Vos trois paragraphes de texte
  • Un menu de bas de page (reprenez le premier menu)

Une fois ce document réalisé, refaites joujou avec tous les réglages possibles, observez les mutations de votre document, apprenez à maîtriser le rendu.

Deuxième version :

  • Un titre en haut de page. (titre du site)
  • Un sous titre. (titre de la page)
  • Un « menu » Vertical à droite du texte contenant 6 liens : lien 1, lien 2, ou ce que vous voulez.
  • Vos trois paragraphes de texte

Même chose que pour l’exercice précédent.

Pour un meilleur rendu visuel, vous pouvez utiliser les options de prévisualisation fournies avec la plupart des logiciels, pas la peine d’imprimer votre document à chaque modification.

Le temps que vous testiez tout ça, j’aurais surement avancé dans la suite de mes articles sur les bases de la mise en page appliquées aux sites Internet.

Une dernière chose, il faut ben parler technique à un moment ou à un autre, tous ces réglages, qu’ils soient au niveau du texte ou pour la gestion des blancs, sont réalisables en utilisant des spécifications CSS appliquées au code HTML. Si vous n’y connaissez rien, allez faire un tour sur le site d’Alsacréations, il y a de nombreuses sources et de nombreux tutoriels.

A bientôt pour la suite.

EDIT du 13/12/2006 : Merci à Stéphane de Simple Entrepreneur de découvrir des outils en ligne pour nous.

Donc voici trois outils en ligne en ligne pour tester des polices, pour des commentaires allez voir l’article de Stéphane :

Les articles de la série:

D’autres sont à venir.

Cordialement,
Aymeric Jacquet

Tags : , ,

Be Sociable, Share!

5 Commentaires pour Quelques notions de mise en page : Les bases, du texte et des blancs

  • Aymeric Jacquet

    Et wala, dés qu’on sort des problèmes d’hébergeurs ou de solutions CMS ils deviennent muets. ;)

    Le 1 décembre 2006 à 12 h 15 min

  • MiKE

    Met ça sur le compte du week-end approchant.. perso, je préférais quand tu trollais ;-)

    Le 1 décembre 2006 à 22 h 07 min

  • Florent V.

    Muet parce que déjà convaincus. ;)

    Pour avoir pas mal travaillé la technique des styles sur traitement de texte, puis fait un peu de PAO (pas professionnellement, juste des exercices sous XPress, InDesign ou Scribus)… je suis assez sensibilisé à la gestion du texte. En général, j’y accorde pas mal d’importance (même si je suis loin d’être imaginatif pour trouver des solutions intéressantes. :(

    D’ailleurs, je trouve qu’il n’y a pas grand chose sur le texte et la typographie sur Alsacréations. C’est d’ailleurs pour ça que j’avais proposé un tutoriel complet sur le texte en EM, par exemple. Faudra que je voie s’il y a d’autres choses à creuser dans ce domaine…

    Le 12 décembre 2006 à 11 h 11 min

  • Ca c’est clair, simple, concis et efficace. Je me permettrai de faire un renvoi vers cette page sur mon site. Excellente approche (j’ose, moi, utiliser le mot) de la visualité du contenu web. Merci !

    Le 5 février 2007 à 16 h 01 min

  • Bonjour Muriel et bienvenue sur l’Ajblog. merci à l’avance pour le lien vers cet article. Joli jeu de mot, bien que je ne sois pas certain que nous soyons nombreux à le comprendre. ;)

    Le 5 février 2007 à 16 h 20 min