Rendre un texte lisible sur une photo sans encadré

Pour rendre un texte lisible sur une photo sans le mettre dans un encadré, commencez par le placement : trouvez ou créez la zone la plus calme de l’image et posez-y les mots. Si cela ne suffit pas, ajoutez un dégradé de lisibilité, un fondu doux de clair à sombre le long d’un bord, puis réduisez le contraste propre de la photo avec une teinte, et enfin rendez le texte plus gras et plus grand. Utilisées dans cet ordre, ces techniques gardent la photo intacte et les mots clairs. Un encadré est un dernier recours, pas un point de départ.

Cette page traite précisément de l’approche sans encadré. Pour toutes les techniques, y compris encadrés, bandeaux et découpes, voir le texte sur image.

Pourquoi le texte se perd sur les photos

Un texte a besoin d’une différence de luminosité entre les lettres et ce qu’il y a derrière. Une photo change constamment de luminosité : une chemise blanche près d’une porte sombre, des feuilles sur le ciel. Partout où une lettre passe du clair au sombre, une partie disparaît. Les détails fins aggravent le problème, car l’œil ne peut pas séparer le bord de la lettre de la texture derrière.

Six façons de rendre un texte lisible sur une photo

1. Choisir et recadrer pour l’espace vide

La meilleure solution intervient avant d’écrire un mot. Choisissez des photos avec une zone vide : ciel, mur, plateau de table, arrière-plan flou. Puis recadrez pour que cette zone se trouve là où va le titre. Une publication portrait en 1080×1350 vous laisse la place de pousser le sujet vers le bas et de garder le tiers haut calme. Photographiez dans cet esprit si vous le pouvez : reculez et laissez de l’espace au-dessus du sujet. Le texte sur fonds chargés couvre les motifs et textures qui se comportent comme des photos chargées.

2. Ajouter un dégradé de lisibilité

Un dégradé de lisibilité est un dégradé posé sur la photo, sombre au bord où se trouve le texte et se fondant jusqu’au totalement transparent. Comme il s’estompe, l’œil le lit comme une lumière qui décroît plutôt que comme une forme. Limitez-le au tiers de l’image qui porte les mots, et utilisez un ton sombre pris dans la photo plutôt que du noir pur.

3. Teinter la photo

Teinter une photo en une ou deux couleurs resserre sa plage de clairs et de sombres, si bien que le texte posé dessus se lit plus facilement partout. Un duotone sombre, comme du bleu profond au lilas doux, marche particulièrement bien derrière du texte blanc ; l’effet duotone montre comment en construire un. La teinte donne aussi à un ensemble de photos disparates l’air d’appartenir à une seule marque.

4. Assombrir ou éclaircir localement

La plupart des éditeurs photo permettent de baisser l’exposition ou les hautes lumières dans une zone. Baisser un ciel clair d’un diaphragme, juste derrière le titre, suffit souvent à lui seul et reste invisible pour qui n’a pas vu l’original.

5. Rendre le texte plus robuste

Le texte fin et petit est le premier à disparaître. Utilisez une graisse demi-grasse ou grasse, montez d’une taille et ouvrez légèrement l’espacement des lettres sur les petites lignes. Une sans lourde à 110 px tiendra sur une photo là où un empattement léger à 70 px n’y arrivera jamais. Les polices grasses liste des polices fiables.

6. Placer la photo à côté des mots

Parfois, la réponse honnête est de ne pas superposer du tout. Recadrez la photo en cercle, en arche ou sur la moitié du cadre et posez les mots sur un fond uni ou en dégradé à côté. La photo reste entière et les mots obtiennent un contraste parfait.

Quelle technique pour quelle photo

Comment ajouter un dégradé sur une image en CSS

Sur un site web, superposez le dégradé et la photo dans une seule déclaration background. Le dégradé vient en premier pour se placer dessus. Cela garde l’effet en CSS, donc il s’adapte à tout recadrage de la mise en page.

.hero {
  min-height: 70vh;
  display: grid;
  align-items: end;
  padding: 4rem;
  color: #fafaf9;
  background:
    linear-gradient(0deg, rgb(12 10 9 / 0.85) 0%, rgb(12 10 9 / 0.4) 35%, rgb(12 10 9 / 0) 65%),
    url("/images/terrace.jpg") center / cover no-repeat;
  background-color: #1c1917; /* fallback while the image loads */
}

Vérifiez le résultat selon les recommandations de contraste : environ 4,5 pour 1 pour le texte normal et 3 pour 1 pour les grands titres, comme l’expose le guide de contraste de WebAIM. Testez le point le plus clair derrière les mots, pas la moyenne. Contraste des couleurs et accessibilité explique les chiffres.

Erreurs à éviter avec du texte sur photo

Les halos et lueurs autour des lettres sont la tentative de sauvetage la plus courante et celle qui fait le plus bon marché. Ils floutent les bords des lettres, soit le contraire de ce que demande la lecture. Si vous êtes tenté, lisez d’abord les ombres de texte et leurs meilleures alternatives.

Dans Gradiently, les photos peuvent être teintées aux couleurs du Mark en mono, en duotone ou en lavis, et recadrées en arches, cercles et formes libres pour se placer à côté des mots. Sur les créations où le Mark transparaît, il place sa zone la plus calme derrière le texte et l’encre Auto choisit un texte clair ou foncé pour chaque ligne, sans encadrés, ombres ni flou.