Tutoriel grille verticale en CSS par Smashing Magazine

95% des sites web sont faits de typographie ! Cette assertion d’Oliver Reichenstein dans l’article Web Design is 95% Typography semble toujours d’actualité. Dans la plupart des cas, les visiteurs se rendent sur un site pour lire. C’est une excellente raison pour prendre soin de la typographie dans le web design. Dans l’article Technical Web Typography: Guidelines and Techniques, Smashing Magazine détaille la mise en place d’une grille verticale en utilisant les règles immuables d’une bonne typographie, qu’il s’agisse de créer un carton d’invitation pour un anniversaire ou un faire-part de décès.

L’article est en anglais, mais les nombreux exemples de codes CSS et les illustrations le rendront accessible à tous sous réserve d’avoir de bonnes bases en CSS.

Après un bref rappel sur le reset CSS, le programme continue avec :

  • Choisir une police de caractère — Utilisez html { font-family: sans-serif; }pour afficher la polices sans serif par défaut du système : Helvetica sur Mac et Arial sur PC. Attention toutefois aux changements des préférences par l’utilisateur.
  • Choisir une taille de police de caractère — 16 pixels sont l’idéal, mais si vous tenez à 12 pixels, utilisez html { font-size: 0.75em; /* 16 * 0.75 = 12 */ } soit 75% de la taille par défaut du navigateur.
  • Utiliser une grille — Il existe de nombreux systèmes de grilles dont voici une liste de près de 40 frameworks CSS. Lire aussi Blueprint vs 960 Grid System et The Blue «940» Grid Simpler.
  • Nombre de caractère par ligne — Le nombre optimal de caractères par ligne est compris entre 45 et 75 signes (espaces comprises). Plus la ligne est longue, plus l’interlignage (line-height) doit être important pour garantir au lecteur un bon confort de lecture. La phrase suivante contient exactement 66 signes :
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit accumsan.
  • Rythme vertical : la ligne de base — Déterminez l’interlignage global (votre nombre magique) — 1,5 fois la taille de votre texte, par exemple — et basez toutes vos mesures là-dessus. N’oubliez pas de décaler votre grille en background au départ si besoin avec html { background: url(grid.png) center -6px repeat-y #fff; } si votre texte n’est pas parfaitement aligné sur la ligne de base de votre grille.
  • Echelle de valeur — Il faut penser aux sauts de ligne avant et après les titres et les paragraphes, s’occuper de la taille des différents niveaux de titres h1 — h6 et déterminer l’interlignage de chaque élément selon sa taille avec la formule (magic number) ÷ (font size) = (line height).

La suite de l’article donne des conseils pour gérer les signes de ponctuation et les images dans le contexte d’une grille :

Pour la route, une video de Tim Brown : More Perfect Typography :

Tim Brown – More Perfect Typography from Build on Vimeo.

→ Plus de ressources typographiques dans Le petit journal permanent de la TypOgrApHiE !