Polices CSS

Styliser les polices avec CSS

Choisir la bonne police et le bon style est très important pour la lisibilité du texte sur une page.

CSS fournit plusieurs propriétés pour styliser la police du texte, y compris changer leur apparence, contrôler leur taille et leur gras, gérer les variantes, etc.

Les propriétés de police sont : font-family, font-style, font-weight, font-size et font-variant.

Voyons chacune de ces propriétés de police une par une plus en détail.

Type de polices

La font-family propriété est utilisée pour spécifier la police à utiliser pour le rendu du texte.

Cette propriété peut contenir plusieurs noms de polices séparés par des virgules comme système de secours , de sorte que si la première police n'est pas disponible sur le système de l'utilisateur, le navigateur essaie d'utiliser la seconde, et ainsi de suite.

Par conséquent, listez d'abord la police que vous voulez, puis toutes les polices qui pourraient remplir la première si elle n'est pas disponible. Vous devez terminer la liste avec une famille de polices génériques composée de cinq élément : serif, sans-serif, monospace, cursive et fantasy. Une déclaration de famille de polices typique pourrait ressembler à ceci :

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

Remarque : Si le nom d'une famille de polices contient plusieurs mots, il doit être placé entre guillemets, comme "Times New Roman", "Courier New", "Segoe UI", etc.

Les familles de polices les plus couramment utilisées dans la conception Web sont serif et sans-serif , car elles sont plus adaptées à la lecture. Alors que les polices à espacement fixe sont couramment utilisées pour afficher du code, car dans cette police de caractères, chaque lettre occupe le même espace qui ressemble à du texte dactylographié.

Les polices cursives ressemblent à une écriture cursive ou à une écriture manuscrite. La police fantasy représente une police artistique, mais elle n'est pas largement utilisée en raison d'une faible disponibilité sur les systèmes d'exploitation.

Différence entre les polices Serif et Sans-serif

Les polices Serif ont une petite ligne ou un trait aux extrémités des caractères, tandis que les polices sans-serif sont plus droites et n'ont pas ces petits traits. Voir l'illustration suivante.

Le style de police

La propriété font-style est utilisée pour définir le style de police pour le contenu textuel d'un élément.

Le style de police peut être normal, italic ou oblique. La valeur par défaut est normal.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

p.normal {
  font-style: normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

Remarque : à première vue, les styles de police oblique et italique semblent identiques, mais il y a une différence. Le style italic utilise une version italique de la police tandis que le style oblique est simplement une version inclinée ou inclinée de la police normale.

Taille de police

La propriété font-size est utilisée pour définir la taille de la police du contenu textuel d'un élément.

Il existe plusieurs façons de spécifier les valeurs de taille de police, par exemple avec des mots-clés, un pourcentage, des pixels, des ems, etc.

Définir la taille de la police avec des pixels

Définir la taille de la police en valeurs de pixel (par exemple 14px, 16px, etc.) est un bon choix lorsque vous avez besoin de précision en pixels. Le pixel est une unité de mesure absolue qui spécifie une longueur fixe.

Essayons l'exemple suivant pour comprendre comment cela fonctionne :

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

La définition des tailles de police en pixel n'est pas considérée comme très accessible, car l'utilisateur ne peut pas modifier la taille de la police à partir des paramètres du navigateur. Par exemple, les utilisateurs ayant une vision limitée ou basse peuvent souhaiter définir une taille de police beaucoup plus grande que la taille que vous avez spécifiée.

Par conséquent, vous devez éviter d'utiliser les valeurs de pixels et utiliser plutôt les valeurs relatives à la taille de police par défaut de l'utilisateur si vous souhaitez créer une conception inclusive.

Astuce : Le texte peut également être redimensionné dans tous les navigateurs à l'aide de la fonction de zoom . Cependant, cette fonctionnalité redimensionne la page entière, pas seulement le texte. Le W3C recommande d'utiliser les valeurs em ou pourcentage (%) afin de créer des mises en page plus robustes et évolutives.

Définition de la taille de la police avec EM

L'unité em fait référence à la taille de la police de l'élément parent. Lors de la définition de la propriété font-size, 1eme st égal à la taille de la police qui s'applique au parent de l'élément .

Donc, si vous définissez un font-size de 20px sur l'élément body, puis 1em = 20px et 2em = 40px.

Cependant, si vous n'avez défini la taille de la police nulle part sur la page, il s'agit de la valeur par défaut du navigateur, qui est normalement de 16 pixels. Par conséquent, par défaut 1em = 16px, et 2em = 32px.

Examinons l'exemple suivant pour comprendre comment cela fonctionne :

h1 {
    font-size: 2em;    /* 32px/16px=2em */
}
p {
    font-size: 0.875em;    /* 14px/16px=0.875em */
}

Utilisation de la combinaison de pourcentage et EM

Comme vous l'avez observé dans l'exemple ci-dessus, le calcul des valeurs em ne semble pas simple. Pour simplifier cela, une technique courante consiste à définir le font-size de l'élément body sur 62.5%(c'est-à-dire 62,5 % de la valeur par défaut de 16 px), ce qui équivaut à 10 px ou 0,625 em.

Vous pouvez maintenant définir le font-size pour tous les éléments utilisant des unités em, avec une conversion facile à mémoriser, en divisant la valeur px par 10. De cette façon 10px = 1em, 12px = 1.2em, 14px = 1.4em, , 16px = 1.6em, etc. Jetons un œil à l'exemple suivant :

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;    /* 2em = 28px */
}

Définition de la taille de la police avec Root EM

Pour rendre les choses encore plus simples, CSS3 a introduit rem l'unité (abréviation de "root em") qui est toujours relative à la taille de la police de l'élément racine ( html), quel que soit l'endroit où se trouve l'élément dans le document (contrairement à em ce qui est relatif à la taille de la police de l'élément parent).

Cela signifie que cela 1rem équivaut à la taille de police de l'élément html, qui est 16px par défaut dans la plupart des navigateurs. Essayons un exemple pour comprendre comment cela fonctionne réellement :

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;    /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;    /* 2rem = 20px (not 28px) */
}

Définition de la taille de la police avec des mots-clés

CSS fournit plusieurs mots-clés que vous pouvez utiliser pour définir les tailles de police.

Une taille de police absolue peut être spécifiée à l'aide de l'un des mots clés suivants : xx-small, x-small, small, medium, large, x-large, xx-large. Alors qu'une taille de police relative peut être spécifiée à l'aide des mots-clés : smaller ou larger. Essayons un exemple et voyons comment cela fonctionne :

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

Remarque : Le mot-clé medium est équivalent à la taille de police par défaut des navigateurs, qui est normalement de 16 px. De même, xx-small équivaut à 9 pixels, x-small à 10 pixels, small à 13 pixels, large à 18 pixels, x-large à 24 pixels et xx-large à 32 pixels.

Conseil : En définissant une taille de police sur l'élément body, vous pouvez définir la taille relative de la police partout ailleurs sur la page, ce qui vous donne la possibilité d'augmenter ou de réduire facilement la taille de la police en conséquence.

Définition de la taille de la police avec les unités de la fenêtre

Les tailles de police peuvent être spécifiées à l'aide d'unités de fenêtre telles que vw (vertical-width) ou vh (vertical-height).

Les unités de la fenêtre d'affichage font référence à un pourcentage des dimensions de la fenêtre d'affichage du navigateur, où 1vw = 1 % de la largeur de la fenêtre d'affichage et 1vh = 1 % de la hauteur de la fenêtre d'affichage. Par conséquent, si la fenêtre d'affichage a une largeur de 1600px, 1vw est de 16px.

Essayez l'exemple suivant en redimensionnant la fenêtre du navigateur et voyez comment cela fonctionne :

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

Cependant, il y a un problème avec les unités de la fenêtre. Sur les petits écrans, les polices deviennent si petites qu'elles sont à peine lisibles. Pour éviter cela, vous pouvez utiliser la fonction CSS calc(), comme ceci :

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

Dans cet exemple, même si la largeur de la fenêtre devient 0, la taille de la police serait d'au moins 1em ou 16px.

Vous utilisez en outre les requêtes multimédias (Media queries) CSS pour créer une typographie plus réactive et fluide.

Poids de la police

La propriété font-weight spécifie le poids ou le gras de la police.

Cette propriété peut prendre l'une des valeurs suivantes : normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 et inherit

Les valeurs numériques 100- 900 spécifient les poids de police, où chaque nombre représente un poids supérieur à son prédécesseur. 400 est identique à normal & 700 est identique à bold.

Les valeurs bolder et lighter sont relatives à l'épaisseur de police héritée, tandis que les autres valeurs telles que normal et bold sont des épaisseurs de police absolues.

Essayons un exemple pour comprendre le fonctionnement de cette propriété :

p {
    font-weight: bold;
}

Remarque : La plupart des polices ne sont disponibles que dans un nombre limité d'épaisseur ; souvent, ils ne sont disponibles qu'en normal et en gras . Dans le cas où une police n'est pas disponible dans le poids spécifié, une alternative sera choisie qui est le poids disponible le plus proche.

Variante de police

La propriété font-variant permet d'afficher le texte dans une variation spéciale en petites majuscules.

Les petites majuscules (Small-caps or small capital letters) sont légèrement différentes des lettres majuscules normales, dans lesquelles les lettres minuscules apparaissent comme des versions plus petites des lettres majuscules correspondantes.

Essayez l'exemple suivant pour comprendre le fonctionnement réel de cette propriété :

p {
    font-variant: small-caps;
}

La valeur normal supprime les petites majuscules du texte qui est déjà formaté de cette façon.