Typographie

La typographie est l'art d'agencer les caractères : choisir les polices, les tailles, les espacements et la hiérarchie pour que le texte soit lisible, agréable à lire et porteur du bon ton. Ce n'est pas un ornement ajouté à la fin : sur un site web, la typographie porte l'essentiel du message, car le texte est ce que les visiteurs lisent réellement. Une bonne typographie rend le contenu facile à parcourir et à croire ; une mauvaise coûte discrètement de l'attention et de la crédibilité. Sur le web, elle doit aussi être performante, se charger vite et s'afficher proprement sur chaque écran.

Qu'est-ce que la typographie ?

La typographie est la discipline qui rend le langage écrit visible et efficace. Elle recouvre les polices utilisées, la taille du texte, l'espace entre les lignes et les lettres, et la façon dont titres, corps et légendes se répondent. L'objectif est d'abord la clarté : le lecteur doit saisir le sens sans remarquer la mécanique. La typographie fixe aussi le ton, car une sans-serif géométrique et une serif classique racontent des histoires très différentes avec les mêmes mots.

Sur un site, la typographie est l'élément de design le plus répété. Les couleurs et les images changent d'une page à l'autre, mais le texte est sur chaque écran, ce qui explique qu'un système typographique cohérent fasse plus pour une marque que presque tout autre choix de design.

Les éléments fondamentaux de la typographie

Quelques briques décident si un texte se lit bien :

• Police (typeface) : le dessin des lettres (par exemple Inter ou Georgia).
• Fonte (font) : une graisse et un style précis d'une police (Inter Bold 16px).
• Graisse : l'épaisseur, du thin au black, qui construit la hiérarchie.
• Taille : en px, rem ou em ; le corps de texte fait souvent 16 à 18px.
• Interligne : l'espace vertical entre les lignes, en général 1,4 à 1,6 pour le corps.
• Interlettrage : l'espace horizontal entre les caractères.
• Hiérarchie : le contraste de taille et de graisse qui guide l'œil du titre au texte.

Les classifications de polices

Les polices se répartissent en familles aux usages et aux personnalités distincts :

La typographie sur le web : polices et performance

Sur le web, une police ne s'affiche que si le navigateur peut charger ses fichiers, ce qui fait de la performance une part de la typographie. On déclare les polices avec une pile qui prévoit un repli propre, et on contrôle le chargement pour que le texte ne disparaisse jamais pendant le téléchargement :

body {
font-family: 'Inter', system-ui, sans-serif;
font-size: 1rem;
line-height: 1.6;
}
@font-face {
font-family: 'Inter';
src: url('/fonts/inter.woff2') format('woff2');
font-display: swap;
}

Des fichiers WOFF2 modernes, un nombre raisonnable de graisses et font-display: swap gardent les pages rapides et évitent les décalages de mise en page, ce qui protège aussi les Core Web Vitals. Les polices système coûtent zéro octet et restent un choix valable quand la vitesse prime.

Bonnes pratiques typographiques

Un texte lisible suit quelques règles. Gardez une longueur de ligne d'environ 45 à 75 caractères, car des lignes trop longues fatiguent l'œil. Construisez une hiérarchie claire avec une échelle typographique cohérente plutôt que des tailles choisies au hasard. Limitez-vous à une ou deux polices et jouez sur la graisse et la taille pour le contraste, au lieu de multiplier les fontes. Laissez assez d'interligne et d'espace pour que les paragraphes respirent. Alignez le corps de texte à gauche dans les langues qui se lisent de gauche à droite, où le bord droit irrégulier se lit plus confortablement qu'un texte justifié à l'écran.

Typographie, lisibilité et accessibilité

La typographie est un levier d'accessibilité. Le texte a besoin d'une taille et d'un contraste suffisants par rapport au fond pour respecter les critères WCAG, et il doit rester lisible quand l'utilisateur zoome à 200 pour cent. Les unités relatives comme le rem laissent le texte s'adapter aux réglages du lecteur, alors que des tailles en pixels figées peuvent exclure certaines personnes. Évitez les longs passages en capitales ou les graisses trop fines sur fond pâle, qui réduisent la lisibilité. De bons choix typographiques aident chaque lecteur, pas seulement les personnes en situation de handicap.

La typographie chez BeBranded

Nous traitons le texte comme un système, pas comme une décoration de dernière minute : une échelle définie, un petit jeu de graisses et des règles claires, posés dès l'étape design pour que chaque page reste cohérente et lisible. Cela fait partie de la construction d'interfaces auxquelles les gens se fient et qu'ils peuvent réellement utiliser, sur tout appareil.