Aller au contenu principal

3.2 - La typographie

Theme Customizer → Apparence → Typographie. Vous y choisissez la police du texte, celle des titres, leur graisse et la taille générale.

Par défaut, Corpus ne télécharge aucune police. Il emploie celle qui est déjà installée sur l'appareil du visiteur : Segoe UI sous Windows, San Francisco sous macOS et iOS, Roboto sous Android, la police du bureau sous Linux. Rien à charger, aucune requête, aucun transfert de données.

C'est le meilleur réglage pour la plupart des sites. Les suivants ne se justifient que si votre charte impose une police précise.

Deux choix indépendants

Police du texte et police des titres se règlent séparément, et chacune peut venir de n'importe quelle source. Le cas le plus courant, la police du système pour le texte, une police de marque pour les titres, se règle donc en deux clics.

Laissez « Comme le texte » pour les titres si vous n'êtes pas sûr : une seule police reste le choix le plus sûr et le plus rapide.

Un aperçu s'affiche sous chaque liste, avec une phrase qui montre les accents, les chiffres et le groupe 0 O 1 l I : c'est là que les polices se distinguent ou se ratent.

L'aperçu d'une police système montre ce que VOTRE ordinateur rend. Vous êtes sous Windows, vous voyez Segoe UI ; votre visiteur sous macOS en verra une autre. C'est le principe même de ce choix, et sa contrepartie.

Les quatre sources

Les piles système

Sept familles, désignées par leur classification typographique plutôt que par un nom de police, puisque la police réelle dépend de l'appareil :

EntréeCe qu'elle donne
SystèmeLa police d'interface, neutre.
HumanisteChaleureuse, ouverte.
GéométriqueModerne, dessinée au compas.
Néo-grotesqueSobre, très neutre.
TransitionnelleÀ empattements, faite pour les longs textes.
AncienneÀ empattements, classique.
ÉgyptienneEmpattements carrés, affirmée. Titres seulement.

L'égyptienne n'est pas proposée pour le corps de texte : elle se lit mal en petit et sur de longues lignes.

Roboto

Fourni avec Joomla, hébergé par votre propre site. Aucun octet n'est ajouté au paquet de Corpus, aucune requête ne sort de votre serveur, et c'est Joomla qui le met à jour. Le rendu est identique sur tous les appareils.

C'est la solution la plus simple quand vous voulez un rendu prévisible sans gérer de fichier.

Votre police, hébergée par votre site

La bonne façon d'employer une police Google. Vous la téléchargez, vous la déposez sur votre site, et vos visiteurs la reçoivent de vous.

  1. Récupérez la police au format .woff2. Sur Google Fonts, bouton Get font puis Download all : vous obtenez des .ttf, à convertir avec n'importe quel convertisseur en ligne.
  2. Déposez les fichiers dans media/templates/site/corpus/fonts/, par FTP ou par le gestionnaire de fichiers de votre hébergeur. Un fichier LISEZMOI vous y attend et reprend ces étapes.
  3. Dans le groupe Votre police, hébergée par votre site, saisissez le nom exact de la famille, par exemple Atkinson Hyperlegible : puis choisissez les fichiers dans les listes (normal, gras, italique, gras italique).
  4. Revenez en haut et choisissez « Votre police hébergée » pour le texte, les titres, ou les deux.

Les fichiers gras, italique et gras italique sont facultatifs. Sans eux, le navigateur épaissit et incline lui-même la graisse normale : moins beau qu'une vraie graisse dessinée, mais lisible, et sans fichier supplémentaire à télécharger.

Vérifiez la licence. La plupart des polices de Google Fonts sont sous SIL Open Font License, qui autorise l'usage sur un site commercial. Ce n'est pas le cas de toutes, et l'hébergement ne change rien à la licence.

Vos fichiers sont des polices variables ? Une police variable tient dans un seul fichier pour toutes les graisses. Dans ce cas, mettez l'interrupteur Fichiers variables sur Oui. Les fichiers normal et italique servent alors toutes les graisses, celle du texte comme celle des titres, et le fichier gras devient inutile. Laissez Non pour des fichiers ordinaires.

Les fichiers sont retrouvés à partir de la feuille de style de Corpus : cela marche aussi quand votre site est installé dans un sous-dossier.

Une seconde police hébergée, pour les titres

Beaucoup de chartes ont deux familles : une pour le texte, une pour les titres. Corpus sait héberger les deux. Dans le groupe Une seconde police hébergée, pour les titres, vous donnez :

  • le Nom de la police des titres, par exemple Quicksand ;
  • le Fichier de la police des titres : un seul fichier .woff2, déposé dans media/templates/site/corpus/fonts/ comme les autres.

Ce fichier est affiché tel quel, quelle que soit la graisse des titres. Déposez donc celui que vous voulez voir, par exemple la version medium, ou un fichier variable.

Ensuite, dans la liste Police des titres, choisissez « Votre police hébergée pour les titres ». Si le nom est vide, cette entrée retombe sur la police du système : le site ne reste jamais sans police.

Une police externe

Une adresse web, typiquement celle que Google Fonts vous donne.

Ce que cela implique, et c'est votre responsabilité. Le navigateur de chaque visiteur ira chercher la police sur ce serveur, et lui transmettra son adresse IP. Sous le RGPD, cela peut exiger son consentement préalable : plusieurs décisions de justice européennes l'ont retenu pour Google Fonts. Héberger la police vous-même, la source précédente, supprime entièrement la question.

Si vous choisissez cette voie, renseignez aussi le nom de la famille : sans lui, la feuille est chargée mais aucune règle ne l'emploie.

Dans tous les cas, la pile système reste en repli. Si le fichier manque ou tarde, le texte s'affiche dans la police du système : jamais en Times New Roman.

La graisse

Texte : normale (400) ou moyenne (500).

Titres : moyenne (500), demi-grasse (600), grasse (700) ou extra-grasse (800). Un titre est grand : à cette taille, la graisse moyenne ne fragilise pas la lecture comme elle le ferait sur un texte courant.

Aucune graisse plus fine n'est proposée pour le texte, et c'est délibéré : un texte maigre réduit le contraste perçu, ce qu'aucun calcul de contraste ne détecte. La règle passerait, la page serait moins lisible.

La taille générale

100 %, 105 %, 110 % ou 115 %. Le réglage agrandit tout le texte du site d'un coup, en conservant les proportions entre les titres et le corps.

Aucune réduction n'est proposée. Corpus garantit qu'aucun texte ne descend sous 16 px, modules, cartes, mentions et légendes compris, et cette garantie ne doit pas pouvoir être contournée par un réglage.

Si un client trouve le texte trop petit, c'est ce champ qu'il faut monter. Si un autre le trouve trop gros, laissez : son navigateur sait déjà réduire, et c'est son choix, pas le vôtre.

Ce qui ne se règle toujours pas

L'échelle typographique elle-même. Le rapport entre un h1, un h2 et le corps de texte vient de la maquette et se vérifie par outil à chaque livraison. Seul le facteur global bouge.

Les espacements et la grille, pour la même raison.

La police à chasse fixe des blocs de code : elle suit toujours le système.

Un dernier conseil

Chaque police téléchargée est un fichier de plus à charger, sur chaque page, pour chaque visiteur. Deux polices, c'est deux fichiers au minimum, souvent quatre avec les italiques et les gras.

La question à se poser n'est pas « laquelle est la plus belle », mais « qu'est-ce que celle-ci apporte que la police du système n'apporte pas ». Quand la réponse n'est pas évidente, la pile système est le bon choix.

À jour pour Corpus 2.1.684.