Familles de Polices

Police Principale

System UI Font Stack
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto'

var(--font-family-base)

Police Titres

Inter / System UI
'Inter', -apple-system, BlinkMacSystemFont

var(--font-family-heading)

Police Monospace

Code Font
'SF Mono', Monaco, 'Cascadia Code'

var(--font-family-mono)

Titres (Headings)

Heading 1 - Titre Principal

h1 | text-4xl | 36px | font-weight: 600

Heading 2 - Titre Section

h2 | text-3xl | 30px | font-weight: 600

Heading 3 - Titre Sous-section

h3 | text-2xl | 24px | font-weight: 600

Heading 4 - Titre Card

h4 | text-xl | 20px | font-weight: 600

Heading 5 - Petit Titre

h5 | text-lg | 18px | font-weight: 600

Heading 6 - Très Petit Titre

h6 | text-base | 16px | font-weight: 600

<h1>Titre Principal</h1>
<h2>Titre Section</h2>
<h3>Titre Sous-section</h3>

Tailles de Police

Extra Small Text (12px) - Utilisé pour les labels, annotations

.text-xs | var(--font-size-xs) | 0.75rem

Small Text (14px) - Utilisé pour le texte secondaire, hints

.text-sm | var(--font-size-sm) | 0.875rem

Base Text (16px) - Taille par défaut pour le corps de texte

.text-base | var(--font-size-base) | 1rem

Large Text (18px) - Utilisé pour le texte d'introduction

.text-lg | var(--font-size-lg) | 1.125rem

Extra Large (20px) - Utilisé pour les sous-titres importants

.text-xl | var(--font-size-xl) | 1.25rem

2XL (24px) - Titres de sections

.text-2xl | var(--font-size-2xl) | 1.5rem

3XL (30px) - Grands titres

.text-3xl | var(--font-size-3xl) | 1.875rem

4XL (36px) - Titres de page

.text-4xl | var(--font-size-4xl) | 2.25rem

<p class="text-xs">Extra Small</p>
<p class="text-sm">Small</p>
<p class="text-base">Base (défaut)</p>
<p class="text-lg">Large</p>

Poids de Police

Font Light (300) - Texte très léger

.font-light | var(--font-weight-light) | 300

Font Normal (400) - Texte par défaut

.font-normal | var(--font-weight-normal) | 400

Font Medium (500) - Légèrement plus gras

.font-medium | var(--font-weight-medium) | 500

Font Semibold (600) - Titres standards

.font-semibold | var(--font-weight-semibold) | 600

Font Bold (700) - Texte très important

.font-bold | var(--font-weight-bold) | 700

<p class="font-normal">Texte normal</p>
<p class="font-medium">Texte medium</p>
<p class="font-semibold">Texte semi-gras</p>
<p class="font-bold">Texte gras</p>

Alignement du Texte

Texte aligné à gauche (défaut)

Texte centré

Texte aligné à droite

Texte justifié. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

<p class="text-left">Gauche</p>
<p class="text-center">Centre</p>
<p class="text-right">Droite</p>
<p class="text-justify">Justifié</p>

Transformation du Texte

Texte en majuscules

.text-uppercase

TEXTE EN MINUSCULES

.text-lowercase

première lettre de chaque mot en majuscule

.text-capitalize

<p class="text-uppercase">Majuscules</p>
<p class="text-lowercase">Minuscules</p>
<p class="text-capitalize">Capitalize</p>

Couleurs de Texte

Aa

.text-primary

Aa

.text-secondary

Aa

.text-success

Aa

.text-warning

Aa

.text-danger

Aa

.text-info

Aa

.text-muted

Aa

.text-dark

<p class="text-primary">Texte orange</p>
<p class="text-success">Texte vert</p>
<p class="text-danger">Texte rouge</p>

Utilitaires de Texte

Truncate

Ce texte très long sera tronqué avec des points de suspension quand il dépasse la largeur disponible

.text-truncate

No Wrap

Ce texte ne passera jamais à la ligne suivante

.text-nowrap

Liens

Ceci est un lien standard dans un paragraphe.

Voici un lien bleu (secondaire) dans un paragraphe.

Et un lien vert (success) pour indiquer une action positive.

<a href="#">Lien standard (orange)</a>
<a href="#" class="text-secondary">Lien bleu</a>
<a href="#" class="text-success">Lien vert</a>

Listes

Liste à puces

Premier élément
Deuxième élément
Troisième élément
- Sous-élément 1
- Sous-élément 2
Quatrième élément

Liste numérotée

Premier élément
Deuxième élément
Troisième élément
1. Sous-élément 1
2. Sous-élément 2
Quatrième élément

Bonnes Pratiques

Conseils typographiques

Utilisez 16px minimum pour le corps de texte (accessibilité)
Maintenez un ratio de contraste de 4.5:1 minimum (WCAG AA)
Limitez la largeur des lignes à 60-80 caractères pour une meilleure lisibilité
Utilisez line-height: 1.5 pour le texte courant
Hiérarchisez avec les tailles et poids, pas seulement les couleurs
Évitez le texte tout en majuscules pour les longs paragraphes

Typographie