Page de test typographique
Ceci est un paragraphe d'introduction. Il illustre la police du corps du texte, sa taille, son interlignage et son espacement. Un bon texte de corps doit être lisible sur de longues distances, invitant à la lecture sans fatiguer l'œil. Voici aussi un lien hypertexte, du texte en gras, en italique, et gras italique.
Second paragraphe pour vérifier l'espace entre les blocs. La respiration entre les paragraphes joue un rôle clé dans la lisibilité. Le texte doit donner l'impression de fluidité et de cohérence sur l'ensemble de la page.
Titre de niveau 2
Texte qui suit immédiatement un H2. On vérifie ici la hiérarchie visuelle entre le titre de section et le contenu. L'espacement au-dessus du titre doit créer une séparation claire avec la section précédente.
Titre de niveau 3
Texte après un H3. Ce niveau de titre est utilisé pour les sous-sections. Il doit être clairement subordonné au H2 tout en restant bien visible.
Titre de niveau 4
Texte après un H4. Ce niveau est rarement utilisé mais doit s'intégrer harmonieusement dans la hiérarchie sans créer de confusion avec le texte courant.
Listes
Liste non ordonnée :
- Premier élément de la liste
- Deuxième élément avec un peu plus de texte pour tester le retour à la ligne
- Troisième élément
- Sous-élément imbriqué
- Autre sous-élément
- Quatrième élément
Liste ordonnée :
- Première étape du processus
- Deuxième étape avec une description un peu plus longue
- Troisième étape
- Quatrième et dernière étape
Citation
La typographie est l'art de disposer des caractères pour rendre le langage visible. Elle doit avant tout servir le lecteur, non le designer.
Texte qui reprend après la citation. On vérifie que le retour au texte courant se fait naturellement et que l'espacement autour de la citation est équilibré.
Code
Du code en ligne : const greeting = "Bonjour"; s'intègre dans le texte courant.
On peut aussi mentionner une fonction comme Array.map() ou une commande
comme npm run dev.
// Bloc de code complet
function formatDate(date: Date): string {
return date.toLocaleDateString('fr-FR', {
year: 'numeric',
month: 'long',
day: 'numeric',
});
}
const today = formatDate(new Date());
console.log(today); // "26 mars 2026" Tableau
| Police | Catégorie | Usage |
|---|---|---|
| Inter | Sans-serif | Corps du texte, interface |
| Literata | Serif | Articles longs |
| JetBrains Mono | Monospace | Blocs de code |
Séparateur horizontal
Texte avant le séparateur.
Texte après le séparateur. Le hr doit créer une pause visuelle nette
sans alourdir la page.
Image
Légende fictive : Un espace de travail inspirant pour écrire.