Tutoriel grille verticale en CSS par Smashing Magazine

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

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 !

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.



6 commentaires pour “Tutoriel grille verticale en CSS par Smashing Magazine”

  1. 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 ?

    • Bruno Bichet dit :

      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.

  2. [...] 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 : 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. Tutoriel grille verticale en CSS par Smashing Magazine [...]

  3. Thomas dit :

    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).

  4. [...] Tutoriel grille verticale en CSS par Smashing Magazine : via @br1o [...]

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



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