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