CSS et typographie, en pratique

Comment utiliser les polices "web safe" et les polices téléchargées ? Quels sont les autres déclarations disponibles pour l’affichage de texte ? Un peu de code css et quelques explications.

Précédent | 8/11 | Suivant

Font-family

Lorsque l’on désire modifier la typographie utilisée pour une partie ou tout le texte d’une page web, on fait appel à l’attribut font-family, qui existe depuis la première version de CSS en 1996.
Le W3C recommande que l’attribut font-family soit suivi d’une liste de nom de fontes, plutôt qu’une seule. En effet, il se peut que la police que vous voulez utiliser soit indisponible, soit parce que le visiteur de votre site ne l’a pas dans son système, ou que la fonte téléchargée... ne se télécharge pas (erreur de nom, problème d’upload, etc.).

h1 {
   font-family: "truc machin", helvetica, arial, sans-serif;
}

On plusieurs polices, par ordre de préférence. On termine par un terme générique : serif, sans-serif, monospace, fantasy ou cursive, qui laissent le navigateur choisir parmi les polices dont il dispose qui correspondent à ces grandes catégories. Si le nom de la fonte contient des espaces, il est nécessaire de placer des guillemets autour du nom, comme dans l’exemple ci-dessus.

Si au final aucune de ces polices n’est disponible, le navigateur utilisera sa propre police par défaut, le times (sauf si vous avez choisi une autre police par défaut, mais personne ne fait plus ça).

Utiliser les fontes téléchargées, plusieurs méthodes

Pour embarquer des typographies dans un site web, il faut disposer d’une version compatible avec les principaux navigateurs. En 2018, le choix se portera sur les format WOFF et WOFF2.

Il est nécessaire de disposer de la fonte dans un de ces deux formats. Le format WOFF est la première version de compression, reconnue pour cette raison par la plupart des vieux navigateurs, mais WOFF2 est la deuxième version de la norme, avec des fichiers plus légers, plus rapides à décompresser, et quelques autres avancées techniques.

Cette fonte peut être sur un serveur distant (comme google font ou un site propriétaire permettant une utilisation sous licence) ou présente sur l’hébergement du site, comme n’importe quel autre import image ou css.

Une déclaration css permet de la charger et de lui donner un nom spécifique qui permettra son utilisation dans la page. Voici un code typique :

@font-face {
   font-family: 'matypo';
   src: url('matypo.woff2') format('woff2'),
        url('matypo.woff') format('woff');
   font-weight: normal;
   font-style: normal;
}

On doit en particulier veuiller à ce que le lien désigné dans le code url() soit un chemin relatif (ou absolu) correct.
La fonte en woff2 est désignée en priorité, la fonte en woff sera choisie si un problème est détecté dans la fonte woff2 ou si le navigateur n’est pas capable de la charger.

Après le chargement de cette fonte, on peut l’utiliser dans les déclarations css en utilisant le nom déclaré dans la font-family, "matypo" dans ce cas-ci.

h1 {
   font-family: matypo, sans-serif;
}

Déclarations CSS liées à la typographie

Les textes peuvent être affectés par beaucoup d’autres déclarations css :
La taille

font-size:12px;
font-size:1.3em;
font-size:1.5rem;

La taille des typographies peut être définies dans un grand nombre d’unités (voir l’article sur W3C School à ce sujet). Dans la pratique, on utilise régulièrement px et em.
px désigne le taille en pixel. Attention, cette taille est déterminée par l’écran qui affiche la page. 1px correspond à un pixel de l’écran. Plus l’écran est fin en résolution, plus le texte sera petit.
C’est une taille absolue, basée sur un référent solide : le pixel de l’écran.

em est une taille relative, basée sur la taille courante à l’endroit où se trouve l’élément ciblé. C’est là ou le terme "cascade" de Cascading Style Sheet prend son sens.
1.5em signifie "une fois et demi la taille de la typo à cet endroit".

Dans cet exemple, l’élément h2 a une taille de 2em, donc deux fois la taille courante de son parent, article. Si aucune taille n’est spécifiée au parent ni au parent du parent, em se référera à la taille des caractères par défaut.

rem signifie "root em", dont la taille donnée à l’élément body, plutôt qu’au parent de l’élément. Plus facile à utiliser du coup, puisque que toutes les tailles en rem sont basées sur la taille par défaut de la page. On peut donc grâce à rem changer toutes les tailles d’une page dans les mêmes proportions en changeant la taille par défaut du body.

Le style
On utilise font-style pour mettre le texte en italique. On peut utiliser la valeur oblique mais la différence n’est pas flagrante. Normal est le comportement par défaut.

 font-style: italic;
 font-style: normal;

Utilisé la plupart du temps pour passer en italique le texte.

La graisse
font-weight permet de changer électroniquement la graisse d’une typographie. On dit "électroniquement" parce que le navigateur calcule lui-même la plupart du temps cette graisse sur base du même fichier de police.
La graisse peut être exprimée avec les mots normal, bold, bolder, lighter (normal et bold sont les plus communs) ou encore un chiffre de 100 à 900 (400 est normal, 700 est bold)

 font-weight: bold;
 font-weight: 700;

Casse : capitales et petites capitales
On peut définir la casse d’une typographie par deux méthodes : font-variant et text-transform.

   font-variant: small-caps;

   text-transform: uppercase;
   text-transform: capitalize;

L’interlignage
line-height permet de régler l’interlignage. On peut exprimer l’interlignage en pixels, ou en %, ou par un chiffre, qui sera relatif à la taille du caractère : 1.3 signifie 1,3 fois la taille du caractère courant.

   line-height:12px;
   line-height:100%;
   line-height:1.8;