Typographie et couleur sur la landing page : ce qui tient la lecture

L'essentiel

La typographie et la couleur sur une landing page décident si la personne lit l'offre ou si elle ne voit qu'une affiche. Deux familles de polices, peu de tailles et une couleur d'action suffisent pour la plupart des pages de campagne. Le reste, c'est le contraste, la longueur de ligne et la police qui apparaît avant que la personne abandonne. Les WCAG fixent le minimum : texte courant à 4.5:1, grand texte à 3:1, bouton identifiable à 3:1, et la page entière fonctionne encore si le texte est agrandi ou espacé. La largeur de 80 caractères est un plafond de lecture du niveau AAA, pas une pénalité automatique. J'utilise ce plafond parce qu'une ligne sans fin fatigue, et je laisse le navigateur pouvoir modifier la couleur et l'espacement. Ci-dessous, l'échelle que je monte, ce que fait la couleur, et comment la police web ne doit pas retarder la première phrase.

1. Deux polices et une échelle courte

Une landing n'a pas besoin de toute la famille de la marque. Je choisis une police pour le titre et la même, ou une seconde, pour le texte. Le titre dans une famille de caractère, le corps dans une neutre. Trois familles dans le même pli se concurrencent, et chaque fichier en plus est un téléchargement en plus.

L'échelle qui tient sur une page d'offre est courte. Une taille de titre, une de sous-titre, une de corps, une de note (délai, pied de page, remarque). Graisse régulière dans le corps. Le gras seulement sur ce que la personne doit retrouver : le prix, le nom de l'offre, le mot du bouton. Du gras partout, c'est du gras nulle part.

L'italique reste pour un terme étranger ou un nom de produit, pas pour un paragraphe entier. Les capitales restent sur l'étiquette courte (« nouveau », « session »), pas sur le long titre. Des capitales dans une longue phrase ralentissent la lecture et, si le texte est petit, aggravent encore le contraste perçu.

L'ordre de la page suit la même échelle. Le titre dit ce qu'est l'offre. Le sous-titre dit à qui elle s'adresse. Le corps le prouve en quelques paragraphes. Le bouton reprend le verbe de l'offre (« demander la proposition », « voir la session »), pas un « en savoir plus » générique. Si le titre a besoin de trois lignes sur le téléphone, il est long. Je coupe la phrase. Je ne réduis pas le caractère jusqu'à ce qu'il devienne du corps.

L'identité de la marque, logo et palette, vient avant cette page. L'article sur l'identité visuelle avant le site explique cet ordre. Ici, le sujet est ce que la landing fait de la typographie et de la couleur qui existent déjà. Si la page vend un produit de boutique, la page produit est l'étape suivante, avec photo et variante. La landing ne remplace pas cela.

Si le projet est le site ou la boutique entière, l'e-commerce et le site est l'endroit où cette page entre dans l'ensemble, et non à part.

2. Contraste : le chiffre et l'exception du logo

Le texte courant, et l'image qui est du texte, a besoin d'un contraste d'au moins 4.5:1 avec le fond. Le grand texte peut rester à 3:1. La définition du grand texte, sur la page de compréhension des WCAG, est 18 points, ou 14 points en gras. Le titre du hero dépasse en général cette plage. La note de pied de page ne la dépasse presque jamais. Je n'utilise pas la limite plus souple du grand texte pour cacher du gris dans le petit caractère.

Il y a une exception. Le texte qui fait partie du logo ou du nom de la marque n'entre pas dans l'exigence. La décoration pure non plus. Cela n'autorise pas à écrire le prix dans le logo pour échapper au contraste. Le prix est le texte de l'offre. Il entre dans le 4.5:1.

Un composant d'interface, comme la bordure du champ et le bouton, a un autre chiffre : 3:1 contre la couleur voisine, au critère 1.4.11, pour que la personne identifie ce qui est cliquable et l'état (actif, focus, erreur). Un bouton jaune clair sur fond crème échoue en général, même avec le mot « envoyer » en gras. Je sépare les paires et je teste chacune : texte sur le fond, texte du bouton sur la couleur du bouton, bordure du champ sur le fond de la page.

La couleur n'est pas le seul signal. Une erreur seulement en rouge, sans icône ni phrase, disparaît pour qui ne distingue pas le rouge. Le critère de contraste porte sur la luminosité, pas sur « le rouge signifie l'erreur ». J'écris « vérifiez l'e-mail » à côté de la couleur.

Source : WCAG 2.2 et la page de compréhension du contraste minimal, lues le 16/10/2026.

Un fond photo derrière le titre est le cas qui casse le plus ce tableau. La photo change de ton au milieu de la phrase. Je mets une bande pleine, ou un masque uniforme, derrière les mots. Du texte posé directement sur un ciel, un visage ou un produit est illisible sur un morceau et lisible sur l'autre. Le masque fait partie du design. Ce n'est pas un rapiéçage.

3. Largeur, interligne et ce qui se passe si la personne agrandit

Une ligne trop longue fait perdre le début de la suivante. Le critère 1.4.8, niveau AAA, parle d'une largeur d'au plus 80 caractères (40 en écriture CJK), d'un texte sans justification sur les deux marges, et d'un interligne d'au moins un espace et demi. La note 1 est claire : la page n'est pas obligée de naître déjà avec ces valeurs. L'exigence est qu'il existe un moyen de les changer, et le navigateur peut être ce moyen.

Je limite quand même la colonne de texte autour de ce plafond. Sur un écran large, un paragraphe d'un bord à l'autre de la fenêtre fatigue. La landing gagne de la marge. Le titre peut être plus large que le paragraphe. Le paragraphe, non.

Justifier le bloc sur les deux marges ouvre des rivières d'espace au milieu de la ligne, surtout en portugais, avec des mots longs. J'aligne à gauche.

Le critère 1.4.12, celui-ci de niveau AA, ne m'ordonne pas de publier déjà avec ces espacements. Il ordonne que la page ne casse pas si la personne applique, en même temps, une hauteur de ligne de 1.5 fois la taille de la police, un espace après le paragraphe de 2 fois la taille de la police, un espacement entre les lettres de 0.12 fois la police et un espacement entre les mots de 0.16 fois la police. Un bouton au texte coupé, une carte qui déborde, un menu qui se superpose : cela échoue. Je dessine avec de la marge, pas avec un texte calé au pixel.

Agrandir est aussi AA. Le critère 1.4.4 demande que le texte atteigne 200% sans perdre de contenu ni de fonction, hors légende et image de texte. Et le 1.4.10 demande que, sur une largeur équivalente à 320 pixels CSS, la page défile sur un seul axe. Une colonne de texte en largeur fixe de pixels, avec un titre interdit de passer à la ligne, casse les deux. J'utilise une unité qui grandit avec le caractère et je laisse le titre passer à la ligne.

Le texte dans une image ne s'agrandit pas correctement. Un slogan dessiné dans l'art du hero reste hors du 1.4.4. Je place la vraie phrase en HTML, par-dessus ou à côté de l'art. L'art illustre. La phrase se lit.

Si la page de campagne est belle dans le fichier et serrée sur le téléphone, envoyez l'URL ou le fichier. Si elle fait partie d'une boutique Shopify qui n'existe pas encore, parlez-moi avant de la créer : la boutique naît comme boutique de développement, est montée prête et transférée à votre nom.

Parler du projet

4. Une couleur d'action

Palette de landing : fond, texte, une couleur d'appui et une couleur d'action. La couleur d'action peint le bouton principal et presque rien d'autre. Si le lien, le badge, le fond du témoignage et le bouton utilisent le même vert, l'œil ne sait pas où cliquer.

La couleur d'appui sert au fond d'une bande ou à un graphique simple. Elle ne concurrence pas le bouton. Si la marque n'a qu'une couleur forte, le bouton la garde et le reste reste en neutre : noir, blanc, un gris qui passe le 4.5:1.

L'état du bouton change pour de vrai. Le survol sur ordinateur assombrit ou souligne. Sur le téléphone, il n'y a pas de survol. L'état qui compte sous le doigt, c'est le focus et l'appui, toujours à 3:1 contre ce qui est autour. Un bouton désactivé peut rester en dehors de l'exigence du composant inactif. Je ne laisse pas le bouton principal désactivé sans dire ce qui manque (« indiquez l'e-mail »).

Shopify applique le même principe au checkout : l'aide demande une couleur à contraste élevé et une page simple, parce que la personne remplit la livraison et le paiement. Là, la police de titre et celle du corps se changent dans l'éditeur, dans une liste fermée. Sur la landing, j'ai plus de liberté de police. La discipline est la même. Une couleur commande le clic. Le reste ne crie pas.

Un lien au milieu du texte reste souligné, pas seulement coloré. La couleur seule se perd. Le soulignement fonctionne aussi en noir et blanc.

5. La police doit apparaître

Une police web qui tarde laisse la première phrase invisible. web.dev enregistre le comportement par défaut : Chrome et Firefox attendent jusqu'à 3 secondes avant d'afficher une police de repli. Safari peut retenir le texte pendant une durée indéterminée. Trois secondes sur une landing, c'est la personne déjà revenue vers la recherche.

font-display change cela. swap montre le repli tout de suite et échange quand la police arrive. Le risque est le saut de mise en page, si le repli occupe une autre taille. optional attend au plus 100 ms. Si la police n'est pas arrivée, le repli reste, sans échange tardif. Pour le corps de la landing, je préfère un texte visible tôt. Pour un titre de marque très dessiné, swap vaut encore, pourvu que le repli ait une largeur proche.

La police ne se télécharge que si la page l'utilise. Déclarer dix familles et en appliquer deux est du gaspillage, mais le fichier des huit autres ne vient pas si aucun style ne le demande. Ce qui pèse, c'est chaque graisse que le CSS appelle vraiment : regular, gras, italique. Je publie les graisses que l'échelle utilise. Pas le catalogue.

system-ui dans le corps utilise la police de l'appareil. Il n'y a pas de téléchargement. Sur une landing courte, pressée d'être lue, c'est une option honnête. La personnalité reste dans le titre, dans un seul fichier.

WOFF2 est le format que web.dev recommande pour une police moderne : il compresse environ 30% mieux que WOFF. Une police latine reste dans la fourchette de 100 à 1000 glyphes. Si la page est en portugais, je n'ai pas besoin d'embarquer l'ensemble d'une écriture que la page n'utilise pas. Découper le fichier sur ce que le texte utilise rend le téléchargement plus petit. La licence de la police doit permettre ce découpage. Je vérifie avant.

Une police variable réunit plusieurs graisses dans un seul fichier. Le fichier tend à être plus gros qu'une graisse isolée. Cela vaut quand la page utilise vraiment plusieurs graisses. Sur une landing en regular et en gras, deux fichiers sobres sont en général plus légers.

Un court exemple de ce que je laisse dans le CSS, sans commande de terminal :

@font-face {
  font-family: "Votre police";
  src: url("/fonts/votre-police.woff2") format("woff2");
  font-display: swap;
}

Le chemin du fichier est celui de votre page. Je ne colle pas ce bloc dans un thème de boutique sans voir ce que le thème charge déjà. Un thème qui apporte déjà la police de la marque n'a pas besoin d'une seconde copie.

6. Ce que je coche à la relecture de la page

Je lis la landing à voix basse, sur le téléphone, du titre au bouton. Si je dois approcher l'appareil pour lire la note, le corps est petit. Si le bouton n'apparaît qu'après trois écrans de témoignages, la couleur d'action est arrivée tard.

Je vérifie les quatre paires du tableau : corps, titre, bouton, champ. Une photo derrière le texte reçoit une bande pleine. Le logo peut rester tel que la marque est. Le prix ne se cache pas dans l'exception du logo.

J'agrandis le texte dans le navigateur jusqu'au double. Si une barre horizontale apparaît, ou si le bouton sort de l'écran, le 1.4.4 et le 1.4.10 ne sont pas respectés. Sur la largeur étroite, équivalente à 320 pixels CSS, la page ne défile que vers le bas.

J'augmente l'espace entre les lignes dans le navigateur. Si une carte coupe la dernière ligne, le 1.4.12 a échoué. La correction, c'est de la marge dans le composant, pas de bloquer la hauteur du texte.

En dernier, je regarde le chargement. La première phrase ne peut pas rester blanche pendant que cinq graisses se téléchargent. Un titre, un corps. Google demande encore le même titre clair sur le téléphone et sur l'ordinateur, et que le contenu principal ne dépende pas d'un geste pour exister. Un accordéon de questions fréquentes peut se replier. Le titre de l'offre, non.

Ce passage concerne la page. Il ne remplace pas l'identité. Une page au contraste juste et à la police générique peut encore n'avoir aucun visage de marque. Les deux travaux se rejoignent : la marque choisit la couleur, la landing obéit au contraste de cette couleur. Si la couleur de la marque ne passe pas le 4.5:1 dans le petit caractère, elle reste sur le grand titre ou sur la bande, et le corps passe à un neutre qui, lui, passe.

Questions fréquentes

Quel contraste la landing doit-elle avoir ?

Texte courant, 4.5:1 avec le fond. Grand texte, à partir de 18 points ou de 14 en gras, 3:1. Bouton et bordure de champ, 3:1 contre la couleur voisine. Le texte qui est le logo reste dehors. Le prix, le bouton et le paragraphe entrent dans le compte.

Faut-il limiter la ligne à 80 caractères ?

Le nombre est dans le critère 1.4.8, niveau AAA, et les WCAG disent elles-mêmes que la page n'est pas obligée d'utiliser déjà cette valeur : il suffit qu'il existe un moyen de la changer, et le navigateur sert. Je la limite quand même, parce qu'une ligne d'un bord à l'autre sur un écran large est difficile à suivre. La justification sur les deux marges, je ne l'utilise pas.

Peut-on utiliser n'importe quelle police du catalogue ?

Oui, si la licence permet l'usage sur le web. Je publie du WOFF2, seulement les graisses que le CSS utilise, avec font-display pour que le texte ne reste pas invisible. Chrome et Firefox peuvent attendre jusqu'à 3 secondes dans le comportement par défaut. system-ui dans le corps évite le téléchargement et laisse la personnalité dans le titre.

Un fond sombre avec des lettres blanches passe-t-il ?

Il passe si la paire atteint 4.5:1 sur le texte courant. Gris sur gris est la paire qui échoue en général, et une couleur qui « paraît claire » ne remplace pas le calcul. Une photo derrière les lettres blanches ne vaut qu'avec un masque stable.

La même règle vaut-elle au checkout de la boutique ?

Le principe, oui : contraste élevé et page simple. Shopify l'écrit dans l'aide du checkout, et la police là-bas sort d'une liste de l'éditeur, titre et corps. Sur la landing, la police est la vôtre, avec la même limite de contraste et de bouton.

Conclusion

La typographie et la couleur sur une landing page tiennent la lecture quand le titre est court, le corps tient dans une colonne, le contraste passe dans le petit caractère et une seule couleur désigne le bouton. La police apparaît tôt, en WOFF2, sans catalogue de graisses. Agrandir et espacer le texte ne doit pas casser la page. Si votre page de campagne est belle dans le fichier et illisible sur le téléphone, la voie est le projet d'e-commerce et de site. Envoyez l'URL de la page ou le fichier. Si la page fait partie d'une boutique Shopify qui n'existe pas encore, parlez-moi avant de créer la boutique : elle naît comme boutique de développement, est montée prête et transférée à votre nom.

Parler du projet