Fondations

Typographie

الطباعة

DSM assemble quatre familles pour couvrir les trois langues officielles et le code : IBM Plex Sans pour le français et l'anglais, IBM Plex Sans Arabic pour l'arabe, Noto Sans Tifinagh pour l'amazighe, et IBM Plex Mono pour tout contenu technique. La police change automatiquement avec l'attribut lang, sans classe à ajouter côté produit.

Les quatre écritures

Chaque spécimen est rendu dans sa police réelle, chargée via next/font/google dans src/app/fonts.ts.

Français — texte courantIBM Plex Sans
Le service public s'engage : chaque citoyen mérite une réponse claire, juste et vérifiable.
Arabe — texte courantIBM Plex Sans Arabic
المملكة المغربية — بوابة الخدمات العمومية
Amazighe — tifinagheNoto Sans Tifinagh
ⵜⴰⴳⵍⴷⵉⵜ ⵏ ⵍⵎⵖⵔⵉⴱ
Code, identifiants, donnéesIBM Plex Mono
GET /api/v1/demarches/acte-de-naissance?dossier=2026-004821

Échelle typographique

Treize paliers, de la légende micro au grand héros. Taille et interligne sont définis ensemble dans globals.css, jamais composés séparément.

Utilitaire	Taille	Interligne	Spécimen
text-2xs	0.6875rem	1rem	Étiquette micro
text-xs	0.75rem	1.1rem	Métadonnée, légende
text-sm	0.875rem	1.35rem	Texte secondaire
text-base	1rem	1.6rem	Texte courant
text-lg	1.125rem	1.75rem	Texte introductif
text-xl	1.25rem	1.9rem	Sous-titre
text-2xl	1.5rem	2rem	Titre de section
text-3xl	1.875rem	2.3rem	Titre de page
text-4xl	2.25rem	2.6rem	Titre principal
text-5xl	3rem	1.08	Grand titre
text-6xl	3.75rem	1.04	Très grand titre
text-display	clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem)	1.06	Titre héros
text-display-lg	clamp(2.75rem, 1.8rem + 3.6vw, 5rem)	1.02	Héros

Conventions de titrage

Les titres partagent trois réglages : graisse semi-grasse, tracking resserré et césure équilibrée (text-balance).

Demande d'acte de naissance

h1 — text-4xl font-semibold tracking-tight text-balance

Pièces justificatives requises

h2 — text-2xl sm:text-3xl font-semibold tracking-tight

Délai de traitement

h3 — text-lg sm:text-xl font-semibold tracking-tight

Règles pour l'arabe

Le texte arabe respire davantage : l'interligne passe à 1,75 pour compenser les hampes, les points diacritiques et la ligature naturelle du script.

Français — leading-relaxed

Toute personne a droit à ce que sa cause soit entendue équitablement, dans un délai raisonnable, par un tribunal indépendant.

العربية — line-height: 1.75

لكل شخص الحق في أن تنظر قضيته بإنصاف وفي أجل معقول من قبل محكمة مستقلة ونزيهة.

:lang(ar) {
  font-family: var(--font-arabic);
  line-height: 1.75;
  letter-spacing: 0;
}

Familles de police & bascule automatique

Quatre variables CSS pointent chacune vers une pile de secours complète. Le composant qui reçoit lang="ar" ou lang="zgh" change de police sans code additionnel.

Variable	Déclenchée par	Pile de secours
--font-sans	Défaut (lang="fr", "en")	IBM Plex Sans → IBM Plex Sans Arabic → Noto Sans Tifinagh → système
--font-arabic	lang="ar"	IBM Plex Sans Arabic → IBM Plex Sans → Noto Sans Tifinagh → système
--font-tifinagh	lang="zgh"	Noto Sans Tifinagh → IBM Plex Sans → système
--font-mono	Code, identifiants	IBM Plex Mono → monospace système

Une seule police par nœud, jamais un mélange

Ne fixez pas font-sans sur un conteneur qui accueille du contenu multilingue : laissez chaque texte porter son propre lang et hériter de la bonne police.

Chiffres tabulaires

Les tableaux de données, montants et identifiants de dossier utilisent des chiffres à chasse fixe pour s'aligner verticalement.

Par défaut

1 248,00 MAD

112,50 MAD

89 320,10 MAD

tabular-nums

1 248,00 MAD

112,50 MAD

89 320,10 MAD

Utilisation

<h1 className="text-4xl font-semibold tracking-tight text-balance">
  Demande d'acte de naissance
</h1>

<p lang="ar" dir="rtl" className="font-arabic text-base">
  المملكة المغربية — بوابة الخدمات العمومية
</p>

<span className="font-mono tabular-nums">89 320,10 MAD</span>