Typographie

Vue d’ensembleLien vers la section

La typographie est l'un des signaux les plus forts de la qualité du produit. Il donne à chaque interface une structure lisible avant que la couleur, l'espacement, le mouvement ou la décoration ne soient ajoutés.

PyColors traite la typographie comme un systèmePas comme style de page locale. L'objectif est de garder les tableaux de bord, la documentation, les pages de paramètres, les sections marketing, les formulaires et les flux de produits lisibles et cohérents à mesure que le produit se développe.

À la fin de cette page, vous comprendrez comment PyColors gère :

• rôles de police
• Hiérarchie des titres
• densité du corps du texte
• étiquettes et métadonnées
• Rôles sémantiques de texte
• règles d'utilisation de la production

Ce que vous allez définirLien vers la section

ÉtapesLien vers la section

import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  variable: "--font-sans", // highlight
});

Pourquoi c'est importantLien vers la section

La typographie est l’endroit où la qualité du produit devient visible. Les utilisateurs peuvent ne pas remarquer le système de type directement, mais ils remarquent lorsque le produit se sent plus difficile à numériser, moins structuré ou visuellement incohérent.

Sans un système de typographie stable, vous pourrez :

• inventer des tailles d'en-tête page par page
• surutiliser le poids de la police pour créer l'emphase
• rendre les tableaux de bord visuellement bruyants
• réduire la confiance dans les surfaces de produits et de documentation
• rendre les composants plus difficiles à réutiliser de manière cohérente

Avec un système stable, chaque page semble plus calme, plus intentionnelle et plus facile à comprendre.

Rôles de texteLien vers la section

Règles d'utilisationLien vers la section

Utilisez des rôles de typographie pour créer des surfaces de produit cohérentes au lieu de styliser le texte à partir de zéro à chaque fois.

export function ProductSummary() {
  return (
    <section className="space-y-2">
      <p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
        Starter Pro
      </p>
      <h2 className="text-2xl font-semibold tracking-tight">
        Production-shaped SaaS foundation
      </h2>
      <p className="max-w-prose text-sm leading-6 text-muted-foreground">
        Use semantic text roles to keep product copy, labels, and descriptions
        predictable across reusable surfaces.
      </p>
    </section>
  );
}

Guide de décisionLien vers la section

Utilisez ce système de typographie si :

• vous créez des tableaux de bord SaaS, des documents, des paramètres ou des pages marketing
• vous avez besoin d'une hiérarchie cohérente entre plusieurs domaines de produits
• vous voulez que les composants réutilisables soient cohérents sans surcharges locales
• vous vous souciez de la lisibilité en mode clair et sombre

Ne pas outrepasser si :

• le changement ne résout qu'une préférence visuelle locale
• le même besoin apparaît dans plusieurs endroits et devrait devenir un token
• la nouvelle taille, le poids ou la couleur affaiblit la cohérence hiérarchique

Erreurs courantesLien vers la section

Prochaines étapesLien vers la section