Mettez en valeur votre contenu avec CSS

Nous verrons au cours de cet article différentes techniques CSS à garder en tête lors de votre création graphique / intégration. Nous ferons en sorte de voir des exemples concrets que nous pourrons réutiliser dans nombre de projets.

J’aborderai le thème de hiérarchie qui me semble être l’un des points dominants du webdesign. L’ordre dans lequel nous percevons les informations modifie la façon dont nous les interprétons et leur donnons une importance.

Hiérarchie des textes

Chaque élément de texte sur votre page doit être pensé avec l’ensemble. Est-il lisible ? Est-il perdu au milieu d’autres éléments semblables ? Est-il gênant ?

Nous avons avec CSS de nombreux outils pour rendre nos textes plus agréables, plus lisibles et donc plus efficaces.

Le premier point important à ne pas négliger est bien sûr la taille du texte. Du titre de page au titre de section, en passant par les liens du menu ou le paragraphe de blog, chaque élément différent crée un sens de lecture, et amène les yeux du lecteur au contenu que vous choisirez.

N’oubliez pas que les balises h1~h6 sont là aussi pour définir cet ordre de lecture.

body { font-size: 100%; }
h1 { font-size: 4em; /* 16 x 4 = 64 */ }
h2 { font-size: 2.5em; /* 16 x 2.5 = 40 */ }
h3 { font-size: 1.5em; /* 16 x 1.5 = 24 */ }
p { font-size: 1em; /* 16 x 1 = 16 */ }

La suite de Fibonacci ici appliquée à font-size, expliqué en détails dans cet excellent article.

Avec la diversification des supports de nos sites ou applications web, il est maintenant primordial de trouver le juste équilibre pour la taille de nos textes afin qu’ils soient lisibles en toute situation.

La façon d’utiliser les tailles de texte a beaucoup évolué ces dernières années dans le webdesign, en grande partie grâce aux nouvelles possibilités en terme de familles de caractères.

A utiliser avec précaution, on préférera se cantonner à 2 ou 3 typographies sur une même page pour ne pas perdre le lecteur. Grâce à TypeKit ou GoogleFont, il est aujourd’hui facile de mettre en place des textes originaux et organisés.

Il existe beaucoup de sites comparant différentes typographies et la manière dont celles-ci s’accordent entre elles ou non (hellohappy.org entre autres).

Dans cette logique de hiérarchie, on appliquera en général une typo plus imposante sur les éléments de titre et une typo plus lisible sur le contenu.

Après ces quelques font-size et font-family, voyons la propriété font-weigth. Certaines fonts vous permettrons d’appliquer des graisses précises, de 100 pour la plus fine à 900 pour la plus épaisse. Néanmoins, nous pourrons la plupart du temps utiliser des termes plus explicites :

p {
  font-weight: normal; /* équivalent à 400 */
}
p .strongElement {
  font-weight: bolder; /* police plus grasse relativement au parent */
}
h4 {
  font-weight: lighter; /* police moins grasse relativement au parent */
}
strong {
  font-weight: bold; /* équivalent à 700 */
}

Enfin, nous utiliserons à chaque fois la propriété color bien connue de tous. Il existe différentes façons de déclarer les couleurs de nos textes.

p {
  color: #4682b4;
  color: steelblue;
  color: rgb(70,130,180);
}

Dans cet exemple, une même couleur est définie successivement en hexadécimal, par son nom puis par sa valeur RVB.

La couleur nous permettra elle aussi de définir encore plus précisement la hiérarchie des éléments de notre page. Un élément contrasté avec le fond ressortira mieux aux yeux de l’utilisateur tandis qu’un élément plus diffus restera plus discret (mais peut-être que nous en aurons moins l’utilité).

Laissez respirer

Il y a une chose importante en design et plus particulièrement sur le web: Laisser respirer l’utilisateur

En effet, plus il y a d’éléments sur votre page, plus l’utilisateur aura d’informations à accumuler.

Nous avons vu la hiérarchie des textes qui l’aidera à faire la part des choses entre ce dont il a besoin ou non et ce que nous voulons qu’il lise ou non.

La hiérarchie des textes n’est pas la seule solution et la complexité de nos pages web est telle que les seules différences de taille ou de typographie de nos textes ne seront pas suffisantes.

La propriété line-height permet de définir la hauteur des lignes. L’idéal étant de définir un espacement suffisament grand pour rendre la lecture confortable mais suffisament petit pour conserver la cohésion du paragraphe.

p {
  line-height: 14px;
  line-height: 1; /* relatif au font-size de l'élément 'p' */
  line-height: 1em; /* relatif au font-size de l'élément 'p' */
  line-height: 100%; /* relatif au font-size de l'élément 'p' */
  line-height: normal; /* Valeur par défaut du navigateur */
}

En plus de la hauteur des lignes, il est possible d’appliquer des marges à nos éléments. Celles-ci peuvent être internes ou externes.

La propriété margin nous permet de définir les marges extérieures d’un élément.

p {
  margin: 20px; /* applique une marge extérieure de 20px tout autour de l'élément */
  margin: 20px 0; /* applique une marge extérieure de 20px en haut et en bas de l'élément */
  margin: 20px 0 10px; /* applique une marge extérieure de 20px en haut, 0 sur les côtés et 10px en bas de l'élément */
  margin: 10px 20px 30px 40px; /* on définit dans l'ordre la marge du haut, de droite, du bas et de gauche (retenons le sens des aiguilles d'une montre) */
}

Lorsque l’une des valeurs est égale à 0, on préfèrera écrire directement ‘0’ (sans unité).

La propriété padding sera utilisée de la même manière que la propriété margin sauf qu’elle sera appliquée à l’intérieur de l’élément, entre la bordure et le contenu.

A savoir : La propriété padding (comme la propriété border), par défaut sur nos navigateurs, augmentera la taille totale de l’élément. Il serait plus logique qu’ils soient contenus dans l’élément, et c’est possible : on utilisera la propriété “box-sizing:border-box”.

Conclusion

Il n’est évidemment pas possible d’aborder tous les aspects de la mise en page CSS dans ce seul article, mais grâce à ces quelques bases vous êtes d’ores et déjà en mesure de mieux mettre en valeur vos contenus aux yeux de vos visiteurs.

Je vous invite à visiter ce site interactif qui aborde aussi la mise en page de façon intuitive et naturelle, ainsi que cette référence pour les propriétés CSS qu’est le Mozilla Developer Network.

L’équipe Synbioz.

Libres d’être ensemble.