CSS - Polices de caractères

Familles de polices génériques

En CSS, il existe cinq familles de polices génériques qui peuvent être utilisées pour spécifier l'apparence du texte sur une page web :

1. Serif : Les polices serif ont de petites lignes ou traits aux extrémités des lettres. Elles sont souvent utilisées pour le corps du texte dans les médias imprimés et peuvent donner un aspect formel au texte. Des exemples de polices serif incluent Times New Roman, Georgia et Garamond.

2. Sans-serif : Les polices sans-serif n'ont pas de lignes aux extrémités des lettres. Elles ont un aspect épuré, ce qui les rend populaires pour les écrans numériques. Les polices sans-serif sont souvent utilisées pour les titres, les menus et le corps du texte sur les sites web. Des exemples de polices sans-serif incluent Arial, Helvetica et Verdana.

3. Monospace : Les polices monospace ont des caractères qui sont tous de la même largeur fixe. Chaque caractère occupe le même espace horizontal, ce qui les rend idéales pour afficher des extraits de code ou des données tabulaires. Des exemples de polices monospace incluent Courier, Courier New et Lucida Console.

4. Cursive : Les polices cursives imitent le texte manuscrit et ont une apparence informelle. Elles sont souvent utilisées pour des titres spéciaux ou des citations mais doivent être utilisées avec parcimonie car elles peuvent être plus difficiles à lire en grande quantité. Des exemples de polices cursives incluent Brush Script, Lucida Handwriting et Comic Sans.

5. Fantasy : Les polices fantasy sont décoratives et imaginatives qui ne rentrent pas dans les autres catégories. Elles peuvent avoir des formes ou des designs uniques mais doivent être utilisées avec précaution car elles peuvent être difficiles à lire dans de longs passages. Des exemples incluent Impact, Papyrus et Chiller.

Piles de polices

Une pile de polices est une liste de polices spécifiées dans la propriété CSS font-family. Elle vous permet de définir plusieurs options de repli si la police principale n'est pas disponible sur l'appareil de l'utilisateur. Pour créer une pile de polices, vous listez les noms séparés par des virgules. Le navigateur essaiera la première, puis passera à la suivante jusqu'à ce qu'il en trouve une disponible.

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

Le navigateur essaiera d'abord Arial. Si elle n'est pas disponible, il se rabattra sur Helvetica. Si les deux ne sont pas disponibles, il utilisera la famille générique sans-serif. Lors de la création de piles, considérez ces pratiques :

1. Commencez par l'option préférée puis ajoutez des alternatives.
2. Utilisez la famille générique en dernier pour que le texte reste lisible même si aucune des polices spécifiées n'est disponible.
3. Choisissez des types similaires (par exemple, serif, sans-serif) pour garder un aspect cohérent.
4. Limitez le nombre car chaque ajout peut ralentir le temps de chargement de la page.
5. Testez les piles sur différents appareils et navigateurs pour obtenir l'affichage souhaité.

Taille de police

La propriété font-size en CSS définit la taille du texte. Vous pouvez utiliser différentes unités pour spécifier la taille de la police, comme les pixels (px), em et rem.

1. Pixels (px) : Définir la taille de la police en pixels vous donne un contrôle précis sur la taille du texte. Cependant, l'utilisation de pixels peut rendre difficile pour les utilisateurs le redimensionnement du texte dans leurs navigateurs.

font-size: 16px;

2. Em (em) : L'unité em est relative à la taille de police de l'élément parent. Si la taille de police de l'élément parent est de 16px, définir la taille de police de l'élément enfant à 1.5em donnerait une taille de police de 24px (16px * 1.5). L'utilisation de em permet des tailles de police plus flexibles et évolutives.

font-size: 1.2em;

3. Rem (rem) : L'unité rem est similaire à em mais elle est relative à la taille de police de l'élément racine (html) au lieu de celle de l'élément parent. Cela facilite le maintien de tailles cohérentes dans tout un document en prenant par défaut 16px, donc définir une valeur comme 1.5rem donne une valeur équivalente à environ vingt-quatre pixels (24 px).

font-size: 1.2rem;

Lors du choix entre les tailles absolues et relatives, considérez :

• Les tailles absolues vous donnent un contrôle précis mais peuvent ne pas être facilement redimensionnables par les utilisateurs.
• Les tailles relatives permettent plus de flexibilité et de réactivité car elles s'adaptent en fonction des propriétés de taille des éléments parents ou racines respectifs.

Pour créer des polices réactives qui s'adaptent à différentes largeurs d'écran, utilisez des requêtes média CSS en ajustant en fonction de la largeur de la fenêtre :

body {
    font-size: 16px;
}

@media screen and (min-width: 768px) {
    body {
        font-size: 18px;
    }
}

@media screen and (min-width: 1200px) {
    body {
        font-size: 20px;
    }
}

Graisse de police

La propriété font-weight définit l'épaisseur ou la finesse des caractères en utilisant des valeurs par mot-clé ou numériques :

• Mots-clés : normal(par défaut), bold, lighter, bolder
• Numériques : 100, 200, 300, 400(normal), 500, 600, 700(gras), 800, 900

Tous les poids ne sont pas disponibles pour chaque famille lors de l'utilisation de valeurs numériques, considérez ces bonnes pratiques :

Utilisez quatre cents (400) pour les textes normaux et sept cents (700) pour les textes en gras, assurant des résultats cohérents entre différentes polices. Évitez les poids extrêmes comme cent (100) ou neuf cents (900) car ils peuvent ne pas être lisibles dans des contextes de petite taille. Tenez-vous-en aux poids courants (quatre cents/sept cents) pour les textes de corps tout en utilisant des poids supplémentaires si nécessaire dans les titres selon le contexte.

body {
    font-weight: 400;
}

h1 {
    font-weight: 700;
}

Style de police

La propriété font-style définit les styles normal/italique/oblique respectivement. L'italique incline une version cursive, l'oblique incline la version normale. Évitez les grands blocs pour réduire la lisibilité. Contextuellement, l'accentuation des mots, titres, termes techniques, phrases dans une autre langue est mieux adaptée à l'utilisation de formes italiques dans l'ensemble des scénarios d'utilisation.

p {
    font-style: normal;
}

em {
    font-style: italic;
}

Variante de police

La propriété font-variant permet de définir des petites majuscules, affichant les lettres minuscules en versions plus petites des majuscules. Les abréviations et acronymes les font ressortir sans majuscules, ajoutant un intérêt visuel aux titres et sous-titres selon le contexte.

h2 {
    font-variant: small-caps;
}

abbr {
    font-variant: small-caps;
}

Hauteur de ligne

La propriété line-height définit l'espace entre les lignes. Les unités de longueur (px/em/rem/valeurs sans unité sont recommandées pour un dimensionnement proportionnel) ont un point de départ dans la plage de 1,2 à 1,6 selon la famille et le contexte de taille.

body {
    line-height: 1.5;
}

h1 {
    line-height: 1.2;
}

Que sont les polices Web ?

Les polices Web sont des polices personnalisées qui peuvent être chargées et utilisées sur un site Web. Elles permettent aux concepteurs d'aller au-delà de l'ensemble limité de polices système disponibles sur les appareils des utilisateurs. Elles permettent une conception typographique plus diversifiée, améliorant l'attrait visuel et l'image de marque d'un site Web.

Les principaux avantages de l'utilisation des polices Web incluent :

1. Une flexibilité accrue de la conception : Les polices Web offrent de nombreux styles et options, permettant aux concepteurs de choisir des polices qui correspondent à l'apparence et à l'identité de marque souhaitées.

2. Une cohérence entre les appareils : En utilisant des polices Web, les concepteurs peuvent s'assurer que la typographie reste cohérente sur différents appareils et plateformes, car les polices sont chargées à partir d'un serveur distant plutôt que de dépendre des polices système de l'utilisateur.

3. Une expérience utilisateur améliorée : Les polices Web peuvent améliorer la lisibilité, rendant le contenu plus attrayant à lire pour les utilisateurs.

Comment utiliser les polices Web

Il existe plusieurs façons d'utiliser des polices Web sur un site Web :

1. Importer des polices Web à l'aide de @font-face : La règle CSS @font-face vous permet de spécifier un fichier de police personnalisé à télécharger et à utiliser sur votre site Web. Vous pouvez héberger les fichiers de police sur votre propre serveur ou utiliser un fournisseur de service de polices.

@font-face {
  font-family: 'CustomFont';
  src: url('path/to/font-file.woff2') format('woff2'),
       url('path/to/font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

2. Héberger des polices Web localement : Vous pouvez télécharger les fichiers de police et les héberger sur votre propre serveur, vous donnant un contrôle total sur ceux-ci mais nécessitant plus de configuration et de maintenance.

3. Utiliser des services de polices Web : De nombreux fournisseurs comme Google Fonts et Adobe Fonts proposent de nombreuses polices Web qui peuvent être facilement intégrées à votre site Web sans nécessiter d'hébergement personnel.

Formats de polices Web

Il existe plusieurs formats de polices Web disponibles, chacun avec ses propres caractéristiques et son support par les navigateurs :

1. TTF (TrueType Font) : TTF est un ancien format pris en charge par la plupart des navigateurs mais a des tailles de fichiers plus importantes par rapport aux formats plus récents.

2. WOFF (Web Open Font Format) : WOFF est conçu pour le Web avec des fonctionnalités de compression ; il est largement pris en charge par les navigateurs modernes.

3. WOFF2 : WOFF2 offre une meilleure compression que WOFF, résultant en des tailles de fichiers plus petites et des temps de chargement plus rapides ; il a un bon support des navigateurs mais peut ne pas fonctionner sur les navigateurs plus anciens.

4. EOT (Embedded OpenType) : EOT était utilisé par Internet Explorer ; il a un support limité dans les navigateurs modernes, il n'est donc généralement pas recommandé pour les nouveaux projets.

5. Polices SVG : Les polices SVG sont basées sur des vecteurs et peuvent être mises à l'échelle sans perte de qualité. Cependant, elles ont un support limité des navigateurs et ne sont pas largement utilisées.

Lors de l'utilisation de polices Web, il est recommandé de fournir plusieurs formats pour maximiser la compatibilité des navigateurs. Vous pouvez utiliser la règle @font-face pour spécifier différents formats de fichiers, et le navigateur choisira le plus approprié qu'il prend en charge.

Que sont les icônes de police ?

Les icônes de police sont des symboles qui font partie d'une police. Elles peuvent être utilisées comme icônes sur les sites web et stylisées avec CSS, comme du texte normal. Les icônes de police sont basées sur des vecteurs, elles peuvent donc être redimensionnées sans perte de qualité et s'adapter à différentes tailles d'écran.

Les principaux avantages de l'utilisation des icônes de police sont :

1. Flexibilité : Vous pouvez facilement styliser les icônes de police en utilisant des propriétés CSS telles que la couleur, la taille et les ombres pour correspondre au design de votre site web.

2. Performance : Les icônes de police se chargent plus rapidement que les icônes d'images traditionnelles car elles font partie d'un fichier de police.

3. Évolutivité : Étant basées sur des vecteurs, les icônes de police restent nettes à n'importe quelle taille sans pixellisation ni perte de qualité.

4. Accessibilité : Vous pouvez rendre les icônes de police accessibles aux lecteurs d'écran en utilisant un balisage sémantique approprié et en fournissant un texte alternatif.

Comment utiliser les icônes de police

Pour utiliser des icônes de police sur un site web, vous pouvez soit importer une bibliothèque existante, soit créer vos propres icônes personnalisées :

1. Importation de bibliothèques : Il existe de nombreuses bibliothèques populaires comme Font Awesome, Material Icons et Ionicons. Ces bibliothèques offrent des icônes préconçues que vous pouvez facilement inclure dans votre projet en liant le fichier CSS de la bibliothèque et en utilisant les noms de classe fournis.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<i class="fas fa-home"></i>

2. Création de polices personnalisées : Si les bibliothèques existantes ne répondent pas à vos besoins, vous pouvez créer des polices personnalisées en utilisant des outils comme Icomoon ou Fontello qui vous permettent de sélectionner ou de télécharger des SVG et de générer un fichier de police personnalisé ainsi que le code CSS nécessaire.

Lors de l'utilisation d'icônes de police :

1. Choisissez une bibliothèque fiable.
2. Utilisez un balisage sémantique tel que les éléments <i> ou <span> pour afficher l'icône.
3. Optimisez le fichier d'icônes en n'incluant que les glyphes nécessaires.
4. Fournissez des options de repli pour les utilisateurs qui ont désactivé les polices personnalisées.
5. Utilisez CSS pour un dimensionnement et un alignement cohérents de l'icône.

Les icônes de police offrent un moyen efficace d'ajouter des symboles évolutifs et élégants à votre site web tout en maintenant de bonnes pratiques de performance.