Typographie

theme.fonts associe un rôle à une configuration de police. Chaque clé de rôle génère une propriété CSS personnalisée --font-{role} et l'utilitaire font-{role} correspondant : les décisions typographiques vivent donc en configuration plutôt que dispersées dans des chaînes className.

theme:
  fonts:
    heading:
      family: Inter
      fallback: 'system-ui, sans-serif'
      weights: [600, 700]
      lineHeight: '1.2'
      letterSpacing: '-0.02em'
    body:
      family: Inter
      fallback: 'system-ui, sans-serif'
      weights: [400, 500]
      size: '16px'
      lineHeight: '1.6'
    mono:
      family: 'JetBrains Mono'
      fallback: 'ui-monospace, monospace'

Les clés de rôle sont alphabétiques et librement choisies. heading, body et mono sont les trois conventionnelles — les composants préconstruits de Sovrium les recherchent — mais un design ayant besoin de display ou caption n'a qu'à les déclarer.

Propriétés de police

Propriété	Description
`family`	Obligatoire. Nom de la famille de police, p. ex. `Inter`, `Roboto`.
`fallback`	Pile de repli utilisée en attendant le chargement de la famille, ou s'il échoue.
`weights`	Graisses numériques à charger, de 100 à 900. N'en déclarer que l'utile allège le téléchargement.
`style`	`normal` (défaut), `italic` ou `oblique`.
`size`	Taille de base en valeur CSS, p. ex. `16px`, `1rem`.
`lineHeight`	Multiplicateur ou valeur CSS, p. ex. `1.5`.
`letterSpacing`	Valeur CSS, p. ex. `0.05em`, `-0.01em`.
`transform`	`none`, `uppercase`, `lowercase` ou `capitalize`.
`url`	URL du fichier de police ou de Google Fonts, injectée comme `<link>` dans l'en-tête.

Charger une police web

Donnez une url au rôle et Sovrium injecte le lien de feuille de style pour vous. Rien d'autre n'est requis — ni entrée <head> manuelle, ni bloc @font-face.

theme:
  fonts:
    body:
      family: Inter
      fallback: 'system-ui, sans-serif'
      weights: [400, 600]
      url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'

Associez toujours url à fallback. Une police distante est une requête réseau que le premier rendu n'attend pas. Sans pile de repli, le texte est composé dans la police par défaut du navigateur puis se recompose à l'arrivée du fichier ; avec une pile, la bascule est un changement de caractère, pas un changement de mise en page.

Les polices auto-hébergées fonctionnent de la même façon — pointez url vers une feuille de style de votre répertoire public. La requête reste ainsi sur votre propre domaine, ce qui compte lorsqu'un CDN de polices tiers n'est pas acceptable au regard de votre posture de confidentialité.

Dimensionner la base

size sur le rôle body fixe la taille de police de base du document, et chaque utilitaire Tailwind d'espacement et de typographie exprimé en rem suit l'échelle. Passer de 16px à 17px agrandit proportionnellement toute l'interface — généralement un meilleur premier réflexe que de surcharger des utilitaires typographiques un à un.

Pages connexes

Aperçu du thème et couleurs — le bloc theme et les jetons de couleur.
Espacements, rayons et ombres — les autres catégories de jetons.
Baseline et mode sombre — comment une seconde palette s'applique.
Composants de contenu — le texte que ces rôles mettent en forme.
Écoconception — le coût en empreinte du chargement de polices distantes.

Dernière mise à jour 27 juillet 2026

← PrécédentThème et couleurs Suivant →Espacements et surfaces

Modifier cette page Signaler un problème

Cette documentation a été rédigée avec de l'IA : des erreurs ou du contenu obsolète sont donc possibles. Sovrium est en bêta — les contributions et corrections sont les bienvenues.