Calculer une grille de mise en page « typo » avec le nombre d'Or

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Calculer une grille de mise en page « typo » avec le nombre d'Or

Le calcul d’une grille de mise en page modulaire avec le nombre d’Or est une bonne occasion pour mettre en pratique le manifeste pour un interlignage minimum syndical et les cinq règles pour améliorer l’affichage de vos textes. L’objectif est de déterminer une taille de police de caractère et une largeur de colonnes d’après un interlignage «idéal». Après l’aperçu d’une méthode pour créer des gabarits destinés à l’imprimé, j’expliquerai comment utiliser l’interlignage pour concevoir des grilles adaptées à une résolution inférieure ou égale à 1 024 pixels de large. J’ai choisi un interlignage compatible avec le ratio du nombre d’Or typographique (1,5) et du nombre d’Or Classique (1,618). Toutefois, le concept de cette grille fonctionne très bien avec d’autres valeurs. J’ai mis des exemples de grilles réalisées avec Illustrator sous la forme d’un GIF animé (désolé).

Pour déterminer le pas d’une grille de mise en page pour le Web, on recherche souvent le meilleur rapport entre une largeur optimale (entre 900 et 1 000 pixels) et un nombre de colonnes divisible par deux, par trois et/ou par quatre. Les formats composés de 12 ou 24 colonnes répondent à ces critères (ce sont également des nombres hautement composés). On trouve aussi des grilles en 16 colonnes (nombre pratique). D’une manière générale, on privilégie les formats qui permettent des regroupements de colonnes variés.

Pour faire entrer ces colonnes dans une largeur donnée, on utilise la gouttière, l’espace séparant les colonnes, comme variable d’ajustement avec des valeurs allant de 10 à 30 pixels. Oui, vous avez bien lu : la gouttière, cet élément fondamental pour la respiration de toute grille de mise en page, n’est souvent que le rebut de calculs fastidieux !

Un gabarit de page pour l’imprimé

Pour définir une maquette de magazine destinée à l’impression, nous pouvons partir de la plus petite taille de caractère repérée dans les contenus (notes de bas de page, légendes, etc.) et augmenter la taille des textes en fonction des différents niveaux (notez que l’on peut aussi jouer sur la graisse, la couleur, le contraste, la casse ou un changement de fonte) :

  • Notes de bas de page : 8 pt
  • Légendes des photos : 10 pt
  • Corps du texte : 12 pt
  • Intertitres : 14 pt
  • Rubriques  : 18 pt
  • Titres de Chapitre : 21 pt
  • Titre de l’ouvrage : 48 pt

En fonction du style et du public visé par la publication, nous déterminerons ensuite l’empagement à l’aide de tracés régulateurs pour obtenir des blancs tournants (les marges, pour faire simple), puis, pour chaque niveau, nous regarderons le nombre de caractères optimum qui nous donnera la largeur des colonnes, une des clés de la lisibilité et du confort de lecture.

Reste à voir combien de colonnes entreront dans le format dont nous disposons. Dans la plupart des publications, les marges servent de variables d’ajustement ; dans les ouvrages de luxe, c’est le format de l’ouvrage qui peut évoluer pour préserver des blancs tournants généreux.

Une maquette pour le Web

J’ai cherché la meilleure approche pour concevoir une grille modulaire sans trop me soucier ni du nombre de colonnes ni de la largeur totale de l’empagement, dans les limites d’une résolution d’écran de 1 024 pixels de large.

Une grille de mise en page vraiment modulaire à laquelle ce GIF animé ne rend pas justice !

La pêche à l’interligne

Et si la seule constante indépassable n’était finalement rien d’autre que l’interlignage ? En effet, s’il y a bien une chose d’un peu scientifique dans le processus de lecture, c’est qu’un interlignage possédant un ratio de 1,5 à 1,6 par rapport à une taille de caractère comprise entre 12 et 16 pixels, possède un potentiel de lisibilité en béton.

Après quelques essais, une valeur de 21 pixels pour l’interlignage s’est imposée. Ce chiffre correspond à la fois au produit du nombre d’Or typographique par un corps de texte de 14 pixels (1,5 x 14 = 21) et au produit du nombre d’Or tout court par un corps de texte composé en 13 pixels (1,618 x 13 = 21,034), ce qui permet de faire face à la plupart des situations. Un corps de texte en dessous des 13 pixels n’est de toute manière pas très raisonnable !

Les colonnes, les colonnes !

Il suffit d’utiliser cette valeur pour la gouttière et d’en faire aussi la largeur des colonnes pour obtenir une grille composée uniquement de modules de 21 pixels de large. C’est donc la largeur totale qui devient la variable d’ajustement à la place de la gouttière, permettant à cette dernière d’être en harmonie avec l’interlignage et un regroupement plusieurs colonnes comme 42px + 21px ou 63px + 21px et ainsi de suite.

Ce mode de calcul autorise l’affichage de 48 colonnes totalisant 987 pixels (48 x 21) – 21 qui se centrent parfaitement dans un écran de 1024 pixels, ce qui est bien pratique. Ces 48 colonnes sont divisibles par 2, 3 ou 4 autorisant de multiples regroupements pour obtenir pas moins de 13 combinaisons : 24, 21, 18, 16, 14, 12, 9, 8, 7, 6, 4, 3 ou 2 colonnes. A noter que le nombre 48 fait partie des nombres hautement composés, comme 12 et 24.

On peut aussi retrancher une ou plusieurs colonnes de chaque côté pour obtenir une largeur réduite : 22 colonnes pour une largeur de 903 pixels (ok, 22 ne se divise bien que par 2, mais n’oublions pas que les mises en page asymétriques en ont sous le talon aiguille !) ; 20 colonnes pour une largeur de 819 pixels ; ou encore 18 colonnes pour 735 pixels au cas où vous auriez besoin de concevoir pour une résolution en 800 x 600.

Adaptez, il en restera toujours quelque chose

Si vous trouvez que les valeurs proposées sont trop contraignantes, n’hésitez pas à partir sur une base de 20, 18 ou même 16 pixels pour votre gouttière et votre interlignage, sachant que les valeurs (taille du caractère / interligne) 12/20, 13/20, 14/20 mais aussi 12/18,13/18 ou encore 11/16 permettent une lisibilité à l’épreuve des «séniors» pour peu que vous soyez attentifs aux contrastes ;)

Ne vous faites pas griller

Les grilles sont une aide précieuse pour élaborer un design cohérent et ne sont pas très difficiles à mettre en place pour peu que l’on prenne le temps de se poser des questions sur leur rôle. Le protocole HTTP est sans état : c’est la persistance des éléments récurrents des pages que vous liez entre elles qui crée la notion de site Web. Pour autant, il est important de ne pas se laisser enfermer dans une grille : c’est vous qui devez la mettre «au pas» et non le contraire. En d’autres termes, ne vous demandez pas ce que vous pouvez faire pour votre grille, mais demandez-vous plutôt ce qu’elle peut faire pour vous !

Articles en relation avec les grilles

  1. Grille modulaire pour périphériques mobiles (iPhone, Android, iPad)
  2. Grilles de Mise en Page | typographie web et print
  3. Grille de mise en page, « zoning » et gabarit avec Adobe InDesign
  4. Les frameworks CSS sont le nouveau format A4
  5. #WDFR — Imprimez votre grille pour dessiner vos croquis
  6. #WDFR : les Framework CSS en ont pris «plein la grille» pendant le WDFriday
  7. Gridulator calcule la grille de votre design web
  8. EmChart — Convertir des pixels en EM
  9. Frameworks CSS — Blueprint vs 960 Grid System
  10. Framework CSS — Sémantique, maquette dynamique et autres notes
  11. Quelques notes sur les grilles de mise en page
  12. Grid — Gardez le contrôle sur votre design web
  13. Afficher / masquer votre grille de base avec jQuery

Brouillons en cours sur le même sujet

  • Adapter votre grille aux agents utilisateurs avec les « Media Queries »

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



14 commentaires pour “Calculer une grille de mise en page « typo » avec le nombre d'Or”

  1. […] This post was mentioned on Twitter by Brio Les Bons Tuyaux, Sylvain Lys and Stéphane Verdier, Sébastien Grégoire. Sébastien Grégoire said: RT @br1o: Calculer une grille de mise en page orientée typographie avec le nombre d’Or http://j.mp/aMWDmE […]

  2. […] de l’ordre de 240 x 320, 320 x 480 ou 480 x 640 pixels. Après avoir décortiqué la création d’une grille de mise en page adaptée à la résolution moyenne des écrans de bureau et des Netbooks, je vous propose de suivre […]

  3. […] Calculer une grille de mise en page « typo » avec le nombre d’Or : via @br1o […]

  4. Choko dit :

    Salut, C’est difficile à comprendre toute l’article, car ça demande beaucoup de réflexion et bagage de langage web. mais c’est intéressant. Merci

  5. XF dit :

    Bonjour, à la question peut-on mettre le nombre d’or à toutes les sauces, je répondrait peut-être mais avec une démonstration, de plus celle-ci ne doit pas partir du résultat pour arriver aux arguments ! Prenons le cas de l’interligne que je connais un peu, la règle — issue d’une longue culture — dit que pour un support papier un interlignage de 120 % par rapport au corps du caractère est suffisant. Nous avons dans cette assertion un élément capital que je ne vois pas (ou pas assez) évoqué : le support. La formule mathématique que vous cherchez dois tenir compte de la résolution écran et du rendu (variable mac / PC) de celui-ci. Actuellement je suis de l’avis d’Anne-So (http://typographisme.net/post/Typographie-à-Paris-Web) pour 140 % à 150 %. Dans le futur la résolution écran et la lisibilité sur système Windows progressant nous tendrons vers le chiffre que nos ainés ont obtenus : 120 % (peut-être même visible sur le prochain iPad !) Belle réflexion mathématique, merci, elle mérite d’être poussée…

    • ni-no dit :

      Quid de la règle de mise en page « à la française » apprise en cours, qui demande un interlignage de 100% en print?

  6. Sébastien D. dit :

    la mise en page « typo » s’appelle le « gris typographique » ;)

  7. […] une gouttière de 20 pixels en adaptant légèrement la technique évoquée dans l’article Calculer une grille de mise en page « typo » avec le nombre d’Or. Soit un interlignage de 20 pixels pour une taille de caractère de 13 pixel en utilisant : […]

  8. Super article, un peu compliqué quand on a pas l’habitude, mais je m’apprête a le décortiquer!

  9. […] Calculer une grille de mise en page « typo » avec le nombre d’Or Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ? […]

  10. mamazerty dit :

    bonjour m’autorisez vous à me servir de votre « image » de mots de cet article,en indiquant bien sûr sa provenance, lien vers votre article, pour illustrer un poême qui paraitra sur mon blog mi-juillet? merci d e votre réponse

    • Bruno Bichet dit :

      mamazerty, oui, pas de problème pour utiliser l’image dans les conditions que vous indiquez. Au plaisir de vous lire.

  11. […] Calculer une grille de mise en page « typo » avec le nombre d'Or […]



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site