(mis à jour le )

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 :

  1. Première étape du processus
  2. Deuxième étape avec une description un peu plus longue
  3. Troisième étape
  4. 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

Un bureau avec un ordinateur portable, un cahier et une tasse de café

Légende fictive : Un espace de travail inspirant pour écrire.

David Scanu
David Scanu

Data Scientist & AI Engineer basé à Caen, France.