Polices display : bien composer avec de grands caractères

Les polices display sont des caractères dessinés pour être utilisés en grand : titres, affiches, couvertures, emballages et courtes salves de mots. Leurs détails, du fort contraste entre pleins et déliés à l’espacement serré et aux formes expressives, sont pensés pour être à leur meilleur en grande taille et se défont en général à la taille d’un paragraphe. Utilisez une police display pour les quelques mots qui doivent arrêter le regard, et une police de texte plus discrète pour tout ce qu’on lit ensuite.

Ce guide explique ce qui fait d’une police une police display, quelle taille lui donner, comment l’associer et comment éviter qu’un grand titre paraisse encombré ou daté. Il prolonge les bases de la typographie et la hiérarchie visuelle.

Ce qui distingue une police display d’une police de texte

Les polices de texte sont conçues pour le confort sur des milliers de mots : formes ouvertes, traits robustes, espacement généreux et grande hauteur d’x pour que les lettres survivent aux petites tailles et aux mauvais écrans. Les polices display sacrifient une partie de cela pour le caractère. À 80 px, personne n’a du mal à voir les lettres : le dessinateur peut donc pousser le contraste, resserrer les largeurs, aiguiser les détails et serrer l’espacement.

Certaines familles existent dans les deux versions : une coupe Texte et une coupe Display du même dessin, ou un seul fichier variable avec un axe de taille optique qui s’ajuste quand la taille change. Les polices variables expliquent la taille optique plus en détail.

Les types de polices display et l’ambiance de chacun

Le plus simple pour choisir une police display est de partir de l’impression voulue. Chaque famille ci-dessous inclut des exemples largement disponibles sur Google Fonts, que vous pouvez essayer sur vos propres mots.

• Empattements à fort contraste : mode, culture, édition. Exemples : Playfair Display, DM Serif Display, Bodoni Moda.
• Sans empattement condensées : urgence, sport, actualité, affiches. Exemples : Bebas Neue, Anton, Oswald.
• Sans empattement larges et étendues : tech, marques modernes, calme assuré. Exemples : Syne, Unbounded.
• Douces et arrondies : convivial, cuisine, enfants, bien-être. Exemples : Fraunces avec son axe doux, Fredoka.
• Grotesques épaisses : déclarations fortes, lancements, militantisme. Exemples : Archivo Black, Inter Tight en graisse black.
• Scripts et lettres dessinées à la main : invitations, artisanat, marques personnelles, à petites doses. Exemples : Caveat, Yellowtail.

Quelle taille pour une police display

Assez grande pour être clairement la première chose que l’on voit, et assez petite pour que les mots tiennent sur peu de lignes. Une bonne habitude consiste à dimensionner le texte display par rapport au canevas plutôt qu’en points. Sur un post de 1080 par 1350, un titre de deux à quatre mots remplit souvent 70 à 90 pour cent de la largeur. Sur un site web, le titre d’un bandeau d’accueil fait en général trois à six fois la taille du texte courant.

Sur le web, clamp() fait varier le texte display en douceur entre un minimum et un maximum : grand sur les grands écrans, sans déborder sur mobile. Resserrez l’interligne et l’espacement des lettres quand la taille augmente ; les valeurs par défaut sont dessinées pour un texte plus petit.

.hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.75rem, 5vw + 1rem, 6.5rem);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 14ch;
}

.hero-lede {
  font-family: "Inter", system-ui, sans-serif;
  font-size: clamp(1.0625rem, 0.5vw + 1rem, 1.25rem);
  line-height: 1.55;
  max-width: 52ch;
}

Associer une police display à une police de texte

L’association la plus simple et la plus fiable donne un seul rôle à chaque police. La police display parle fort pour quelques mots ; la police de texte fait le travail discret des légendes, du texte courant, des dates et des prix. Contrastez les deux d’au moins une façon nette, comme empattement contre sans empattement ou condensée contre largeur normale, pour qu’elles ne ressemblent pas à un presque-accord. L’association de polices détaille toutes les règles.

Le texte display sur des dégradés et des fonds chargés

Un grand texte est le plus tolérant que l’on puisse poser sur un fond coloré, car les traits épais gardent leur forme face aux mouvements du fond. Le risque est dans les parties fines : les empattements très fins et les petits détails disparaissent dans les zones plus claires ou plus chargées d’un dégradé. Sur des fonds riches, choisissez une police display aux déliés plus solides, ou montez d’une graisse.

Dans Gradiently, un Mark sait où sont vos mots : sa zone la plus calme passe derrière le titre et les couleurs près des lettres s’approfondissent ou s’éclaircissent, de sorte que même un texte display fin tient bien. Les traitements de lettrage comme Contour, Inline et Extrude donnent du caractère aux mots display quand la police elle-même est sobre ; les effets de texte montrent quand ils fonctionnent.

Les erreurs qui font paraître un texte display cheap

1. 1

   L’espacement par défaut à de grandes tailles

   Un grand texte composé avec les valeurs par défaut du texte paraît lâche. Resserrez l’interligne à environ 1 à 1,1 et l’espacement des lettres légèrement.

2. 2

   Le faux gras et le faux italique

   Quand une police n’a pas un style, les outils et les navigateurs peuvent le simuler en épaississant ou en penchant les lettres. Chargez les vraies graisses et les vrais italiques.

3. 3

   Étirer le texte pour le faire tenir

   Ne déformez jamais le texte horizontalement ou verticalement. Choisissez plutôt une coupe condensée ou large.

4. 4

   Des polices à la mode sans raison

   Une police choisie parce qu’elle est partout cette saison vieillit avec la saison. Choisissez selon l’ambiance dont vous avez besoin.

5. 5

   Les mots seuls dans un titre de deux lignes

   Un seul mot court isolé sur la seconde ligne affaiblit le titre. Réécrivez, changez la coupure ou utilisez text-wrap: balance.