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 :
- Utiliser les guillemets,
- Utiliser les tirets,
- Utiliser les points de suspension,
- Placer correctement la ponctuation,
- Gérer les images avec 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 !
Très intéressant comme d’habitude 😉 Je n’utilise pas de nombre magique, mais une valeur en pixel (15px souvent) que j’utilise comme nombre par lequel chaque ligne doit pouvoir être divisée pour donner un entier.
La technique dont tu parles semble plus adaptée, mais garantie-t-elle la conservation de ce rythme lors du zoom du texte ?
Je crois qu’on fait la même chose : je prends la valeur calculée de mon « chiffre magique » pour obtenir une valeur en em par la suite, pour l’interlignage. Si la taille des <h1> est de 28px et l’interlignage de 21px – le nombe magique – soit 1.6em par rapport à un font-size de 14px (0.875em sur la balise html), j’utiliserai 21px/28px=0.75em pour l’interlignage des titres. L’idée, c’est que les valeurs exprimées en pixels dans les calculs peuvent être définies en em dans la feuille de style.
Article intéressant 🙂 Je remplacerais « punctuation » par « ponctuation » par contre, vu que tout le reste a été traduit (dans la liste de liens avant la vidéo).
C’est corrigé, merci 🙂