L’essentiel en bref
- Une ombre de texte fonctionne mieux comme style voulu, par exemple une ombre dure décalée sans flou, plutôt que comme remède à un mauvais contraste.
- Les lueurs douces et les halos flous derrière les lettres floutent leurs bords et tendent à donner à une création un air bon marché et daté.
- Une ombre fine et serrée est un choix raisonnable pour les sous-titres sur vidéo en mouvement, où l’on ne peut pas contrôler le fond.
- Pour rendre un texte lisible, le placement, un dégradé de lisibilité, un fond teinté et une graisse plus forte battent généralement toute ombre.
- En CSS, text-shadow prend un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur, et accepte plusieurs ombres séparées par des virgules.
Sur cette page
Une ombre de texte aide dans deux situations : comme style voulu, généralement une ombre dure décalée de quelques pixels sans flou, et comme mince bord de sécurité sur des sous-titres sur vidéo en mouvement. Comme sauvetage de mots qui ne se lisent pas sur une photo ou un dégradé, elle nuit généralement : les ombres douces et les lueurs floutent justement les bords que l’œil utilise pour reconnaître les lettres, et elles datent une création instantanément. Pour la lisibilité, déplacez les mots vers une zone plus calme, ajoutez un dégradé de lisibilité, teintez le fond ou choisissez une graisse plus forte.
Types d’effet d’ombre de texte
À quoi ça ressemble
Verdict
À quoi ça ressemble
Verdict
À quoi ça ressemble
Verdict
À quoi ça ressemble
Verdict
À quoi ça ressemble
Verdict
Quand une ombre de texte aide
Comme style dur et décalé
Une ombre sans flou, décalée de quelques pour cent de la hauteur des lettres et dans une couleur contrastée de la palette, est un style typographique à la longue histoire sur les affiches, les emballages et les enseignes. Elle paraît assurée et un peu nostalgique. Traitez-la comme tout effet : un par création, quelques grands mots, une police grasse. Les effets de texte la compare aux autres traitements. Les effets de texte rétro montre ses proches cousins, le double et la traînée.
Derrière les sous-titres vidéo
Les sous-titres et légendes se posent sur des images qui changent à chaque plan, vous ne pouvez donc pas choisir une zone calme. Une ombre sombre et serrée ou un fin contour garde les sous-titres blancs lisibles quand une fenêtre lumineuse passe derrière. Gardez-la près des lettres : un flou court et peu ou pas de décalage. Le design des sous-titres vidéo couvre la taille et le placement.
Quand une ombre de texte nuit
Le problème d’utiliser une ombre pour corriger le contraste, c’est qu’on traite le symptôme. Le fond reste chargé ; vous avez seulement ajouté une bavure autour des lettres. Les lueurs douces sont les pires, car elles étalent un nuage flou au-delà de chaque lettre et adoucissent le bord qui définit sa forme. Sur les publications sociales, elles se compressent aussi mal et se transforment en bandes tachetées.
L’ombre comme béquille
- Lueur noire douce sur du texte blanc posé sur une photo
- Halo coloré autour d’un titre
- Ombre sur du petit texte courant
- Plusieurs ombres différentes dans une même création
- Ombre plus contour plus lueur sur un même mot
Meilleur choix
- Déplacer les mots vers la zone la plus calme
- Un dégradé de lisibilité sur un bord de l’image
- Un texte plus grand et plus gras pour la petite ligne
- Un style constant sur tout l’ensemble
- Un seul traitement, choisi à dessein
De meilleures alternatives à l’ombre de texte
- 1
Déplacez les mots
Trouvez la zone la plus calme et la plus régulière du fond et placez-y le texte. Cela règle la plupart des problèmes avant qu’ils commencent.
- 2
Ajoutez un dégradé de lisibilité
Un fondu doux de sombre à transparent le long d’un bord donne du contraste sans forme visible. Le texte lisible sur photo donne des codes de dégradé.
- 3
Calmez le fond
Teintez une photo en une ou deux couleurs, baissez ses hautes lumières ou choisissez un dégradé à la région plus calme.
- 4
Renforcez le texte
Montez d’une graisse et d’une taille. Une sans grasse à une taille généreuse n’a besoin d’aucune aide sur la plupart des fonds.
- 5
Changez l’encre
Parfois un texte foncé sur une zone claire bat un texte blanc avec ombre. Choisissez l’encre ligne par ligne plutôt que pour toute la création.
Des mots sur une portion chargée du fond : c’est le moment où l’on cherche une lueur.
Les mêmes mots avec le fond calmé derrière. Aucune ombre nécessaire, et les lettres restent nettes.
Sur les dégradés en particulier, le fond s’éclaircit ou s’assombrit souvent d’un bout à l’autre du cadre, donc une seule couleur d’encre ne convient pas à chaque ligne. Le texte sur un dégradé montre comment l’anticiper, et le texte sur fonds chargés couvre les motifs et les textures.
L’ombre de texte en CSS
La propriété CSS text-shadow prend un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur. Séparez plusieurs ombres par des virgules ; la première listée se place dessus. Utilisez des unités em pour que l’ombre suive la taille de police. La référence complète est sur MDN.
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
color: #fff7ed;
text-shadow: 0.06em 0.06em 0 #9a3412;
}
/* Tight caption edge for text over video */
.caption {
color: #ffffff;
text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}
/* Preferred fix for readability: a scrim, not a shadow */
.hero {
background:
linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
url("/images/hero.jpg") center / cover;
}Les vérificateurs de contraste automatiques comparent la couleur du texte avec celle du fond et ignorent l’ombre. Si un outil signale votre texte comme peu contrasté, une ombre peut le rendre plus beau sur votre écran mais ne change pas la mesure. Corrigez plutôt le fond ou l’encre. L’ombre de texte CSS propose d’autres recettes pour le web.
Comment Gradiently gère la lisibilité
Gradiently est né de l’idée que les mots ne devraient pas avoir besoin d’être sauvés. Un Mark sait où sont les mots : sa région la plus calme et la plus contrastée se place derrière le texte, les couleurs près des lettres s’approfondissent ou s’éclaircissent, et les détails chargés s’apaisent. L’encre Auto choisit ensuite un texte clair ou foncé pour chaque ligne à partir de la palette du Mark. Ni encadrés, ni ombres, ni flou, et vous choisissez l’intensité de la réponse du Mark. Si vous voulez de la profondeur comme style, le traitement de Lettering Extrusion donne des lettres profondes aux couleurs du Mark et Double dessine des lettres ouvertes deux fois, nettes et sans flou.
Les questions qu’on nous pose
Faut-il utiliser une ombre de texte pour rendre un texte lisible ?
En général non. Le placement, un dégradé de lisibilité, un fond plus calme ou une graisse plus forte rendent le texte lisible sans flouter les lettres.
Qu’est-ce qu’une ombre dure sur du texte ?
Une copie des lettres décalée vers le bas et d’un côté sans flou, généralement dans une couleur contrastée. C’est un style voulu que l’on voit sur les affiches et les emballages.
Comment ajouter une ombre de texte en CSS ?
Utilisez text-shadow: 0.06em 0.06em 0 #9a3412; où les valeurs sont le décalage horizontal, le décalage vertical, le rayon de flou et la couleur.
Une ombre de texte améliore-t-elle le contraste pour l’accessibilité ?
Les vérificateurs automatiques comparent la couleur du texte avec le fond et ignorent l’ombre, donc une ombre ne corrigera pas un rapport insuffisant. Corrigez le fond ou l’encre.
Pourquoi les effets de texte lumineux font-ils bon marché ?
Une lueur étale un nuage flou autour de chaque lettre, adoucit ses bords et forme souvent des bandes quand l’image est compressée.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil