Aller au contenu principal
Design

Des sous-titres d'une couleur, choisie pour chaque film

· 4 min de lecture

Une seule image a suffi. Des mots blancs cernés d'un épais contour orange, et le dernier mot de la phrase laissé seul sur une deuxième ligne. Rien n'était cassé, et pourtant c'était étrange, comme un sous-titre qui en fait trop.

Un sous-titre qui en faisait trop

Au fil de l'automne, nos sous-titres étaient devenus une petite boîte à outils. Il y avait cinq looks : une pastille avec le mot prononcé allumé sur une plaque aux couleurs de la marque, de grandes capitales, une puce par mot, un bandeau discret, et des lettres blanches au contour coloré. Par-dessus, le mot prononcé pouvait grossir, rebondir, briller ou glisser, et les mots marqués prenaient la couleur de la marque.

Chaque option avait sa raison. Ensemble, elles faisaient des sous-titres qui rivalisaient avec le film. On lit un sous-titre en une fraction de seconde, et chaque effet est une chose de plus à décoder avant de revenir à l'image.

L'image qu'on nous a renvoyée le disait sans détour : pas de contour, une seule couleur, des mots simples. Puis une deuxième remarque, tout aussi claire : pas toujours du noir non plus. La couleur doit aller au film.

Ce que disent les pros du sous-titrage

Avant de dessiner quoi que ce soit, nous avons lu ce que disent les diffuseurs, les guides de style des plateformes et la recherche sur la lecture. Ils s'accordent sur quelques points :

  • C'est le contraste qui rend un sous-titre lisible. Le texte doit tenir au moins 4,5:1 face à ce qui est juste derrière lui, le seuil d'accessibilité, et plus c'est mieux.
  • Une ombre seule ne suffit pas sur une image claire. Des mots blancs ombrés sur une page blanche deviennent du gris sur blanc.
  • Deux lignes au maximum, coupées là où la phrase respire. Les études d'oculométrie sur les retours à la ligne montrent que les spectateurs préfèrent des lignes coupées entre deux groupes de mots, et qu'une mauvaise coupe demande plus d'effort.
  • Des mots calmes. À la télévision comme au cinéma, les sous-titres ne s'animent pas mot à mot. Ils apparaissent, on les lit, ils s'en vont.

Rien de tout cela ne demande de boîte, de contour ou de mot allumé. Il faut la bonne couleur, au bon endroit.

Un seul sous-titre, cinq noms

Chaque style de sous-titre dessine donc désormais le même sous-titre. Tous les mots ont la même couleur, tout le temps. Plus de plaque, plus de pastille, plus de contour, plus d'effet de grossissement ni de halo coloré. Le texte est en casse normale, gras sans être noir, avec une vraie espace entre les mots.

Les cinq noms de style restent, parce que les films, les looks et les options de nos assistants les utilisent déjà. Ils ne diffèrent plus que par la taille : le grand style monte d'une taille pour les films pensés pour le téléphone, le petit reste un bandeau discret. Les réglages d'animation et de mise en valeur sont toujours acceptés, et l'éditeur indique clairement qu'ils ne changent plus le dessin.

La lisibilité vient du contraste et d'un halo doux en plusieurs couches : un cœur serré qui détache chaque lettre de l'image, et un fondu plus large autour du mot. On lit une typographie nette, pas une bordure.

Une couleur pour chaque image

Une seule couleur par film ne veut pas dire la même couleur pour tous les films. Le moteur de rendu mesure déjà la luminosité des pages de chaque site, et le sous-titre choisit maintenant son encre selon ce qui est vraiment derrière lui :

  • Sur une image sombre, l'encre est un blanc teinté d'un souffle de la marque, sur un halo qui est la nuance la plus profonde de cette marque. Une marque marine a un halo marine, une marque verte un vert forêt. Le couple tient au moins 15:1.
  • Sur une page claire, l'encre devient la nuance profonde de la marque, au moins 7:1 sur blanc, avec un halo blanc et doux.
  • Sous une fenêtre de navigateur en paysage, le sous-titre est posé sur le fond sombre du film, pas sur la page : il garde l'encre claire, même si le site est blanc.

Quand une encre sombre passe sur une page blanche, le léger fondu en bas de l'image devient blanc lui aussi. Sur une page blanche, on ne le voit pas comme une forme, mais il efface le petit texte de la page derrière les mots.

Deux lignes qui forment une seule idée

L'image de départ avait un deuxième défaut : le sous-titre remplissait sa première ligne et laissait tomber le dernier mot, virgule comprise, sur une ligne à lui tout seul.

Un sous-titre qui a besoin de deux lignes est désormais coupé là où la ligne la plus longue est la plus courte possible : les deux lignes sont équilibrées. Quand une coupe juste après une ponctuation est presque aussi équilibrée, elle l'emporte, parce qu'une virgule est l'endroit où la phrase marque une pause. Un numéro de téléphone ou un chiffre avec son unité n'est jamais coupé, et un sous-titre de quatre mots ou plus ne laisse jamais un mot seul.

La phrase de cette image se lit maintenant « Concevez votre » en haut et « bois sur mesure, » en bas : deux morceaux d'une même idée, lus d'un coup d'œil.

Ce que cela change dans vos films

Chaque film rendu à partir d'aujourd'hui a les mêmes sous-titres calmes : une seule couleur, pas de boîte, pas de contour, deux lignes équilibrées au plus. La couleur est choisie pour votre marque et pour l'image derrière les mots : une page d'accueil blanche, un tableau de bord sombre et une carte colorée ont chacun un sous-titre qui se lit, dans une nuance qui appartient au film.

Vous n'avez rien à régler. Si vous aviez choisi un style de sous-titre, il garde sa taille. Si vous aviez choisi une animation, les mots restent désormais immobiles. Un sous-titre est là pour être lu, et maintenant il s'efface dès qu'il l'a été.

Voyez-le sur votre propre site

Collez une page et obtenez la vidéo commentée dont parle ce blog. La première est offerte.

Première vidéo offerte · sans carte · prête en quelques minutes

← Tous les articles