La typographie en CSS...
Tags: webdev, style, font, typographie
Published: 2023-07-18 09:10:13

La typographie est un élément essentiel dans la conception de sites web et d'applications, car elle joue un rôle majeur dans l'expérience utilisateur et l'accessibilité. C’est aussi l'art et la technique d'agencement des caractères pour créer un texte visuellement agréable et lisible. Elle offre la possibilité de manipuler et de personnaliser les polices, la famille de polices, la taille, le poids, l'épaisseur des lignes et l'alignement du texte grâce aux propriétés CSS (Cascading Style Sheets). Ce dernier est un langage utilisé pour styliser les pages Web. Il permet de contrôler l'apparence des éléments sur une page, y compris la typographie. C'est une partie essentielle de la conception Web, car elle peut affecter de manière significative l'apparence générale d'un site Web.
Dans cet article, nous explorerons différentes propriétés CSS utilisées pour manipuler la typographie et améliorer l'apparence de notre contenu.

## Famille de polices
La famille de polices peut être un nom de police unique ou une liste de noms de polices séparés par des virgules. Par exemple, nous pouvons choisir entre des polices classiques telles que Arial, Times New Roman, ou opter pour des polices plus modernes et créatives disponibles sur le Web (sur [Google Fonts](https://fonts.google.com/), par exemple). 

En CSS, on utilise cette propriété `font-family `pour spécifier la famille de polices pour un élément. En voici la syntaxe :

```CSS
selecteur {
  font-family: police1, police2, police3;
}

```
Comme vous pouvez le voir, la spécification de plusieurs familles de polices dans l'ordre de préférence garantit une meilleure compatibilité entre les navigateurs, car si la première police n'est pas disponible, le navigateur utilisera la suivante.

Par exemple, le code suivant définirait la famille de polices de l' h1 élément sur « _Arial, sans-serif_ » :

```CSS
h1 {
  font-family: Arial, sans-serif;
}

```
Si le navigateur n'a pas la police spécifiée, il essaiera de trouver une police similaire.

## Taille de police
La propriété `font-size` spécifie la taille de la police d'un élément. La taille de la police peut être spécifiée en `pixels`, `ems` ou `pourcentages`. Il est important de choisir une taille appropriée qui soit à la fois lisible et adaptée à l'interface utilisateur. Une taille de police trop petite peut rendre la lecture difficile, tandis qu'une taille trop grande peut nuire à l'agencement général de la page. Il est recommandé d'utiliser des unités relatives telles que les _pourcentages_ ou les _ems_ pour garantir une mise à l'échelle proportionnelle du texte en fonction de la taille de la fenêtre du navigateur.

Par exemple, le code suivant définirait la taille de la police de l' _p_ élément sur _16 pixels_ :

```CSS
p {
  font-size: 16px;
}

```

## Poids de la police
La propriété `font-weight` spécifie l'épaisseur de la police d'un élément. Elle permet de donner à un texte une apparence plus fine ou plus grasse. Les valeurs couramment utilisées sont les mots-clés `normal` (pour un texte normal), `bold` (pour un texte en gras) et `lighter` (pour un texte plus léger). Cependant, les valeurs numériques peuvent également être utilisées comme "100" pour une police plus légère et "900" pour une police plus grasse.
Cela se présente comme suit:

- `normal` : L'épaisseur de police par défaut.
- `bold` : un poids de police plus lourd.
- `bolder` : une épaisseur de police plus lourde que l'épaisseur de police actuelle.
- `lighter` : une épaisseur de police plus légère que l'épaisseur de police actuelle.

Par exemple, le code suivant définirait l'épaisseur de la police de l' _h1_ élément sur gras :

```CSS
h1 {
  font-weight: bold;
}

```

## Style de police
La propriété CSS `font-style` spécifie le style de police d'un texte. Il peut être défini sur l'une des trois valeurs suivantes :

- `normal` - Le style de police par défaut.
- `italic` - Un style de police incliné.
- `oblique` - Un style de police incliné qui est créé en inclinant artificiellement les glyphes d'une police normale.

La propriété `font-style` peut être utilisée pour créer une variété d'effets typographiques. Elle permet d’utiliser des polices spécifiques pour chaque style, mais également elle permet d'ajouter un style rapide à une police par défaut. Par exemple, vous pouvez l'utiliser pour rendre le texte plus formel ou informel, ou pour mettre en valeur certains mots ou expressions.

Voici un exemple d'utilisation de la propriété `font-style` :

```CSS
p {
  font-style: italic;
}

```
Ce code mettra tout le texte de l' p élément en italique.
Vous pouvez également utiliser la propriété `font-style` pour créer un style de police de secours. Par exemple, si vous spécifiez le `italic` style de police, mais que le navigateur n'a pas de version italique de la police, le navigateur utilisera le oblique style de police à la place.

Voici un exemple de création d'un style de police de secours :

```CSS
p {
  font-style: italic;
  font-style: oblique;
}

```
La manipulation de l'épaisseur des lignes de texte peut être réalisée à l'aide de la propriété `text-decoration`. Il est courant d'utiliser cette propriété pour souligner ou barrer un texte, en utilisant respectivement les valeurs `underline` et `line-through`. Cependant, elle peut également être utilisée pour augmenter l'épaisseur des lignes de texte en spécifiant une valeur telle que `double` ou `thick`, pour un effet plus visible et distinctif.

La propriété CSS `text-decoration` spécifie la décoration ajoutée au texte. C'est une propriété abrégée pour:

- `text-decoration-line` (required): Définit le type de décoration utilisé, tel que underline ou line-through.
- `text-decoration-color`: Définit la couleur de la décoration.
- `text-decoration-style`: Définit le style de la ligne utilisée pour la décoration, comme solid, wavy ou dashed.
- text-decoration-thickness_: Définit l'épaisseur de la ligne utilisée pour la décoration.

La propriété `text-decoration-line` spécifie le type de décoration de texte à utiliser (souligné, surligné, etc.). Les valeurs possibles sont :

- `none` - Pas de décoration
- `underline` - Souligné
- `overline` - Surligné
- `line-through` - ligne traversante
- `blink` - Cligner
- `inherit` - Hérite la décoration de l’élément parent 

La propriété `text-decoration-color` spécifie la couleur de la décoration du texte. La valeur peut être un nom de couleur, un code de couleur hexadécimal ou une valeur de couleur RVB.
La propriété `text-decoration-style` spécifie le style de décoration du texte (solide, pointillé, etc.). Les valeurs possibles sont :

- `solid` - Ligne continue
- `dotted` - ligne pointillée
- `dashed` - Ligne interrompue
- `double` - Double ligne
- `wavy` - Ligne ondulée
- `inherit` - Hérite le style de décoration du texte de l'élément parent

La propriété `text-decoration-thickness` spécifie l'épaisseur de la décoration du texte. La valeur peut être un nombre, une longueur ou un pourcentage. Un nombre est multiplié par la taille de police de l'élément pour déterminer l'épaisseur. Une longueur est l'épaisseur réelle de la ligne, en pixels ou autres unités. Un pourcentage est un pourcentage de la taille de police de l'élément.

Par exemple, le code suivant définit la décoration du texte de tous p les éléments sur un soulignement de couleur bleue et d'une épaisseur de 2 pixels :

```CSS
p {
  text-decoration: underline blue 2px;
}

```

Le code suivant définit la décoration du texte de tous a les éléments sur une ligne traversante avec une couleur rouge et un style en pointillé :

```CSS
a {
  text-decoration: line-through red dotted;
}

```

## Hauteur de la ligne
La propriété `line-height` est couramment utilisée pour définir la distance entre les lignes de texte. Sur les éléments de niveau bloc, il spécifie la hauteur minimale des boîtes de ligne dans l'élément. Sur les éléments en ligne non remplacés, il spécifie la hauteur utilisée pour calculer la hauteur de la boîte de ligne.
La propriété `line-height` peut être définie sur un nombre, une longueur ou un pourcentage. Un nombre est multiplié par la taille de police de l'élément pour déterminer la hauteur de ligne. Une longueur est la hauteur réelle de la ligne, en pixels ou autres unités. Un pourcentage est un pourcentage de la taille de police de l'élément.

Par exemple, le code suivant définit la hauteur de ligne de tous p les éléments sur 1,5 fois la taille de la police :

```CSS
p {
  line-height: 1.5;
}

```

Le code suivant définit la hauteur de ligne de tous p les éléments sur 20 pixels :

```CSS
p {
  line-height: 20px;
}

```

Le code suivant définit la hauteur de ligne de tous p les éléments à 150 % de la taille de la police :

```CSS
p {
  line-height: 150%;
}

```

## Alignement du texte
La propriété `text-align` spécifie l'alignement du texte d'un élément. Elle permet de contrôler l'alignement du texte. Les valeurs courantes sont `left` (alignement à gauche), `right` (alignement à droite), `center` (alignement centré) et `justify` (alignement justifié). 

Cette propriété est utile pour améliorer la lisibilité et l'esthétique du contenu en le plaçant correctement sur la page. L'alignement du texte peut être spécifié avec l'un des mots clés suivants :

`left` : l'alignement du texte par défaut.
`center` : Le texte est centré.
`right` : le texte est aligné à droite.
`justify` : le texte est justifié, de sorte qu'il remplit la largeur de l'élément.

Par exemple, le code suivant définirait l'alignement du texte pour l' `p` élément au centre :

```
CSS
p {
  text-align: center;
}

```

## Conclusion
Les propriétés CSS présentées dans cet article peuvent être utilisées pour manipuler les polices, la famille de polices, la taille, l'épaisseur, l'épaisseur de ligne et l'alignement du texte. Elles offrent un large éventail d'options pour personnaliser l'apparence du texte dans leurs créations. En choisissant soigneusement les familles de polices, les tailles, les poids, les épaisseurs de lignes et l'alignement, il est possible de créer des interfaces utilisateur agréables à l'œil et faciles à lire. Il est important de prendre en compte l'accessibilité et de tester différents styles pour garantir une expérience utilisateur optimale.

## Les références
[Propriétés des polices CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/font)
[Propriété CSS line-height](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)