Excellent article paru (encore eux!) sur Alistapart, cette fois-ci écrit par Wilson Miner, et traitant de l’usage strict des repères d’une grille à l’heure de composer et de coder une page Web.
Au delà de la simple grille de lecture d’une page Web, il s’agit d’appliquer des principes simple de composition, mais aussi de programmation xHTML/CSS d’une page. L’auteur s’intéresse notamment à la maîtrise des alignements et espacements verticaux des éléments typographiques d’une page Web. Voici un aperçu des principaux enseignements de cet article.

On y apprend notamment de petites choses, simples en apparence, mais finalement bigrement malignes, telles que celle-ci (attention traduction maison…) :

Paragraphes et titres

Commençons par mettre à zéro les attributs margin et padding histoire de ne pas avoir à se soucier des styles par défaut appliqués par les navigateurs. [Hé oui, premier enseignement au cas où vous ne vous en souvenez plus : si vous ne dites rien concernant les margin et padding, les navigateurs appliquent des valeurs que vous ne maîtrisez pas]
En pratique, vous pourrez avoir envie ou besoin de mettre des valeurs plus adaptées à votre projet, mais pour les besoins de cet exemple, un bon vieux sélecteur astérisque suffira.

* {
margin: 0;
padding: 0;
}

Ceci étant fait, nous souhaitons des espaces entre chaque paragraphe, alors nous allons précisez des margin pour chaque élément p :

p {
margin-bottom: 18px;
}


En même temps que nous allons fixer la taille des fontes, il faut également attribuer les hauteurs de lignes (attribut line-height) :

h1 {
font-size: 24px;
line-height: 36px;
margin-bottom: 18px;
}
h2 {
font-size: 18px;
line-height: 18px;
margin-bottom: 18px;
}
h3 {
font-size: 12px;
line-height: 18px;
}

Et ainsi de suite… Beaucoup d’enseignements forts utiles et à mettre entre toutes les mains.

> Lire l’article Setting Type on the Web to a Baseline Grid.