Typographie

Alignement du texte

Par défaut, dans le navigateur web, le texte est aligné à la gauche. Nous pouvons changer ce comportement à l'aide de la propriété text-align. Cette propriété accepte les valeurs left, right, center et justify.

Taille du texte

Pour changer la taille du texte, c'est la propriété font-size que nous utiliserons. Cette propriété nécessite une taille que l'on spécifiera généralement en rem.

Voici comment l'utiliser:

Poids du texte

Le poids du texte est un concept particulier. En gros, cela indique si le texte est en gras ou non. C'est toutefois un peu plus complexe. Le poid du texte varie entre les valeurs de 100 jusqu'à 900. Un texte normal est écrit dans un poids de 400 et un texte en gras dans un poids de 700. Certaines polices de caractères permettent d'avoir des poids plus grand pour un texte encore plus en gras ou des valeurs plus petites pour un texte plus mince que le normal.

Sauf indication contraire par un artiste graphique, vous utiliserez généralement seulement les valeurs 400 et 700 qui ont un mot-clé en CSS, soit normal et bold. Voici comment les utiliser:

Style du texte

Le style du texte est essentiellement lorsque nous voulons mettre le texte en italique. POur ce faire, nous utiliserons la propriété font-style. Il y a toutefois plusieurs façon différente de mettre en italique, soit en utilisant la valeur italic ou la valeur oblique.

Décoration du texte

En CSS, on nomme "décoration" tout utilisation de trait (ligne) au travers du texte. On compte donc le soulignement, le surlignement et la rayure comme des décorations. Pour arriver à ce résultat, nous utilisons la propriété text-decoration qui nous permet de spécifier quel position de ligne nous voulons, son style ainsi que sa couleur.

Voici un exemple:

Comme vous pouvez le voir dans l'exemple ci-dessus, il n'est pas obligatoire de spécifier chaque valeur de la décoration. Il est possible de simplement spécifier la position du trait ou encore simplement la position et la couleur.

Pour ce qui est de la position de la ligne et de son style, voici les valeurs qui sont acceptées:

Transformation du texte

En CSS, on parlera de transformation du texte lorsque l'on change partiellement ou complètement la casse du texte. Bref, si on désire forcer le texte en maujuscule ou en minuscule avec le CSS, nous utiliserons la propriété text-transform.

Cette propriété peut recevoir les valeurs uppercase, lowercase ou capitalize. Cette dernière valeur met la première lettre de chaque mot en majuscule.

Un contexte similaire consiste à utiliser des petites majuscules pour les lettres minuscules. Il est parfois possible que les artistes graphiques les ajoutent dans leurs designs et que vous ayez à les utiliser. Dans ce cas-ci, on utilise plutôt la propriété font-variant.

Police de caractère

La police de caractère est le style graphique dans lequel votre texte est affiché. On utilise la propriété font‑family pour définir une liste prioritaire de polices de caractères que nous voulons utiliser. Il est important de définir des familles de polices plus générique dans votre liste de priorités pour ainsi avoir une autre police pour l'affichage si votre police la plus prioritaire ne fonctionne pas.

Voici une liste des polices génériques disponible dans les navigateurs Web. Vous devez toujours en mettre une comme "fallback" dans votre liste de police de caractères lorsque vous utilisez la propriété font‑family.

Voici un exemple de l'utilisation de la propriété font-family: