Typographie

Le système typographique TDS est conçu pour la lisibilité dans les interfaces gouvernementales : hiérarchie claire, tailles suffisantes pour l’accessibilité, polices adaptées au français et à l’arabe.

Polices institutionnelles

Rôle	Police	Variable CSS	Usage
Principale	Source Sans 3	`--tds-font-family-primary`	Tous les textes en français
Arabe	Noto Naskh Arabic	`--tds-font-family-arabic`	Textes en arabe (RTL)
Monospace	JetBrains Mono	`--tds-font-family-mono`	Code, références techniques
Secours	Public Sans	(dans le stack primary)	Fallback institutionnel

body {
  font-family: var(--tds-font-family-primary);
}

/* Passage automatique en arabe */
html[lang="ar"], :lang(ar) {
  direction: rtl;
  font-family: var(--tds-font-family-arabic);
}

code, kbd, samp, pre {
  font-family: var(--tds-font-family-mono);
}

Échelle de tailles

L’échelle TDS est basée sur une racine de 16px. Elle utilise rem pour respecter les préférences de zoom des utilisateurs.

Token	Variable CSS	Valeur	Équivalent px	Usage
`xs`	`--tds-font-size-xs`	`0.75rem`	12px	Captions, légendes
`sm`	`--tds-font-size-sm`	`0.875rem`	14px	Labels, helper text
`md`	`--tds-font-size-md`	`1rem`	16px	Corps, formulaires (défaut)
`lg`	`--tds-font-size-lg`	`1.125rem`	18px	Corps large, descriptions
`xl`	`--tds-font-size-xl`	`1.25rem`	20px	Sous-titres, intro
`2xl`	`--tds-font-size-2xl`	`1.5rem`	24px	H3, titres de carte
`3xl`	`--tds-font-size-3xl`	`1.875rem`	30px	H2, sous-pages
`4xl`	`--tds-font-size-4xl`	`2.25rem`	36px	Titre de page principal
`5xl`	`--tds-font-size-5xl`	`3rem`	48px	Display, héros

Hauteurs de ligne

Chaque taille a une hauteur de ligne associée, optimisée pour sa taille.

Token	Variable CSS	Valeur	Principe
`xs`	`--tds-line-height-xs`	1.2	Serré pour les micro-labels
`sm`	`--tds-line-height-sm`	1.3	Labels compacts
`md`	`--tds-line-height-md`	1.5	Corps — confort de lecture optimal
`lg`	`--tds-line-height-lg`	1.5	Corps large — même confort
`xl`	`--tds-line-height-xl`	1.35	Sous-titres
`2xl`	`--tds-line-height-2xl`	1.3	H3
`3xl`	`--tds-line-height-3xl`	1.2	H2
`4xl`	`--tds-line-height-4xl`	1.15	Titres de page
`5xl`	`--tds-line-height-5xl`	1.1	Display — très serré acceptable

Poids typographiques

Token	Variable CSS	Valeur	Usage recommandé
`light`	`--tds-font-weight-light`	300	Display large uniquement
`regular`	`--tds-font-weight-regular`	400	Texte de paragraphe par défaut
`medium`	`--tds-font-weight-medium`	500	Liens, éléments UI modérés
`semibold`	`--tds-font-weight-semibold`	600	Titres, boutons, labels
`bold`	`--tds-font-weight-bold`	700	Emphase, alertes, titres courts
`xbold`	`--tds-font-weight-xbold`	800	Cas rares / identitaires

Styles textuels officiels

Ces styles combinent taille, hauteur de ligne, poids et espacement de lettres. Ils sont les seules combinaisons validées pour les interfaces TDS.

Display

font-size: var(--tds-font-size-5xl);       /* 48px */
line-height: var(--tds-line-height-5xl);   /* 1.1 */
font-weight: var(--tds-font-weight-semibold); /* 600 */
letter-spacing: -0.02em;
/* Usage : héros, bannières d'accueil — utiliser avec parcimonie */

Page Title (H1)

font-size: var(--tds-font-size-4xl);       /* 36px */
line-height: var(--tds-line-height-4xl);   /* 1.15 */
font-weight: var(--tds-font-weight-semibold); /* 600 */
letter-spacing: -0.02em;
/* Usage : titre principal de chaque page, unique par page */

Section Title (H2)

font-size: var(--tds-font-size-2xl);       /* 24px */
line-height: var(--tds-line-height-2xl);   /* 1.3 */
font-weight: var(--tds-font-weight-semibold); /* 600 */
letter-spacing: -0.01em;

Subsection Title (H3)

font-size: var(--tds-font-size-xl);        /* 20px */
line-height: var(--tds-line-height-xl);    /* 1.35 */
font-weight: var(--tds-font-weight-medium); /* 500 */
letter-spacing: 0;

Body (défaut)

font-size: var(--tds-font-size-md);        /* 16px */
line-height: var(--tds-line-height-md);    /* 1.5 */
font-weight: var(--tds-font-weight-regular); /* 400 */
/* Usage : texte de paragraphe, formulaires, contenu principal */

Label (champs de formulaire)

font-size: var(--tds-font-size-sm);        /* 14px */
line-height: var(--tds-line-height-sm);    /* 1.3 */
font-weight: var(--tds-font-weight-semibold); /* 600 */
/* Usage : labels de formulaire, titres de champ */

Button

font-size: var(--tds-font-size-md);        /* 16px */
line-height: var(--tds-line-height-md);    /* 1.5 */
font-weight: var(--tds-font-weight-semibold); /* 600 */
letter-spacing: 0.01em;
/* Usage : texte des boutons et CTA */

Typographie responsive

TDS recommande d’adapter les titres avec clamp() pour une hiérarchie fluide.

/* H1 adaptatif */
h1 {
  font-size: clamp(
    var(--tds-font-size-3xl),  /* min : 30px */
    5vw,
    var(--tds-font-size-4xl)   /* max : 36px */
  );
}

/* Display pour les héros */
.hero-title {
  font-size: clamp(
    var(--tds-font-size-4xl),  /* min : 36px */
    6vw,
    var(--tds-font-size-5xl)   /* max : 48px */
  );
}

Variables CSS — Référence

/* Familles */
--tds-font-family-primary: "Source Sans 3", "Public Sans", system-ui, ...;
--tds-font-family-arabic: "Noto Naskh Arabic", "Noto Sans Arabic", ...;
--tds-font-family-mono: "JetBrains Mono", ui-monospace, ...;

/* Tailles */
--tds-font-size-xs:  0.75rem;
--tds-font-size-sm:  0.875rem;
--tds-font-size-md:  1rem;
--tds-font-size-lg:  1.125rem;
--tds-font-size-xl:  1.25rem;
--tds-font-size-2xl: 1.5rem;
--tds-font-size-3xl: 1.875rem;
--tds-font-size-4xl: 2.25rem;
--tds-font-size-5xl: 3rem;

/* Hauteurs de ligne */
--tds-line-height-xs:  1.2;
--tds-line-height-sm:  1.3;
--tds-line-height-md:  1.5;
--tds-line-height-lg:  1.5;
--tds-line-height-xl:  1.35;
--tds-line-height-2xl: 1.3;
--tds-line-height-3xl: 1.2;
--tds-line-height-4xl: 1.15;
--tds-line-height-5xl: 1.1;

/* Poids */
--tds-font-weight-light:    300;
--tds-font-weight-regular:  400;
--tds-font-weight-medium:   500;
--tds-font-weight-semibold: 600;
--tds-font-weight-bold:     700;
--tds-font-weight-xbold:    800;