Les polices et la typographie des caractères en CSS

Police et fonte, quelle différence ?

Nous avons très souvent tendance à confondre les notions de police de caractères et de fonte. Ces deux termes sont presque devenus des synonymes à l’heure du digital, mais les typographes distinguent pourtant clairement les deux.

Une fonte est un ensemble de caractères ayant les mêmes caractéristiques de corps (taille), de graisse, de style (romain ou italique) et de police (arial, times). Une police, quant à elle, correspond à l’ensemble des fontes disponibles.

Ainsi, Arial est une police alors que Arial gras italique 18 pts est une fonte.

La notion de fonte fait tout simplement référence aux caractères de plomb (fondus et moulés) utilisés dans l’imprimerie traditionnelle. Vous imaginez bien que si un imprimeur souhaitait imprimer un titre de corps 24 pts, il ne risquait pas d’agrandir un caractère de plomb de 12 pts… Il devait donc se munir des caractères de la fonte correspondante.

Aujourd’hui en informatique, la distinction a évolué. Une fonte informatique (computer font) fait désormais référence au fichier contenant les différents caractères, les variations de tailles sont donc intégrées dans la fonte. La notion de police (typeface) reste utilisée pour désigner toutes les variations de style. Du coup, arial gras ou arial italique sont des fontes informatiques quand arial est une police.

Les polices variables

Les polices variables correspondent à une évolution de la spécification OpenType qui permet d’intégrer les différentes variations d’une police dans un seul fichier. Les différentes fontes sont donc regroupées dans un seul fichier informatique plutôt que d’avoir plusieurs fichiers pour chaque niveau de gras et pour chaque style.

Toutes les combinaisons de style et de graisse étant contenues dans un seul fichier, celui-ci est évidemment plus lourd qu’un fichier de police classique. Son poids est à peu près équivalent au poids cumulé des fichiers de fonte séparés. L’utilisation de ce type de police permet donc plus de simplifier l’intégration de police que d’optimiser la vitesse de chargement.

L’inconvénient des polices variables est leur incompatibilité avec certains systèmes d’exploitation anciens qui ne les prennent pas en charge.

Définir une police en CSS

La propriété font-family

Pour définir une police à utiliser en CSS, il faut utiliser la propriété font-family. Généralement, cette propriété est définie au moins une fois pour le sélecteur body afin de déterminer la police de caractères à utiliser par défaut dans la page.

body {
    font-family: Pineforest ;
}

Dans l’exemple ci-dessus, nous demandons donc à utiliser la police de caractères Pineforest par défaut pour la page. Pour autant, si vous essayez de mettre ce code directement dans votre feuille de style, il y a peu de chance pour que cela fonctionne…

Pour qu’une police puisse être utilisée sur un ordinateur, il faut que celle-ci soit installée sur la machine en question ou fournie avec le document. Pineforest n’étant pas une police courante, elle ne sera donc pas installée et elle ne pourra pas fonctionner. Votre navigateur (Firefox, Chrome ou Opera) va donc lui substituer la police avec laquelle il a été configuré par défaut.

Dans la mesure où l’on ne peut pas connaître les polices installées sur les machines de tous nos visiteurs, il est donc essentiel d’anticiper. La méthode consiste donc à saisir plusieurs polices. Généralement, nous allons demander deux polices et nous allons toujours finir avec une famille de polices générique.

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

Avec cette nouvelle déclaration CSS, nous demandons donc d’utiliser la police Verdana. Si celle-ci n’existe pas, nous souhaitons alors utiliser la police Arial. Et si elle n’est pas disponible non plus, alors nous demandons à utiliser la famille de police générique sans-serif. C’est-à-dire la police de type sans-serif définie par défaut dans le navigateur. L’idée est de proposer des alternatives qui ne vont pas trop dénaturer le design prévu à l’origine.

body {
    font-family: "Trebuchet MS", Arial, sans-serif ;
}

Les familles de polices génériques

Il existe neuf familles de polices génériques : serif, sans-serif, monospace, cursive, fantasy, system-ui, emoji, math, fangsong. Elles sont donc à utiliser en dernier recours en cas de police introuvable et vous ne saurez pas à l’avance quelle police de substitution sera utilisée. Cela dépendra de l’environnement système dans lequel les internautes se trouveront.

Sans-serif Vs serif

Ces deux familles génériques correspondent aux polices sans empattement (sans-serif) et les polices avec empattement (serif). Les empattements sont les éléments que l’on peut trouver aux extrémités des caractères.

La grande question est de savoir si l’on doit choisir des polices à empattement ou sans empattement à l’écran.

À l’impression, le débat est réglé depuis longtemps. En effet, il est recommandé de distinguer le texte à lire du texte à voir. Le texte à lire correspond au texte principal, il s’agit par exemple du contenu d’un chapitre. Le texte à voir correspond aux titres, à des textes qui généralement sont écrits plus gros que le reste du document. Ainsi il est recommandé de mettre le texte à lire avec une police à empattement. Car cela permet une meilleure identification des caractères et par conséquent un meilleur confort de lecture. Les polices sans empattement sont donc réservées pour des raisons esthétiques principalement aux textes à voir.

À l’écran, les avis divergent… Certains considèrent que ce qui s’applique à l’impression s’applique également à l’écran. D’autres conseillent de n’utiliser que des polices sans empattement pour des soucis d’adaptation aux différentes tailles d’écran. La qualité et la définition des écrans ayant un impact fort sur l’affichage des empattements qui peuvent être flous et par conséquent gêner la lecture.

À l’usage, il semblerait que le choix reste à la discrétion du propriétaire du site. À titre indicatif, voici la pratique d’une sélection variée de journaux français pour les polices de leur site web.

Monospace

La famille générique monospace correspond aux polices dites à chasse fixe. C’est-à-dire que tous les caractères ont tous la même largeur contrairement aux polices proportionnelles dans lesquelles la lettre i est généralement la plus étroite et la lettre w celle la plus large.

Les polices à chasse fixe sont généralement utilisées pour afficher du code, car elles ont pour avantage de permettre facilement d’aligner les éléments avec des espaces.

Cursive

Les polices cursives sont les polices manuscrites dans lesquelles les caractères peuvent être liés les uns aux autres. Soyez très précautionneux avec ce type de police, car elles peuvent très rapidement être illisibles. Vous devriez vraiment éviter de vous en servir.

Comment utiliser des polices originales ou non standards ?

Si vous ne souhaitez pas dépendre des polices disponibles sur l’ordinateur de vos internautes, vous pouvez leur fournir vos propres polices.

@font-face

@font-face est une règle CSS permettant de définir les fontes à utiliser dans une page web. Elle consiste à déclarer une police dans la feuille de styles en l’important à partir d’un fichier de police (format .ttf, .wof, etc.).

/* Déclaration d'une nouvelle fonte */
@font-face {
	font-family: 'Fonte exemple' ;  /* Nom utilisé par la suite pour utiliser la fonte */
	src: url('fonte-exemple.ttf') ; /* Fichier source de la fonte */
}

/* Utilisation de la fonte */
body {
	font-family: 'Fonte exemple', Arial, sans-serif;
}

Pour chaque variation de graisse et de style, vous devrez charger la fonte correspondante en précisant les variations en question. Dans l’exemple ci-dessous, nous chargeons donc trois fontes distinctes pour pouvoir utiliser du gras et de l’italique. Par contre, nous ne pourrons pas utiliser du gras et de l’italique simultanément puisque nous n’avons pas chargé la fonte correspondante.

/* Déclarations des trois fontes */
@font-face {
	font-family: 'Fonte exemple' ;
	src: url('fonte-exemple.ttf') ;
}
@font-face {
	font-family: 'Fonte exemple' ;
	font-weight: bold ;
	src: url('fonte-exemple-bold.ttf') ;
}
@font-face {
	font-family: 'Fonte exemple' ;
	font-style: italic ;
	src: url('fonte-exemple-italic.ttf') ;
}

/* Utilisation des fontes */
body {
	font-family: 'Fonte exemple', Arial, sans-serif ;
}
h1 {
	/* On utilise la font fonte-exemple-bold.ttf */
	font-weight: bold ;
}
h2 {
	/* On utilise la font fonte-exemple-italic.ttf */
	font-style: italic ;
}
h3 {
	/* Fonte indisponible, donc on utilise la police Arial */
	font-style: italic ;
	font-weight: bold ;
}

Google font

Si vous souhaitez vous simplifier la tâche, vous pouvez utiliser Google Font. Ce service gratuit va héberger les polices pour vous et vous n’aurez alors qu’à les importer dans vos projets web.

Hormis la simplicité d’utilisation, Google Font permet aussi de bénéficier du cache du navigateur pour les polices. Si un internaute navigue sur deux sites web utilisant la même police Google Font, celle-ci ne sera téléchargée qu’une seule fois.

Pour commencer à utiliser Google Font, rendez vous à l’adresse suivante https://fonts.google.com et suivez les étapes ci-dessous :

1. Commencez par afficher le panneau des fontes sélectionnées en cliquant sur le bouton en haut à droite.
2. Recherchez la police qui vous intéresse et cliquez sur son nom pour afficher les fontes disponibles.
3. Sélectionnez les fontes que vous souhaitez utiliser en cliquant sur + Select this style. N’ajoutez pas de fontes inutiles si vous ne souhaitez pas ralentir votre page pour rien.
4. Dans le panneau des fontes sélectionnées, cliquez sur l’onglet Embed.
5. Vous avez alors deux méthodes pour utiliser la police. Chaque méthode à ses avantages :
   • Favoriser la vitesse : Copier le code <link href="https://fonts.googleapis.com/css2?family=Robotodisplay=swap" rel="stylesheet"> dans la partie head de votre page web avant votre feuille de style.
   • Favoriser l’organisation CSS : Cliquez sur l’onglet @import, copiez le code @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'); sans les balises style et collez-le tout en haut de votre feuille de styles.
6. Vous pouvez ensuite utiliser à volonté les fontes correspondantes avec le code fourni font-family: 'Roboto', sans-serif;.

Voici donc un exemple concret d’utilisation de Google font avec la seconde méthode :

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

Les images pour les logos

Dans le cas des logos, nous n’allons généralement pas charger la police correspondante. Sauf si celle-ci est utilisée ailleurs dans le site. La plupart du temps, les logos seront donc intégrés sous la forme d’une image.

La taille des caractères

La taille des caractères se définit avec la propriété CSS font-size. Cette propriété supporte une grande variété de valeurs.

Les mots-clés de valeurs absolues et relatives

Les valeurs absolues sont des mots-clés correspondant à des variations de taille par rapport à la taille par défaut du navigateur de l’internaute qui a la valeur medium.

Les mots-clés sont les suivants : xx-small, x-small, small, medium, large, x-large et xx-large.

Les valeurs relatives fonctionnent également avec des mots clés : smaller et larger. Et permettent d’effectuer une variation de taille par rapport à celle de l’élément parent. Par exemple, si un élément est défini en large et que ses enfants sont défini en larger, ils auront une taille équivalente à x-large.

body {
    font-size: large ;
}
p {
    font-size: larger ;
}

Les pixels

Cette unité est très couramment utilisée, car elle est probablement la plus simple à maîtriser…

body {
    font-size: 16px ;
}

Les valeurs en pixels permettent d’obtenir un résultat statique. Les polices ainsi réglées s’afficheront donc en fonction de la définition de l’écran (le nombre de pixels qui composent l’image de l’écran) et de sa résolution (la densité des pixels par unité de longueur).

Si cette unité est très souvent utilisée, il est fortement recommandé de ne pas le faire. L’inconvénient de cette pratique est son manque d’accessibilité. En effet, la valeur sera imposée, quels que soient les réglages définis par les internautes. Pour bien comprendre, nous allons prendre un exemple concret. Un internaute ayant une vue diminuée décide de régler la taille de police à 30 pixels par défaut sur son navigateur (la valeur est de 16 pixels habituellement). Avec des unités en pixels, les réglages de l’internaute ne seront donc pas pris en compte. C’est la raison pour laquelle, il est recommandé d’utiliser les unités em/rem ou des mots-clés.

Les unités em et rem

Les valeurs définies avec l’unité em correspondent à des coefficients multiplicateurs de la taille héritée de l’élément parent. Par exemple, si un élément à une taille de police de 20 pixels et qu’il contient un élément dont la taille est définie à 1.5 em, celui-ci aura une taille de 20 x 1,5 = 30 pixels.

<body>
    <h1>Exemple</h1>
</body>

body {
    font-size: 20px ;
}
h1 {
    font-size: 1.5em ; 
}

La difficulté dans l’utilisation de l’unité em est que le coefficient s’applique sur la taille héritée. Ainsi un texte utilisant la même déclaration CSS peut avoir deux tailles différentes. Prenons un exemple concret pour expliquer ce principe. Dans l’exemple 2 ci-dessous, le paragraphe 1 a une taille de 20 x 1.5 = 30 pixels. Pour obtenir ce résultat, nous prenons la taille de son parent (<body>) qui est de 20 pixels et nous la multiplions par 1.5. Pour le paragraphe 2, la valeur est différente puisque nous effectuons le calcul à partir de la taille du parent, l’élément <div> qui est réglé à 30px. Nous obtenons donc 30 x 1,5 = 45 pixels.

<body>
    <p>Paragraphe 1</p>
    <div>
        <p>Paragraphe 2</p>
    </div>
</body>

body {
    font-size: 20px ;
}
div { 
    font-size: 30px ;
}
p {
    font-size: 1.5em ; 
}

Dans les deux exemples précédents, nous utilisons des pixels pour expliquer le fonctionnement. Mais si l’on fait ça, nous perdons évidemment tout l’intérêt d’utiliser l’unité em. Nous aurons donc plutôt quelque chose comme ça :

body {
    font-size: 0.95em ; 
}
h1 {
    font-size: 1.5em ; 
}

Si vous souhaitez vous simplifier la vie avec les questions d’héritage, il a une unité qui permet de répondre aux besoins d’accessibilité sans poser de problème lors d’éléments imbriqués. Il s’agit de l’unité rem. Cette unité correspond également à un coefficient multiplicateur, mais il s’applique toujours sur la même valeur qui est la valeur par défaut du navigateur (généralement 16 pixels).

Dans l’exemple 3, nous avons juste changé l’unité pour la taille pour le sélecteur p afin de passer en rem. Quelles que soient les modifications que l’on fasse sur les sélecteurs body ou div, les éléments <p> feront toujours la même taille 16 x 1,5 = 24 pixels (16 pixels étant la valeur par défaut). Si un internaute a réglé son navigateur avec une taille de police plus grande à 30 pixels par défaut, alors les éléments <p> feront 30 x 1,5 = 45 pixels. Les éléments <body> et <div> quant à eux ne changeront jamais de taille malgré les réglages de l’internaute, puisqu’ils sont définis en pixels.

<body>
    <p>Paragraphe 1</p>
    <div>
        <p>Paragraphe 2</p>
    </div>
</body>

body {
    font-size: 20px ;
}
div { 
    font-size: 30px ;
}
p {
    font-size: 1.5rem ; 
}

Les polices d’icônes

Une police d’icônes est une police dont les différents glyphes sont des icônes à la place des lettres et des caractères spéciaux habituels. Vous avez peut-être déjà essayé d’en utiliser lorsque vous avez rédigé votre CV en ajoutant une petite icône de téléphone ou une enveloppe via l’insertion de caractères spéciaux des logiciels de traitement de texte. Les polices les plus connues pour cela sont webdings et wingdings.

L’avantage de ce type de police est que les icônes sont vectorielles et vont se comporter comme un caractère classique. Il est donc possible de les coloriser à volonté et de gérer leur taille sans perte de qualité et sans augmentation du poids contrairement à l’usage d’images classiques. C’est la solution idéale pour gérer les illustrations simples de son site web.

Exemple de personnalisation de taille et de couleur

L’intégration de ce type de police est assez simple. Il suffit de suivre les instructions fournies. La police de ce type la plus connue sur Internet est probablement Font Awesome que vous pouvez trouver et installer facilement en suivant la procédure expliquée sur cette page https://fontawesome.com/start.

L’inconvénient de cette solution est que vous allez charger des centaines d’icônes alors que vous n’allez probablement n’en utiliser que quelques-unes. Dans ce cas, je vous recommande plutôt de vous pencher sur la solution Icomoon qui permet de créer sa propre police d’icône très simplement. Vous trouverez les explications pour créer et utiliser la police sur cet article Comment insérer des icônes avec Icomoon ?

Les autres propriétés de caractère

Nous avons vu comment gérer la taille et la police des caractères, mais il existe évidemment d’autres propriétés CSS. Voici une liste des propriétés qui me semblent les plus utiles :

Sauf mention contraire*, l'article Les polices et la typographie des caractères en CSS et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International

Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.

* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.