2.1 Propriété font-family
Les polices jouent un rôle clé dans le web design, en influençant la lisibilité et l'attrait visuel du texte. Les familles de polices définissent le style général et les caractéristiques des polices qui peuvent être utilisées sur les pages Web. En CSS, les polices sont généralement divisées en trois grandes familles : serif, sans-serif et monospace. Voyons chacune d'elles plus en détail.
Propriété font-family
La propriété font-family est utilisée pour spécifier une famille de polices. Vous pouvez indiquer plusieurs polices, en les séparant par des virgules, pour que le navigateur puisse utiliser la prochaine police dans la liste si la première n'est pas disponible.
Exemple d'utilisation de plusieurs polices
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
Exemple d'utilisation :
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
<body>
<p>Ce texte est affiché en utilisant les polices Helvetica Neue, Helvetica ou Arial.</p>
</body>
2.2 Famille de polices serif
Les polices avec empattements (serif) se caractérisent par de petites lignes ou traits ajoutés aux extrémités des lettres et des symboles. Ces polices donnent au texte un aspect plus traditionnel et formel.
Exemples de polices serif :
- Times New Roman
- Georgia
- Garamond
- Baskerville
Exemple d'utilisation :
body {
font-family: 'Times New Roman', serif;
}
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe utilisant une police serif.</p>
</body>
2.3 Famille de polices sans-serif
Les polices sans empattements (sans-serif) n'ont pas de petites lignes aux extrémités des lettres et des symboles. Ces polices apparaissent plus modernes et minimalistes, et sont souvent utilisées dans le web design pour leur bonne lisibilité à l'écran.
Exemples de polices sans-serif :
- Arial
- Helvetica
- Verdana
- Open Sans
body {
font-family: 'Arial', sans-serif;
}
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe utilisant une police sans-serif.</p>
</body>
2.4 Famille de polices monospace
Les polices à espacement fixe (monospace) ont la même largeur pour tous les caractères. Ces polices sont souvent utilisées pour afficher du code, de la documentation technique et des tableaux, où il est crucial que les caractères soient alignés verticalement.
Exemples de polices monospace :
- Courier New
- Consolas
- Monaco
- Lucida Console
Exemple d'utilisation :
body {
font-family: 'Courier New', monospace;
}
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe utilisant une police monospace.</p>
<pre>
function helloWorld() {
console.log("Hello, world!");
}
</pre>
</body>
Pour améliorer la perception et la diversité stylistique des pages Web, une combinaison de différentes familles de polices est souvent utilisée. Par exemple, les titres peuvent être stylisés avec des polices serif, tandis que le texte principal utilise des polices sans-serif. Et bien sûr, le code est toujours en monospace.
GO TO FULL VERSION