Typographie, bien gérer ses textes en CSS

Les propriétés CSS typographiques permettent de modifier la police/le texte contenu dans un élément : changer sa couleur, sa forme, son alignement...

Nous allons modifier dans les différents exemples l'élément HTML suivant :

HTML
<div class="block"></div>

CSS
div.block
{
width: 350px;
height: 30px;
padding: 10px;
border: 1px solid;
}
Des mots, encore des mots, toujours des mots...

font-family

Cette propriété permet de modifier la police du texte d'un élément. Elle prend pour valeur un ou plusieurs nom de police générique, séparés par des virgules, dont l'affichage se fait par ordre décroissant en fonction de leur disponibilité.

div.block
{
font-family: helvetica, "Trebuchet MS", arial;
}
Des mots, encore des mots, toujours des mots...

Pour les polices dont le nom est composé, il faut les entourer de guillemets.
font-size

Cette propriété permet de définir la taille de la police de fond. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).

div.block
{
font-size: 10px;
}
Des mots, encore des mots, toujours des mots...
font-style

Cette propriété permet de gérer la répétition horizontale et verticale d'une image de fond. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
italicpenché
obliquesimilaire à la valeur italic
normalnon-penché

div.block
{
font-style: oblique;
}
Des mots, encore des mots, toujours des mots...

font-variant

Cette propriété permet transformer le texte d'un élément en petites capitales ou non :

ValeurDescription
small-capspetites capitales
normalforme par défaut

div.block
{
font-variant: small-caps;
}
Des mots, encore des mots, toujours des mots...

font-weight

Cette propriété permet de mettre le texte d'un élément en gras. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
boldgras
boldertrès gras
normalpas de gras

div.block
{
font-weight: bold;
}
Des mots, encore des mots, toujours des mots...

font

Cette propriété permet de définir en une seule ligne les propriétés font, en alignant les valeurs des propriétés dont on a besoin l'une derrière l'autre dans l'odre suivant :

font : font-style font-variant font-weight font-size font-family;


div.block
{
font: normal small-caps bolder 1.3em arial;
}
=
div.block
{
font-style: normal;
font-variant: small-caps;
font-weight: bolder;
font-size: 1.3em;
font-family: arial;
}
Des mots, encore des mots, toujours des mots...

color

Cette propriété permet de modifier la couleur du texte d'un élément. Elle prend pour valeur un code hexadécimal ou un nom de couleur (voir la liste des couleurs normalisées SVG 1.0). Elle peut également prendre pour valeur transparent afin de rendre le texte invisible.

div.block
{
color: MediumVioletRed;
}
Des mots, encore des mots, toujours des mots...

text-align

Cette propriété détermine l'alignement horizontal du texte d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
leftalignement à gauche
rightalignement à droite
centeralignement au centre
justifyjustifié

div.block
{
text-align: center;
}
Des mots, encore des mots, toujours des mots...


text-decoration

Cette propriété détermine le soulignement ou surlignement du texte d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
underlinesouligner
overlinesurligner
line-throughbarrer
nonepas de soulignement/surlignement

div.block
{
text-decoration: underline overline;
}
Des mots, encore des mots, toujours des mots...

Il est possible de cumuler les effets en séparant les valeurs par un espace comme dans l'exemple ci-dessus.

text-indent

Cette propriété permet de définir la longueur de l'alinéa (retrait) de la première ligne du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).

div.block
{
text-indent: 30px;
}
Des mots, encore des mots, toujours des mots...


text-transform

Cette propriété permet de gérer l'affichage en minuscules ou majuscules du texte d'un élément. Vous trouverez la liste des valeurs possibles dans la liste suivante :

ValeurDescription
capitalizepremières lettres en majuscules
uppercasetout en majuscules
lowercasetout en minuscules
noneaucune modification

div.block
{
text-transform: capitalize;
}
Des mots, encore des mots, toujours des mots...


line-height

Cette propriété permet de définir la hauteur de la ligne du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille).

div.block
{
line-height: 30px;
}
Des mots, encore des mots, toujours des mots...


letter-spacing

Cette propriété permet de modifier l'espèce entre chaque lettre du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille). Cette valeur peut être positives (lettres plus espacées) ou négatives (lettres plus serrées).

div.block
{
letter-spacing: 2px;
}
Des mots, encore des mots, toujours des mots...


word-spacing

Cette propriété permet de modifier l'espèce entre chaque mot du texte. Elle prend pour valeur une unité de taille (voir la liste des unités de taille). Cette valeur peut être positives (mots plus espacées) ou négatives (mots plus serrées).

div.block
{
word-spacing: 10px;
}
Des mots, encore des mots, toujours des mots...