Imprimerie d'interface

1) Rôle de la typographie dans le produit

• accélère le balayage et réduit la charge cognitive,
• forme une hiérarchie et aide à naviguer dans l'état,
• augmente la conversion (CTA, formulaires) et réduit les erreurs,
• rend l'interface accessible et résistante à la localisation.

2) Paramètres de base

Kegl (texte principal) : 16-18 px sur le bureau, 15-16 px sur le mobile.
Espacement entre les lignes (line-height) : 1. 45–1. 6 pour le texte, 1. 2–1. 35 pour les titres.
Longueur de la ligne (mesure) : 45-80 caractères ; 36-60 dans les sidbars.
Espacement entre lettres (tracking) : 0-1 % pour le texte normal ; pour le caps - + 2-4 %.
Contraste (WCAG) : Texte normal ≥ 4. 5:1, gros/gras ≥ 3:1.
Registre : éviter les CAPS ALL permanents ; utiliser pour les étiquettes/puces, compenser le tracking.

3) Hiérarchie et échelle de taille

Nous recommandons une approche modulaire : grille 8-pt + échelle typographique.

• Display: 40/48 (LH 1. 15)
• H1: 32/40 (1. 25)
• H2: 24/32 (1. 25)
• H3: 20/28 (1. 3)
• H4: 18/26 (1. 4)
• Body/L: 18/28 (1. 55)
• Body/M: 16/26 (1. 55)
• Body/S: 14/22 (1. 5)
• Caption: 12/18 (1. 5)
• Mono/UI: 12–14/18–20

• Entre les niveaux voisins, c'est une étape importante (au moins 12 à 16 %).
• La hiérarchie est construite en combinant la taille, le poids, l'interligne, la couleur (en tenant compte du contraste) et les distances aux blocs voisins.

4) Capots, ligne de base et optique

Alignez les éléments sur le capot des titres (commodément avec les icônes).
Maintenez la ligne de base du texte avec 4/8-pt pas - des rythmes réguliers facilitent la lecture.
Tirets optiques : titres au-dessus du bloc - plus que sous lui (par exemple, + 4-8 px en haut).

5) Caractères et polices variables

Ensemble minimum : Regular, Medium, SemiBold (Bold en option).
N'utilisez pas Ultra-Light/Thin dans l'interface utilisateur.

• Body : 420-470 (plus uniforme optiquement que 400).
• UI labels: 500–550.
• Headers/CTA: 600–650.
• Si vous réduisez le cage, augmentez légèrement le poids (compensation).
• Désactiver les ligatures décoratives dans les nombres UI ; gardez les ligatures standard pour cyrillique/latin.

6) Nombres, tableaux et dates

Incluez les figures tabulaires (chiffres monosirins) pour les montants, les coefficients, les minuteries, les notations.
Signes +/ − - toujours visibles et avec un contraste suffisant ; ne mettez pas seulement la couleur (icône/flèche/gras) en surbrillance.
Pour les valeurs monétaires, utilisez un espace étroit comme séparateur de bits fin (ou format local).
Dans les tables, aligner le point décimal ; pour les colonnes mono, une police monosirine.
Les graphiques de signature d'axe ≥ 12 px (mobile) et ≥ 13-14 px (desktop), LH 1. 3; légendes ≥ 4. 5:1 au fond.

7) Formes, inputs, messages

Labels 12-14 px, LH 1. 3–1. 4, régulateur ou médium.
Placeholder ne doit pas être un « air serré » - objectif 3:1 au fond, visuellement différent du texte.
Erreurs/succès/texte help 12-14 px ; ne vous fiez pas seulement à la couleur (icône/texte).

8) Thèmes sombres/lumineux

Dans un sujet sombre, évitez # FFF sur # 000 : soulevez l'arrière-plan jusqu'à la L≈0. 14–0. 18, et réduire le texte à L≈0. 9 - moins d'éblouissement.
L'interligne dans le dark peut être de + 0. 05 plus haut pour le confort.
Références/accents dark - réduisez la saturation et augmentez la luminosité de 0. 02–0. 04.

9) Localisation et multilinguisme

Choisissez des familles avec une prise en charge complète des caractères cyrilliques/latins/grecs, accents et monnaies.
RTL : miroirs icônes/alignement, mais pas chiffres et latin ; testez les transferts.
Les autoroutes ('hyphens : auto') ne sont incluses que dans les zones de contenu longues ; dans les boutons UI - interdire le transfert.
Pour le turc/azerbaïdjanais, vérifiez les formulaires « İ/ı ».
Pour le géorgien et le thaïlandais, augmentez le cégle de base de 1 px (caractéristiques de l'écriture).

10) Disponibilité (A11y)

Contraste du texte : voir § 2.
Styles de focus - visible sans couleur : underline, cadre, ombre, décalage.
La taille de la police est mise à l'échelle système (prise en charge OS text size).
Ne pas coder le sens uniquement à travers la couleur/poids - ajouter des signatures et des icônes explicites.

11) Chargement des polices et performance

Objectifs : minimiser les blocages, fournir un FOUT prévisible et un CLS stable.

Sous-ensembles (subset) : latin, cyrillique, chiffres/caractères - fichiers individuels.
Formats : 'woff2' (principal), 'woff' comme fallback.
'Font-display : swap '(ou' optional 'pour les familles mineures).

html
<link rel="preload" as="font" type="font/woff2" crossorigin href="/fonts/Inter-UI-subset. woff2">

Police variable au lieu de 3-4 statiques - souvent plus rentable en poids.
Budget : ≤ 150-200 Ko total sur la voie critique (après gzip/brotli).
Rendu : éviter les ombres/masques multiples sur le texte ; utiliser les effets du système de manière économique.

12) Tokens d'imprimerie (système de conception)

type. scale.{role}     # h1, h2, body, caption, mono type. weight.{role}    # regular, medium, semibold type. leading.{role}    # line-height type. tracking.{role}   # letter-spacing type. feature. numeric   # tabular, lining

json
{
"type": {
"family": { "ui": "InterVariable", "mono": "JetBrainsMonoVariable" },
"scale": { "h1": 32, "h2": 24, "h3": 20, "body": 16, "caption": 12 },
"leading": { "h1": 40, "h2": 32, "h3": 28, "body": 26, "caption": 18 },
"weight": { "body": 450, "label": 520, "cta": 620 },
"numeric": { "figures": "tabular", "zeros": "slashed" }
}
}

css
:root {
--font-ui: "InterVariable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--font-mono: "JetBrainsMonoVariable", ui-monospace, SFMono-Regular, Menlo, monospace;

--fs-h1: 32px; --lh-h1: 40px; --w-h1: 600;
--fs-h2: 24px; --lh-h2: 32px; --w-h2: 600;
--fs-h3: 20px; --lh-h3: 28px; --w-h3: 550;
--fs-body: 16px; --lh-body: 26px; --w-body: 450;
--fs-caption: 12px; --lh-caption: 18px; --w-caption: 450;

--tracking-caps: 0. 04em;
--tracking-default: 0em;
}
.u-num {
font-variant-numeric: tabular-nums lining-nums slashed-zero;
}

13) Verstka et rythme

Module vertical 8-pt ; distances entre les paragraphes = 1 × de l'étape de base.
Listes : le retrait de la poignée est aligné sur la ligne de base du texte.
Boutons et champs : Les hauteurs sont multiples de la ligne de la grille de base (par exemple, 40/48/56 px).

14) Spécificité de l'iGaming (atelier)

Coefficients/cotes, bilans, minuteries - utilisez des nombres tabulaires, monoshirina dans les colonnes critiques.
Leaders/notations : alignement par catégorie, format de monnaie unique, « ↑/↓ » explicite.
Notifications responsables (18 +, limites, risques) - minimum AAA par contraste, ne pas utiliser ALL CAPS.
Bannières promotionnelles : texte uniquement sur les placards/overleys avec contrôle du contraste.

15) Anti-modèles

Light/Thin sur les petites cagoules.
Texte gris sur fond coloré sans contrôle de contraste.
Deux casques ou plus « pour la beauté ».
Chaînes longues (> 90 caractères) et line-height dense <1. 35.
Nombre de largeurs proportionnelles dans les tableaux/montants « sautants ».
Transferts forcés dans les boutons/étiquettes.

16) Check-list je revois

Lisibilité

• Body 16-18 px ; LH ≥ 1. 45.
• Longueur de la ligne 45-80 caractères.

Hiérarchie

• Échelle par paliers ≥ 12 %; les retraits sont alignés sur la grille.

Nombres/tables

• Tabular-nums pour les montants/coefficients ; alignement décimal.

Disponibilité

• Le contraste pour le WCAG est atteint ; les styles de focus sont visibles sans couleur.

Performance

• Subset/woff2; `font-display: swap`; Budget ≤ 200 Ko.

Localisation

• Support cyrillique/latin/RTL ; les transferts/diacritiques ont été testés.

17) A/B et métriques

Testez : Cègle Body ± 1 px, échelle de titre, poids CTA, interligne.
Mesurer : temps de lecture, scroll depth, CTR CTA, erreurs de forme, CLS (stabilité du texte).

Résumé succinct

L'imprimerie est le squelette de l'interface. Définissez une échelle prévisible, gardez le contraste et le rythme, utilisez des polices variables et des nombres tabulaires, optimisez le téléchargement. L'IU sera alors lu rapidement, fonctionnant de manière stable et s'adaptant aux thèmes et aux langues.