Chapitre 5 : Typographie en CSS

La typographie joue un rôle essentiel dans la conception web. La manière dont le texte est présenté peut affecter la lisibilité, l’accessibilité et même l’émotion que votre site web communique. En utilisant CSS, nous pouvons contrôler divers aspects de la typographie, tels que la police, la taille et l’espacement des caractères. Dans ce cours, nous explorerons comment personnaliser la typographie dans vos projets web, y compris l’utilisation de ressources externes comme Google Fonts.

Personnalisation de la police

La propriété CSS font-family est utilisée pour spécifier la police de caractères à utiliser pour le texte. Vous pouvez spécifier plusieurs polices de secours au cas où la police principale ne serait pas disponible sur l’ordinateur de l’utilisateur. Voici un exemple :

body {
    font-family: "Arial", sans-serif;
}

Dans cet exemple, si « Arial » n’est pas disponible, le navigateur utilisera une police sans empattement (« sans-serif ») comme secours.

Personnalisation de la taille des caractères

La taille de la police est spécifiée à l’aide de la propriété CSS font-size. Il existe plusieurs unités de mesure que vous pouvez utiliser, telles que les pixels (px), les points (pt), les pourcentages (%), ou les em (em). Voici un exemple :

h1 {
    font-size: 24px;
}

Dans cet exemple, la taille de police des titres de niveau 1 (h1) est définie à 24 pixels.

Personnalisation de l’espacement des caractères

L’espacement entre les caractères, également connu sous le nom de « tracking » ou « kerning », peut être ajusté à l’aide de la propriété CSS letter-spacing. Une valeur positive augmentera l’espacement entre les caractères, tandis qu’une valeur négative la réduira. Voici un exemple :

p {
    letter-spacing: 1px;
}

Dans cet exemple, l’espacement entre les caractères des paragraphes est augmenté de 1 pixel.

Utilisation de Google Fonts ou d’autres ressources de polices externes

Google Fonts offre une vaste collection de polices gratuites que vous pouvez intégrer dans vos projets web. Pour utiliser une police Google Fonts, vous devez d’abord inclure le lien vers la feuille de style dans votre document HTML, puis spécifier la police dans votre feuille de style CSS. Voici un exemple :

Dans votre fichier HTML :

<link href="https://fonts.googleapis.com/css2?family=Roboto" rel="stylesheet">

Dans votre fichier CSS :

body {
    font-family: 'Roboto', sans-serif;
}

Dans cet exemple, la police Roboto est intégrée depuis Google Fonts et est utilisée comme police principale pour le texte du corps (body).