Du texte sur un fond chargé, sans encadré

Rendre lisible un texte sur fond chargé tient à deux choses : ce qui se trouve juste derrière les lettres, et la couleur des lettres. Les solutions courantes, un encadré, une ombre ou un flou, changent ce qui est derrière les lettres en le recouvrant. Les meilleures solutions placent les mots là où le fond est déjà calme, choisissent l’encre de chaque ligne et, quand l’outil le permet, laissent le fond faire de la place au lieu d’être rapiécé.

Pourquoi fonds chargés et texte se font la guerre

La lecture dépend du contraste entre chaque lettre et ce qui l’entoure. Sur une couleur unie, ce contraste est le même partout. Sur une photo, un motif ou un dégradé animé, il change sans cesse : une lettre repose sur une zone claire, la suivante sur une ombre, et le mot se brise en morceaux. Le détail aggrave les choses, car les contours et formes du fond ressemblent un peu à des traits de lettres, et l’œil doit séparer les deux.

C’est pourquoi les recommandations de contraste, comme les rapports présentés dans le contraste des couleurs, sont difficiles à appliquer sur un fond chargé : il n’y a pas une seule couleur de fond à mesurer. Le test honnête est le pire endroit, la zone la plus claire derrière un texte clair ou la plus sombre derrière un texte foncé.

Les solutions habituelles, et ce que chacune coûte

Chaque solution classique fonctionne en changeant ce qui se trouve juste derrière les lettres. Toutes sont légitimes, et toutes retirent quelque chose au fond que vous avez choisi.

Si vous en utilisez une, faites-le avec douceur. Un voile qui s’estompe sur une grande surface se remarque moins qu’un encadré, et une ombre douce et large fait moins datée qu’une ombre dure. Voici une version retenue pour le web :

.hero {
  position: relative;
}

/* A soft scrim: dark at the bottom, where the text sits, gone by the middle. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.2) 35%, rgb(0 0 0 / 0) 60%);
  pointer-events: none;
}

.hero h1 {
  position: relative;
  z-index: 1;
  color: #fff;
  /* A wide, faint shadow reads as depth, not as an outline. */
  text-shadow: 0 1px 24px rgb(0 0 0 / 0.35);
}

Mieux : placer les mots là où le fond est calme

La plupart des fonds chargés ont une région plus calme : un pan de ciel, une nappe de couleur douce, une zone floue. Y déplacer le texte, ou recadrer pour que cette région tombe là où va le texte, règle le problème sans rien couvrir. Quand vous choisissez ou créez un fond, cherchez-en un qui a une zone calme là où vos mots se placent d’habitude.

La même idée vaut pour les photos, où le recadrage, le flou et le duotone peuvent tous créer du calme ; texte sur une image passe en revue sept techniques. Sur un dégradé, la zone calme est en général là où la couleur change le plus lentement ; du texte sur un dégradé montre comment la trouver.

Choisir l’encre de chaque ligne

Un fond qui va du clair au sombre ne peut pas être servi par une seule couleur d’encre. Un texte blanc se lit sur la moitié sombre et disparaît sur la moitié claire. Au lieu d’imposer un panneau derrière, choisissez l’encre ligne par ligne : encre claire là où le fond derrière la ligne est sombre, encre foncée là où il est clair. Prenez les deux encres dans la palette du fond, un ton profond et un ton pâle, pour qu’elles fassent partie de la création au lieu d’avoir l’air collées.

Faire bouger le fond, pas les mots

La solution la plus discrète de toutes est un fond qui sait où sont les mots. C’est ainsi que se comporte un Mark Gradiently : au lieu d’être recouvert, il se réorganise. Toute la matière glisse pour que sa région la plus calme et la mieux contrastée se place derrière le texte ; près des lettres, les couleurs s’approfondissent sous un texte clair et s’éclaircissent sous un texte foncé ; les reliefs chargés se détendent. Rien de tout cela n’est une forme que l’on peut montrer du doigt. Cela se lit comme la création, parce que c’est la création.

L’autre moitié, c’est l’encre. Réglez le texte sur Encre automatique et chaque ligne choisit l’encre claire ou foncée qui se lit le mieux face à ce qui se trouve réellement derrière elle, dans une paire tirée de la palette du Mark. Déplacez un titre d’une zone lumineuse vers une zone sombre et il bascule en silence. Vous décidez de l’intensité de la réaction du fond : à peine perceptible, équilibrée, ou une vraie scène pour un titre qui doit marquer.

La meilleure solution de lisibilité est celle que personne ne remarque.

Une liste de contrôle pour du texte sur fond chargé

1. 1

   Trouvez d’abord la zone calme

   Placez ou recadrez pour que les mots reposent sur la partie la plus uniforme du fond.

2. 2

   Vérifiez le pire endroit

   Testez le contraste au point le plus clair derrière un texte clair ou le plus sombre derrière un texte foncé, pas en moyenne.

3. 3

   Choisissez l’encre par ligne

   Clair sur sombre, sombre sur clair, les deux tirés de la palette du fond.

4. 4

   Jouez sur la graisse et la taille

   Une typographie plus grasse et plus grande résiste aux fonds chargés. Les graisses très fines, non. Les polices pour les réseaux sociaux propose des caractères qui tiennent.

5. 5

   Ne rapiécez qu’en dernier recours

   S’il le faut, choisissez la solution la plus douce : un voile léger plutôt qu’un encadré, une ombre large et pâle plutôt qu’une ombre dure.