Après plus de 14 années de présence sur le web, je continue encore aujourd'hui cette incroyable aventure qu'est la découverte du virtuel. Lampe torche, sac à dos, planche de surf et bien sûr ce calepin indispensable pour mémoire.

#154 Question de style 17 Mars 2007

Art Technologie Programmation

Attention, il est important de considérer que cet article est une archive, son contenu est probablement obsolète!

CSS & Style

Contrairement aux idées reçues, il n'est pas évident de jouer avec les feuilles de styles (CSS), il faut connaître les propriétés et leurs différentes valeurs pour connaître à l'avance le résultat de l'affichage.

Lorsque nous concevons une feuille de style, nous avons d'office tendance à jouer sur les propriétés simples dont margin, padding pour aérer la présentation. Or, nous oublions trop souvent qu'il existe d'autres propriétés qui permettent à l'affichage d'être plus souple, plus espacé.

Dans l'ordre, nous avons line-height, letter-spacing, word-spacing, et text-align, quatre propriétés qui améliorent considérablement la lisibilité du texte.

line-height : Il faut augmenter sa valeur qui, par défaut, est beaucoup trop faible. La valeur indiquée permet de changer la hauteur de ligne. Suivant la taille de vos caractères, ajoutez plus ou moins 1em à la valeur de font-size.

letter-spacing : Rarement, voire jamais utilisée, cette propriété s'avère utile pour tout ce qui est espacement des textes en gras, des textes épais ou condensés. Cette propriété est très utile pour l'amélioration des titres, elle leur donne un petit coup de punch.

word-spacing : Jamais utilisée. Elle peut être utilisée pour tout les designs qui veulent se rapprochent du genre journal papier.

text-align : Depuis que mirmo m'a fait découvert la valeur justify, je l'utilise tout le temps. Elle transforme les espaces entre les mots pour obtenir des lignes de mêmes tailles, soit d'avoir des paragraphes, listes, de formes carrées, structurées.

Un exemple de code pour finir la route :

p {
   font-size:0.7em;
   font-family:verdana, sans-serif;
   text-align:justify;
   line-height:1,7em;
}

Commentaires

giz404 18 Mars 2007

Entièrement d'accord en ce qui concerne la line-height, en revanche, je n'utilise que rarement letter-spacing (peu précis) et encore moins word-spacing (on a rapidement tendance à perdre en lisibilité je trouve)

Pour ce qui est de la justification, j'ai le plus souvent tendance à employer un alignement à gauche, car text-align : justify produit des fois des résultats peu probants (alignement forcé, et non "inteliigent" comme c'est le cas pour les logiciels de PAO)
Reply

À propos de l'auteur

Puce Web Developpeur chez Google (San Francisco, California), j'adore l'aventure, la découverte, les nouveautés et les challenges. Entre les développements web, les bidouilles iphone et les pauses créatives, je voyage avec mon appareil photo.