Typographie

Une hiérarchie claire, à chaque échelle.

En pratique

Famille : 'Nunito Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Display

La simplicité fait la différence.

Titres d’ouverture et messages essentiels.

Titre

La simplicité fait la différence.

Titres de page et grandes sections.

Sous-titre

La simplicité fait la différence.

Structuration des contenus.

Corps

La simplicité fait la différence.

Paragraphes et contenu courant.

Légende

La simplicité fait la différence.

Annotations et métadonnées.

Bonnes pratiques

La hiérarchie typographique aide à identifier ce qui est important et à parcourir le contenu. Associez chaque style à un rôle stable.

  • Utilisez les titres dans un ordre logique, indépendamment de leur taille visuelle.
  • Privilégiez l’alignement à gauche pour les textes longs.
  • Laissez le contenu s’adapter au zoom et aux préférences de taille de texte.
  • Évitez les variantes de graisse ou de taille sans intention précise.

À retenir

Le style visuel et le niveau sémantique d’un titre sont deux décisions distinctes. Un grand texte n’est pas nécessairement un titre de premier niveau.

IntroductionBien démarrer · Un langage commun pour mieux concevoir.Principes de designBien démarrer · Les convictions qui orientent nos choix.Voix et tonBien démarrer · Les mots aussi font partie de l’expérience.CouleursFondations · Une palette pensée pour donner du sens.TypographieFondations · Une hiérarchie claire, à chaque échelle.Espacement et mise en pageFondations · Du rythme et de l’espace pour le contenu.IconographieFondations · Des signes simples et reconnaissables.MouvementFondations · Des transitions qui aident à comprendre.AccessibilitéFondations · Des expériences ouvertes à tout le monde.BoutonsComposants · Des actions évidentes et bien hiérarchisées.Champs de saisieComposants · Accompagner chaque information saisie.NavigationComposants · Des repères pour trouver son chemin.