cours/docs/dev/01-debutant/typographie.md

77 lines
2.7 KiB
Markdown

# Utiliser des typographies sur le web
Lorsque l'on publie du contenu sur le web, nous avons la possibilité de personnaliser les polices de caractères utilisées.
## Les polices système
Il existe une famille informelle de polices appellées "polices systèmes". Ce sont les polices qui ont le plus de chance d'être installées sur la quasi-totalité des ordinateurs, quelque soit le système d'exploitation utilisé. On y trouve notamment :
- Arial
- Times New Roman
- Trebuchet
- Verdana
- Georgia
- Courier
## Modifier la police
En CSS, la propriété permettant de changer la police de caractères est `font-family`
```css
body {
font-family: Arial;
}
```
Afin de s'assurer un certain contrôle sur la police affichée dans le cas où l'utilisateur n'aurait pas celle que nous voulons utiliser, il convient de lister des polices alternatives. On termine généralement en utilisant un mot-clé générique définissant la famille de police souhaitée.
```css
body {
font-family: Helvetica, Arial, sans-serif;
}
```
## Les polices personnalisées
L'intérêt des polices web vient surtout de la possibilité d'utiliser sa (ou ses) propre police.
### Choisir une police
La première étape est de choisir une police adaptée au projet. Il existe de nombreux sites proposant des polices gratuites à télécharger. Je vous recommande [Font Squirrel](https://www.fontsquirrel.com/) ou [Google fonts](https://fonts.google.com/).
### Préparer la police
Un fichier de police sera généralement au format `.otf` ou `.ttf`. Ces formats, bien que compatibles, ne sont pas adaptés pour une utilisation web. Il convient de les convertir au format `.woff2`. Vous pouvez le faire grâce à des outils en ligne tels que [Transfonter.](https://transfonter.org/)
Il est aussi possible de supprimer les caractères inutilisés dans le fichier de police (comme les alphabets non latin) afin de réduire le poids du fichier.
### Importer la police
Avant de pouvoir utiliser notre police personnalisée, nous devons la rendre disponible sur notre site web. Cela se passe dans le fichier CSS, grâce à la déclaration `@font-face`.
```css
@font-face {
font-family: "Luciole"; // on définit le nom de la police
src: url("../fonts/webfonts/Luciole-Regular.woff2") format("woff2"); // chemin vers le fichier .woff2
font-weight: normal; // graisse de la police
font-style: normal; // style de la police
font-display: swap; // stratégie de chargement de la police
}
```
### Utiliser la police
Il ne reste plus qu'à indiquer aux éléments concernés qu'ils doivent utiliser notre police personnalisée !
:::warning Attention
N'oubliez pas les polices de secours 😉
:::
```css
h1,
h2,
h3 {
font-family: "Luciole", Arial, sans-serif;
}
```