Cours CSS / Choisir les polices, la taille, la graisse et la hauteur de ligne
Utilisez font-family pour définir une liste de polices de secours, font-size pour définir la taille du texte et line-height pour contrôler l'espacement entre les lignes. Une hauteur de ligne sans unité s'adapte à la taille de police de chaque élément, facilitant la gestion des styles de texte hérités.
Définir une liste ordonnée de polices de secours
body {
font-family: "Noto Sans KR", "Malgun Gothic", sans-serif;
}Le navigateur vérifie la liste des polices dans l'ordre. Si une police est indisponible ou ne contient pas un caractère, une autre police peut rendre ce caractère, donc une phrase peut utiliser plusieurs polices. sans-serif est une famille générique sans empattement, plutôt qu'un produit de police particulier. Mettez entre guillemets les noms de polices contenant des espaces.
Lister une police dans font-family ne la télécharge pas. Cet exemple utilise des polices installées et ne charge aucune police web séparée. Pour utiliser une police web, fournissez son fichier réel via @font-face ou une feuille de style fournie par un fournisseur, et vérifiez l'URL ainsi que l'autorisation de l'utiliser. Voir MDN : famille de polices.
Choisissez la taille et le poids de la police pour chaque rôle
| Propriété | exemple de valeur | Résultats à vérifier |
|---|---|---|
| font-size | Corps 1rem, titre 2rem | Si la racine est de 16px, alors 16px·32px |
| font-weight | Corps 400, Titre 700 | Différence entre lettres normales et en gras |
| line-height | Texte 1,6 | Hauteur de ligne égale à 1,6 fois la taille de la police |
rem est basé sur la taille de police de l’élément racine html. Les préférences des différents navigateurs peuvent entraîner des valeurs de pixels différentes pour le même 1rem. Avant de changer le texte en px fixe parce que le texte semble petit, vérifiez la valeur racine et la police réelle. Même si la taille est la même, la taille visuelle et la position du retour à la ligne varient selon le design de la police. Lors de la sélection d'une unité, distinguez d'abord entre CSS Couleurs et Unités : px, em, rem, et Pourcentages.
400 correspond généralement à normal, et 700 correspond à bold. Les résultats peuvent varier en fonction du poids fourni par la police, et les poids manquants peuvent être remplacés par des valeurs proches ou synthétisés. Les significations importantes dans le document sont exprimées en utilisant strong de HTML, et l'épaisseur visuelle est contrôlée à l'aide de CSS. Toutes les lettres en gras ne sont pas sémantiquement significatives.
Comparer l'héritage de la hauteur de ligne sans unité et en em
line-height aide à déterminer la hauteur d'une boîte de ligne ; cela ne signifie pas simplement l'espace vide entre les caractères, et ce n'est pas la même chose que la hauteur d'un glyphe. Utilisez margin séparément pour l'espacement entre les paragraphes. Pour plus de détails, voir Espacement et présentation des paragraphes et des listes.
Comparez lorsque la taille de police du parent est de 16px et celle de l'enfant de 32px. Avec line-height: 1.6 sur le parent, l’élément enfant hérite du multiplicateur 1.6 et obtient une hauteur de ligne de 51,2px. Avec line-height: 1.6em sur le parent, l’enfant hérite de la longueur calculée de 25,6px. Si le texte agrandi de l’élément enfant s'étendent sur plusieurs lignes, les lignes peuvent paraître encombrées ou se chevaucher.
| déclaration parentale | Hauteur de ligne du parent 16px | Hauteur de ligne héritée par l'enfant 32px |
|---|---|---|
| line-height: 1.6 | 25,6px | 51,2px |
| line-height: 1.6em | 25,6px | 25,6px |
Ces calculs d'héritage supposent que l'enfant n'a pas de déclaration line-height distincte. Une valeur déclarée sur l'enfant a la priorité sur une valeur héritée. Une hauteur de ligne sans unité facilite l'ajustement de la taille des titres et d'autres textes tout en conservant une hauteur de ligne proportionnelle. Voir MDN : hauteur de ligne.
Limiter la largeur de lecture
max-width: 65ch limite la largeur de lecture en utilisant la largeur d'avance du glyphe « 0 » de la police. Cela ne garantit pas exactement 65 caractères par ligne. Le retour à la ligne réel dépend de la police, du poids, des caractères et de la largeur disponible. Choisissez une largeur utile en lisant des paragraphes longs et réalistes.
La référence de longueur CSS définit les unités relatives aux polices, y compris ch, et explique leurs mesures de référence. Voir MDN : length.
Vérifier les polices rendues et les valeurs calculées
Enregistrez tout le code ci-dessous en UTF-8 sous fonts.html et ouvrez-le dans votre navigateur. Les paragraphes à petite police et les paragraphes comparatifs de 32px sont inclus afin que vous puissiez vérifier la relation entre la taille et l'espacement des lignes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Compare fonts and line spacing</title>
<style>
html { font-size: 100%; }
body { margin: 24px; color: #333; font-family: "Noto Sans KR", "Malgun Gothic", sans-serif; }
main { max-width: 65ch; }
h1 { font-size: 2rem; font-weight: 700; }
.copy { font-size: 1rem; font-weight: 400; line-height: 1.6; }
.compare { font-size: 16px; margin-block: 24px; padding: 16px; background: #eef6f2; }
.unitless { line-height: 1.6; }
.length { line-height: 1.6em; }
.large { margin: 0; font-size: 32px; }
</style>
</head>
<body>
<main>
<h1>Small Garden fonts</h1>
<p class="copy">The garden has plants that prefer sunlight and plants that grow in shade. Read their labels to find a suitable location for each one. Adjust the line spacing of this long paragraph to compare how easily the same text can be read.</p>
<h2>Unitless line height</h2>
<div class="compare unitless"><p class="large">Line spacing scales with the font size.</p></div>
<h2>Line spacing specified by em</h2>
<div class="compare length"><p class="large">The computed line height is inherited from the parent.</p></div>
</main>
</body>
</html>- Sélectionnez le paragraphe du corps dans les outils de développement. Le font-family calculé est une liste de candidats et n'est pas garanti d'être le nom réel de la police utilisée. Dans Chrome·Edge, vous pouvez vérifier les polices effectivement utilisées dans Rendered Fonts (polices rendues), sous Computed. D'autres navigateurs peuvent avoir des structures de menus différentes, comme un panneau dédié aux polices.
- Comparez la hauteur de ligne calculée de deux paragraphes .large. La valeur sans unité est de 51,2px et la valeur en em est de 25,6px. Changez la valeur 1.6em du deuxième parent en 1.6 pour voir si la différence disparaît, puis revenez en arrière.
- Changez la hauteur de ligne de .copy successivement à 1.2 et 1.8. Assurez-vous que le placement de la ligne change tout en maintenant la taille de la police. Il est difficile de voir la différence en regardant juste de courtes phrases d'une ligne, utilisez donc de longs paragraphes.
- Changez la largeur maximale de main à 45ch. Vérifiez si le paragraphe revient plus tôt à la ligne, puis revenez à 65ch. Si la largeur de votre fenêtre est déjà suffisamment étroite, changer la limite supérieure peut faire une petite différence.
Le guide Chrome DevTools sur les polices locales explique également comment inspecter les polices rendues. Si la police prévue est absente, vérifiez son installation et les caractères pris en charge. Pour une police Web liée séparément, inspectez sa réponse et toute erreur bloquante dans le réseau. Une police installée localement peut être utilisée sans requête réseau, donc une requête absente à elle seule n'indique pas un échec de la police.
