Polices

Choisir la bonne police est important. Cela joue énormément sur l’expérience utilisateur. Il faut choisir une police facile à lire, ainsi que la taille et la couleur correctes pour cette police.

Ce cours donne quelques explications sur les différents types de polices existantes, puis détaille les différentes propriétés permettant de gérer une police.

Généralités

En CSS, les types de polices peuvent être regroupés en 5 familles :

• Serif : Ce type de police a de petites barres sur les extrémités de chaque lettre (par exemple : Times New Roman, Georgia, Garamond)

• Sans-serif : Ce type de police est “lisse”. Il n’y a pas de barres sur les extrémités de chaque lettre (par exemple : Arial, Verdana, Helvetica)

• Polices monospaces : Les lettres de ces polices ont une largeur fixe. Cela donne un style de rendu mécanique (par exemple : Courier New, Lucida Console, Monaco)

• Polices cursives : Ces polices imitent les écritures manuscrites (par exemple : Brush Script MT, Lucida Handwriting)

• Les polices fantasy : Ces polices sont plutôt décoratives (par exemple : Papyrus, Comic Sans MS)

La propriété font-family

Pour définir une police, en CSS, il faut utiliser la propriété font-family.

Cette propriété doit contenir plusieurs noms de polices, afin que les navigateurs internets plus anciens puissent choisir une police qui convient et qui, malgré tout, reste en cohérence avec le design du site.

Les polices contenant plusieurs noms (Times New Roman, par exemple), doivent être déclarées dans des guillemets.

Exemple :

p {
    font-family: "Times New Roman", Helvetica, serif; /* Ici, Times new Roman est entre guillemets et plusieurs noms de polices sont déclarées afin qu'un navigateur plus ancien puisse en choisir une compatible */
}

Les polices “web safe”