Font

Plusieurs propriétés CSS permettent de contrôler l'apparence d'un texte. Voici quelques-unes des propriétés les plus courantes.

color

La propriété color permet de définir la couleur du texte. Cette propriété accepte toutes les unités de couleur.

color color font-family

La propriété font-family permet de spécifier la police de caractères pour afficher du texte dans un élément.

Cette propriété accepte le nom d'une police:

font-family: Helvetica;

Ou encore une liste de polices:

font-family: Helvetica, Arial, sans-serif;

Cette dernière possibilité présente deux avantages:

  1. Fournir une police de substitution si une police est indisponible. Par exemple, les appareils Windows n'ayant pas la fonte Helvetica par défaut, ces appareils utiliseront la prochaine police dans la liste compatible, soit Arial.
  2. Si un caractère est manquant dans la police ("é", "ë", "ç", etc.) le navigateur utilisera un caractère de la prochaine police afin de le remplacer.
font-family font-family font-weight

La propriété font-weight permet de définir la graisse d'un texte.

Par exemple:

font-weight: bold;

Plusieurs graisses sont généralement disponibles. Ces graisses peuvent être spécifiées via leur valeur numérique ou encore leur nom.

NUMÉRIQUE NOM
100 thin
200 extra light
300 light
400 normal
500 medium
600 semi-bold
700 bold
800 extra bold
900 black

Par défaut, si aucune graisse n'est spécifiée, le texte est en normal (400). Il est aussi possible de spécifier au texte d'être légèrement plus fin que sont texte courant grâce au mot-clé lighter ou encore plus gras, grâce à bolder.

font-weight font-weight font-size

La propriété font-size permet de définir la taille du texte. Bien que l'unité la plus courante soit les pixels, toutes les unités de mesure sont acceptées.

font-size: 16px;

Par défaut, si aucune taille n'est spécifiée, la majorité des navigateurs lui attribueront la taille de 16px. Il est aussi possible de spécifier à un texte d'être légèrement plus petite que sont texte courant grâce au mot-clé smaller ou encore plus gros, grâce à larger.

Bien que les px soient très répandus, il ne faut pas sous-estimer les avantages offerts par les rem et em.

font-size font-size font-style

La propriété font-style permet de définir si un texte devrait apparaitre en italique ou non, grâce aux valeurs:

  • normal (par défaut)
  • italic
font-style font-style line-height

La propriété line-height indique la hauteur de chacune des lignes de texte. Bien que cette propriété accepte les valeurs en pixel, la valeur la plus répandue et la plus polyvalente consiste en un ratio basé sur la taille du texte.

Par exemple:

line-height: 1.5;

Définit une hauteur de ligne de 24px si la taille de texte est de 16px, puisque: 16px * 1.5 = 24px.

Généralement, un line-height de base est définie sur la balise <body>. Ainsi il affecte tous les éléments de la page.

line-height line-height letter-spacing

La propriété letter-spacing permet de spécifier l'espacement entre chacune des lettres d'un texte. Cette propriété accepte toutes les unités de mesure CSS, mais est particulièrement efficace avec les em.

Par exemple:

letter-spacing: 0.5em;

Définis un espacement entre les lettres équivalent à une demi-largeur de lettre. Bref, si la taille de texte est de 16px, puisque: 16px * 0.5em = 8px, un espace de 8px sera ajouté entre chaque lettre.

Les valeurs négatives sont permises. letter-spacing letter-spacing