Famille de police

Vectis UI n'embarque aucune police web externe. Sa configuration typographique repose exclusivement sur trois tokens de famille, chacun associé par défaut à une pile de polices système de la plateforme (system font stack). L'interface bénéficie ainsi d'un rendu natif, rapide et cohérent sur tous les environnements, sans nécessiter la moindre configuration typographique préalable.

Les 3 polices d'écriture par défaut

--vectis-font-family-sans : Pile de polices système (system font stack) pour l'interface utilisateur (system-ui, -apple-system, Segoe UI, Roboto, etc.). Constitue la famille typographique par défaut de tous les composants.
--vectis-font-family-display : Famille réservée aux titres. Sa valeur pointe par défaut sur var(--vectis-font-family-sans). Cette indirection évite la duplication de variables : une seule surcharge suffit à dissocier les titres du reste de l'interface.
--vectis-font-family-mono : Pile monospace native (ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, etc.). Garantit la prise en charge du code et des données tabulaires en exploitant les ressources locales de la plateforme.

Une seconde couche d'abstraction introduit trois tokens sémantiques (ou rôles) directement consommés par l'interface : --vectis-text-family, --vectis-text-family-heading et --vectis-text-family-code. En liant le CSS des composants à ces rôles plutôt qu'aux primitives typographiques, Vectis UI permet de confiner les surcharges à un sous-arbre DOM spécifique sans affecter la configuration globale du document.

Intégration d'une police web

L'intégration d'une police personnalisée s'effectue en deux étapes, toutes deux indépendantes du design system : charger la ressource typographique, puis associer son nom au token de famille correspondant. Les tokens étant de simples variables CSS (custom properties), une déclaration au niveau du sélecteur :root répercute la modification sur l'intégralité de l'interface, tandis qu'une déclaration ciblée sur un conteneur spécifique restreint la nouvelle police à son sous-arbre DOM.

css

/* Your own stylesheet, in no layer. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --vectis-font-family-sans: 'Inter', system-ui, sans-serif;
  --vectis-font-family-display: 'Inter', system-ui, sans-serif;
}

L'hébergement local des fichiers de police (déclarés via @font-face et servis depuis votre propre origine) constitue l'approche recommandée pour les builds hors ligne, les applications garantissant l'absence de requêtes vers des tiers, ou la maîtrise directe de la mise en cache HTTP. Seul le mode de chargement des ressources diffère : le raccordement aux design tokens de Vectis UI demeure strictement identique.

css

/* Your own stylesheet, in no layer. The files are served from your origin. */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-variable.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --vectis-font-family-sans: 'Inter', system-ui, sans-serif;
  --vectis-font-family-display: 'Inter', system-ui, sans-serif;
}

Correspondance des rôles typographiques

Attribuer une police de titrage (display font) s'effectue en une seule re-déclaration CSS. Cette modification demeure toutefois ciblée : seuls cinq rôles typographiques consomment la famille de titrage, le reste de l'interface conservant la police de texte principale. La nomenclature ci-dessous détaille les éléments concernés afin de vous guider dans le choix d'une typographie adaptée.
Ce comportement ne nécessite aucun câblage : le composant VTypography détermine son rôle via la propriété variant, tandis que les composants composites (titres de boîtes de dialogue ou en-têtes d'accordéons) appliquent automatiquement le rôle sémantique qui leur incombe.

Famille de titrage (--vectis-text-family-heading) : Consommée exclusivement par les 5 variantes d'en-tête : display (48px), heading-1 (36px), heading-2 (24px), heading-3 (18px) et heading-4 (16px).
Famille de texte courant (--vectis-text-family) : Appliquée par défaut à l'ensemble des autres variantes (subtitle, les 4 niveaux de corps de texte, label, caption, overline) ainsi qu'à la typographie interne de tous les composants de contrôle (v-control).
Famille de code (--vectis-text-family-code) : Restreinte strictement au rôle code.

Gestion de la police d'icônes (dépendance facultative)

Le token --vectis-font-family-icon référence par défaut la police Material Symbols Rounded. Fidèle au principe de zéro dépendance réseau, la bibliothèque n'effectue aucun chargement automatique de ce fichier. Cette ressource est uniquement nécessaire pour le rendu d'icônes par ligatures hors du registre natif. Pour affranchir l'application de cette dépendance, reportez-vous à la section Iconographie pour implémenter un résolveur personnalisé.