# Un fond qui s’adapte au texte : comment un Mark fait de la place

[Canonical HTML page](https://gradiently.design/fr/guide/text-reacts-to-background)

La plupart des fonds sont des images, et une image ne sait pas où se trouve votre titre. Un Mark, si : il se réorganise pour laisser passer les mots au lieu de les cacher derrière un cadre.

## The short version

- Un Mark Gradiently est un fond qui s’adapte au texte, car il est dessiné en direct et sait où se trouvent les mots du design.
- Derrière vos mots, un Mark place sa zone la plus calme et la plus contrastée, assombrit ou éclaircit les couleurs près des lettres et apaise les détails chargés.
- Cette réaction n’utilise ni cadre, ni ombre, ni flou : le fond reste entier et les mots se lisent.
- Vous choisissez l’intensité de la réaction d’un Mark, de Désactivé à Marqué en passant par Invisible, Discret et Net, et vous pouvez l’affiner avec Ton, Calme, Courbure et Portée.
- Comme le Mark est redessiné pour chaque taille, il refait de la place partout où les mots arrivent dans chaque format.

Un Mark Gradiently est un **fond qui s’adapte au texte**. Parce qu’il est dessiné en direct plutôt qu’enregistré comme une image, il sait où sont vos mots et se réorganise autour d’eux : la partie la plus calme et la plus contrastée de la matière passe derrière le texte, les couleurs près des lettres s’assombrissent ou s’éclaircissent, et les détails chargés s’apaisent. Rien n’est posé par-dessus. Ni cadre, ni ombre, ni flou : vous gardez tout le fond et les mots se lisent.

## Les moyens habituels de rendre un texte lisible, et leur coût

Posez un titre sur un dégradé ou une photo animés et une partie disparaît. Les solutions classiques fonctionnent toutes en recouvrant le fond, ce qui est un drôle de résultat quand c’est le fond qui vous a fait choisir le design.

### Recouvrir le fond

- Un cadre plein ou dépoli derrière les mots
- Une ombre portée sur chaque lettre
- Flouter la zone derrière le texte
- Un voile sombre sur toute l’image

### Un Mark qui fait de la place

- Sa zone calme se déplace là où sont les mots
- Les couleurs près des lettres s’assombrissent ou s’éclaircissent
- Le grain, les reliefs et les reflets s’apaisent derrière le texte
- Le reste du fond reste aussi vif qu’avant

Chaque solution a sa place sur une image plate, et [le texte sur un fond en dégradé](https://gradiently.design/fr/guide/text-on-gradient) les présente honnêtement. Avec un Mark, la différence est que le fond participe au lieu d’être masqué.

## Ce que fait un Mark autour de vos mots

1. **Il se pose** La matière se déplace pour que vos mots tombent sur sa partie la plus calme. La lumière qui aurait été derrière le titre glisse vers l’espace libre autour.
2. **Il change de ton** Près des lettres, la palette glisse vers une couleur qui contraste avec le texte : plus profonde derrière une encre claire, plus claire derrière une encre sombre.
3. **Il s’apaise** Les distorsions, l’agitation et le détail fin se détendent derrière les mots, pour qu’une texture forte ne traverse jamais un trait fin.
4. **Il se courbe aux bords** Les motifs s’incurvent légèrement au bord des mots au lieu de les traverser tout droit.

Une affiche d’événement pour une nocturne au musée où la zone la plus lumineuse du dégradé se trouve derrière le titre

Réaction désactivée : la matière traverse les mots tout droit, exactement comme une image plate.

La même affiche de musée où le dégradé s’est posé en un ton calme et plus profond derrière le titre et les détails

Réaction activée : le même Mark pose une zone plus profonde et plus calme derrière le texte et garde sa couleur ailleurs.

La réaction fonctionne main dans la main avec [l’encre automatique](https://gradiently.design/fr/guide/auto-ink-legibility), qui choisit l’encre claire ou sombre du Mark pour chaque ligne. Le fond fait la place ; l’encre automatique choisit la bonne couleur pour la remplir.

## Choisir l’intensité de la réaction du fond

C’est vous qui décidez à quel point le Mark s’efface. Le panneau s’appelle Autour de vos mots, et il commence par cinq niveaux.

| Niveau | Ce qu’il fait | Idéal pour |
| --- | --- | --- |
| Désactivé | La matière ignore vos mots | Fonds d’écran et tirages d’art sans texte |
| Invisible | Agit seulement où c’est nécessaire ; personne ne le remarquera | Grands titres affirmés sur des Marks calmes |
| Discret | Équilibré : le style reste, les mots se lisent | La plupart des posts et stories |
| Net | Les mots l’emportent toujours | Menus, listes de prix, détails d’événement |
| Marqué | Le contraste maximal, apaisé sur une zone un peu plus large | Petit texte, texte long, panneaux lus de loin |

Cinq points de départ. Discret est un choix par défaut raisonnable ; montez d’un cran dès que les mots deviennent plus petits ou plus longs.

Sous les niveaux, quatre réglages permettent d’affiner : **Ton** fixe à quel point la matière se pose derrière les mots pour le contraste, **Calme** à quel point les distorsions et l’agitation se détendent, **Courbure** à quel point le motif s’incurve au bord des mots, et **Portée** s’il épouse chaque lettre ou réagit autour de tout le bloc de texte.

> **La Portée est le réglage dont on a le plus besoin** Pour un titre court, une portée serrée garde le fond vivant jusqu’aux lettres. Pour un paragraphe ou une liste, une portée plus large apaise une seule zone nette pour tout le bloc, plus facile à lire.

## Pourquoi c’est important à toutes les tailles

Une image de fond plate est mise en page une seule fois. Recadrez-la pour une story et la zone lumineuse peut tomber pile derrière le titre. Un Mark est redessiné pour chaque format : quand un design passe d’un post à une story puis à une bannière, les mots se déplacent aussi et le Mark refait de la place partout où ils arrivent. C’est ce qui permet à [un style de fonctionner dans tous les formats](https://gradiently.design/fr/guide/one-look-every-size).

- Post 1080×1350: 1080 × 1350
- Story 1080×1920: 1080 × 1920
- En-tête X 1500×500: 1500 × 500
- Miniature YouTube 1280×720: 1280 × 720

Quatre formes, quatre emplacements différents pour le titre. La zone calme suit les mots dans chacune.

## Une version simple de l’idée en CSS

Sur le web, vous pouvez emprunter le principe avec un simple dégradé : placez la partie la plus profonde et la plus calme du fond là où se trouve votre texte, et gardez la couleur vers les bords. Il ne suivra pas les mots quand la mise en page change, mais c’est mieux qu’un cadre.

Zone calme et profonde placée derrière le texte: `radial-gradient(ellipse 70% 45% at 35% 62%, #1b1030 0%, #2e1745 40%, #8a3f6e 75%, #f0a46f 100%)`

Le bloc de texte se trouve dans l’ellipse prune foncé en bas à gauche ; la pêche et le rose restent vifs vers les bords.

```css
.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}
```

Déplacez la position de l’ellipse là où se trouve votre titre. [Le dégradé en superposition en CSS](https://gradiently.design/fr/guide/css-gradient-overlay) montre la même astuce sur une photo.

## Quand baisser la réaction

Tous les designs ne recherchent pas une lisibilité maximale. Un fond d’écran de téléphone n’a aucun mot, Désactivé est donc le bon choix. Un très grand lettrage d’affichage, un seul mot sur toute une affiche, tient seul et rend souvent mieux en Invisible. Les traitements de lettrage comme Contour ou Extrusion, présentés dans [les effets de lettrage](https://gradiently.design/fr/guide/lettering-treatments), portent déjà leur propre contraste. Gardez les niveaux forts pour les cas qui en ont besoin : petits caractères, longs détails et tout ce qu’on lit à la hâte.

## FAQ

### Comment un Mark Gradiently s’adapte-t-il au texte ?

Il place sa zone la plus calme et la plus contrastée derrière vos mots, assombrit ou éclaircit les couleurs près des lettres et apaise les détails chargés, le tout sans cadre, ombre ni flou.

### Puis-je empêcher le fond de réagir à mon texte ?

Oui. Réglez la réaction sur Désactivé et la matière ignore vos mots, ce qui convient aux fonds d’écran et aux designs sans texte.

### Quel niveau de réaction choisir ?

Discret convient à la plupart des posts et stories. Utilisez Net ou Marqué pour les petits textes, les textes longs, les menus et tout ce qui se lit de loin.

### La réaction fonctionne-t-elle quand je redimensionne un design ?

Oui. Un Mark est redessiné pour chaque taille, il refait donc de la place partout où les mots arrivent dans le nouveau format.