La conception typographique joue un rôle important dans la conception de sites Web. Un contenu textuel bien présenté et formaté aide un site à avoir plus de succès en créant une expérience de lecture à la fois agréable et facile à consommer. Une partie de vos efforts pour travailler avec le type consistera à choisir les bonnes polices pour votre conception, puis à utiliser CSS pour ajouter ces polices et styles de police à l'affichage de la page. Cela se fait en utilisant ce qu'on appelle un pile de polices.
Piles de polices
Lorsque vous spécifier une police à utiliser sur une page Web, il est recommandé d'inclure également des options de secours au cas où votre choix de police ne serait pas trouvé. Ces options de repli sont présentées dans le pile de polices. Si le navigateur ne trouve pas la première police répertoriée dans la pile, il passe à la suivante. Il continue ce processus jusqu'à ce qu'il trouve une police qu'il puisse utiliser ou qu'il n'ait plus de choix (auquel cas il choisit simplement la police système qu'il souhaite). Voici un exemple de l'apparence d'une pile de polices en CSS lorsqu'elle est appliquée à l'élément "body":
corps {
famille de polices: Georgia, "Times New Roman", empattements ;
}
La police Georgia apparaît en premier, donc par défaut, c'est ce que la page utilisera, mais si cette police n'est pas disponible pour une raison quelconque, la page revient à Times New Roman.
Joindre Times New Roman entre guillemets car il s'agit d'un nom composé de plusieurs mots. Les noms de police à un seul mot, comme Georgia ou Arial, ne nécessitent pas de guillemets, mais les noms de police à plusieurs mots avec des espaces intégrés en ont besoin pour que le navigateur sache que tous ces mots constituent le nom de la police.
La pile de polices se termine par le mot empattements. C'est un nom générique de famille de polices. Dans le cas peu probable où une personne n'aurait pas la Géorgie ou Times New Roman sur leur ordinateur, le site utiliserait n'importe quelle police serif qu'il pourrait trouver. Le navigateur choisira une police pour vous, mais au moins vous offrirez des conseils afin qu'il sache quel type de police fonctionnerait le mieux dans la conception.
Familles de polices génériques
Les noms de polices génériques disponibles en CSS sont:
- cursive
- fantaisie
- monospace
- empattements
- sans empattement
Bien qu'il existe de nombreuses autres classifications de polices disponibles dans la conception Web et la typographie, y compris blackletter, display, grunge, etc., ces cinq noms de polices génériques sont ceux que vous utiliseriez dans une pile de polices en CSS.
- Polices cursives - comportent souvent des lettres fines et ornées destinées à reproduire un texte manuscrit sophistiqué. Ces polices, en raison de leurs lettres fines et fleuries, ne conviennent pas à un gros bloc de contenu comme le corps du texte. Les polices cursives sont généralement utilisées pour les titres et les besoins de texte plus courts qui peuvent être affichés dans des tailles de police plus grandes.
- Polices de fantaisie - sont les polices un peu folles qui ne tombent pas vraiment dans une autre catégorie. Les polices qui reproduisent des logos bien connus, comme les lettres du Harry Potter ou alors Retour vers le futur films, entrent dans cette catégorie. Ces polices ne conviennent pas au contenu du corps, car elles sont souvent si stylisées que la lecture de longs passages de texte écrits dans ces polices est beaucoup trop difficile à faire.
- Polices à espacement fixe - présentez des lettres de taille et d'espacement égales comme vous l'auriez trouvé sur une vieille machine à écrire. Contrairement à d'autres polices qui ont des largeurs variables pour les lettres en fonction de leur taille (par exemple, une majuscule W prend beaucoup plus de place qu'une minuscule je), les polices à espacement fixe utilisent une largeur fixe pour tous les caractères. Ces polices sont souvent utilisées pour les lectures de code car elles sont très différentes des autres textes de cette page.
- Polices Serif — employez de petites ligatures supplémentaires sur les formes de lettres. Ces pièces supplémentaires sont appelées empattements. Les polices serif courantes sont Georgia et Times New Roman. Les polices Serif fonctionnent très bien pour les textes volumineux comme les titres, ainsi que pour les longs passages de texte et de corps.
- sans empattementpolices - n'ont pas de ligatures. Le nom signifie sans empattements. Les polices populaires dans cette catégorie incluent Arial ou Helvetica. Semblables aux empattements, les polices sans empattement fonctionnent aussi bien dans les titres que dans le contenu du corps, bien que certaines les experts préfèrent que les gros blocs de texte évitent les polices sans empattement car elles sont plus difficiles à lire à petit point tailles.