Article de Test Complet — Design, Mise en Page & Typographie

Cet article sert de référence visuelle exhaustive pour tester tous les éléments de mise en page d’un blog WordPress : typographie, médias, blocs, citations, tableaux, listes, et bien plus. Parcourez chaque section pour valider le rendu de votre thème.

---

1. Typographie & Hiérarchie des titres

La typographie est le fondement de toute mise en page réussie. Ce paragraphe est un exemple de texte courant. Il comporte plusieurs phrases pour tester l’interligne, la largeur de colonne, et la lisibilité générale sur desktop comme sur mobile.

Ceci est un titre H2

Ceci est un titre H3

Paragraphe associé à un H3. Texte en gras, texte en italique, gras et italique combinés, texte barré, texte surligné, et code inline. Voici également un lien hypertexte standard pour vérifier la couleur et le soulignement.

Ceci est un titre H4

Les titres H4, H5 et H6 sont moins courants dans les articles de blog mais leur rendu doit rester cohérent avec la hiérarchie globale.

Ceci est un titre H5

Ceci est un titre H6 — niveau le plus bas

---

2. Listes — ordonnées, non ordonnées, imbriquées

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 sur les petits écrans
• Troisième élément avec sous-liste imbriquée
  • Sous-élément imbriqué niveau 2
  • Autre sous-élément imbriqué
    • Niveau 3 d’imbrication
    • Second élément niveau 3
• Quatrième élément de la liste principale
• Cinquième et dernier élément

Liste ordonnée

1. Première étape du processus
2. Deuxième étape — plus longue pour tester le reflow du texte sur plusieurs lignes lorsque le viewport est réduit à la taille d’un smartphone
3. Troisième étape avec sous-liste :
   1. Sous-étape A
   2. Sous-étape B
   3. Sous-étape C
4. Quatrième et dernière étape

---

3. Citations — Blockquote & Pullquote

Le design n’est pas l’apparence des choses. Le design, c’est la façon dont les choses fonctionnent.

Steve Jobs, co-fondateur d’Apple

Un paragraphe intercalaire entre deux citations pour tester le rythme vertical et l’espacement.

La simplicité est la sophistication suprême. Moins on en fait, mieux les choses se passent.

Leonardo da Vinci

Un bon système de design est celui que l’on ne remarque pas — on voit le contenu, pas le contenant.

Principe de design éditorial

---

4. Blocs de code

Voici un exemple de code inline dans un paragraphe. Et ci-dessous, des blocs de code multilignes dans différents langages :

// Exemple JavaScript — fonction de formatage de date
function formatDate(date, locale = 'fr-FR') {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(new Date(date));
}

const today = formatDate(Date.now());
console.log('Aujourd\'hui :', today);
// → Aujourd'hui : 18 mai 2026

/* CSS — variables et media queries */
:root {
  --color-accent: #e63946;
  --font-body: 'Georgia', serif;
  --spacing-base: 1.5rem;
}

.article-body p {
  font-family: var(--font-body);
  line-height: 1.8;
  margin-bottom: var(--spacing-base);
  color: #2c2c2c;
}

@media (max-width: 768px) {
  .article-body p {
    font-size: 0.95rem;
  }
}

# Python — exemple de classe simple
class Article:
    def __init__(self, title: str, author: str):
        self.title = title
        self.author = author
        self.published = False

    def publish(self) -> str:
        self.published = True
        return f"'{self.title}' publié par {self.author}"

article = Article("Test complet", "Admin")
print(article.publish())
# → 'Test complet' publié par Admin

---

5. Tableaux

Les tableaux permettent de comparer des données structurées. Testez leur rendu sur mobile (scroll horizontal) et sur desktop (alignement des colonnes).

Fonctionnalité	Plan Gratuit	Plan Pro	Plan Entreprise
Articles publiés	5 / mois	Illimité	Illimité
Stockage médias	1 Go	10 Go	100 Go
Thèmes premium	✗	✓	✓
Support prioritaire	✗	Email	Téléphone & Email
Statistiques avancées	Basiques	Détaillées	API + Exports
Nom de domaine	Sous-domaine	Domaine inclus	Multi-domaines
Plugins tiers	✗	Limités	Tous

Tableau simple sans en-tête

Lundi	Réunion d’équipe	9h00
Mercredi	Revue de design	14h00
Vendredi	Démo client	11h00

---

6. Colonnes & mise en page multi-colonnes

---

7. Images & alignements

Les blocs image ci-dessous utilisent des images de placeholder (picsum.photos). Remplacez-les par vos propres visuels pour tester alignements et légendes.

Ce paragraphe s’enroule autour de l’image alignée à gauche (float left). L’habillage de texte doit fonctionner sur desktop et être désactivé sur mobile pour éviter un texte trop étroit. Ajoutez suffisamment de texte ici pour voir l’effet sur plusieurs lignes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam.

Ce paragraphe s’enroule autour de l’image alignée à droite (float right). Vérifiez la symétrie des marges et la cohérence de l’espacement par rapport à l’exemple précédent. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam.

---

8. Galerie d’images

---

9. Blocs spéciaux & callouts

---

10. Vidéo embarquée (oEmbed)

WordPress supporte nativement l’intégration de vidéos YouTube, Vimeo, et autres plateformes. Collez une URL dans l’éditeur pour l’embarquer.

---

11. Boutons & CTA

---

12. Caractères spéciaux & internationalisation

Symboles monétaires : €, $, £, ¥, ₹, ₿. Fractions : ½, ¼, ¾. Marques : ™, ®, ©. Mathématiques : ∑, ∏, √, ∞, ≠, ≤, ≥, ±, π. Flèches : →, ←, ↑, ↓, ↔, ⇒. Guillemets typographiques : « français », « anglais », „allemand ».

Caractères accentués : À, Â, Ä, Ç, È, É, Ê, Ë, Î, Ï, Ô, Ù, Û, Ü, Ÿ, Œ, Æ. Ligature : fi, fl. Cyrillique : Привет мир. Grec : αβγδεζηθ. Arabe (RTL) : مرحبا بالعالم. Hébreu (RTL) : שלום עולם. Chinois : 你好世界. Japonais : こんにちは.

---

13. Texte de longueur variable — lisibilité

Court.

Paragraphe de longueur moyenne. Il contient plusieurs phrases pour tester l’interligne et la largeur de la colonne de texte. La ligne optimale pour la lisibilité est généralement de 60 à 75 caractères par ligne, soit une mesure de 45 à 75 em environ.

Long paragraphe de test destiné à vérifier que votre thème gère correctement les blocs de texte dense. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.

---

14. Conclusion & récapitulatif des tests

Cet article couvre l’ensemble des blocs Gutenberg les plus courants. Utilisez-le comme référence pour valider votre thème :

1. Typographie — H1 à H6, styles inline, paragraphes
2. Listes — ordonnées, non ordonnées, imbriquées jusqu’au niveau 3
3. Citations — blockquote, pullquote, large style
4. Code — inline et blocs multilignes (JS, CSS, Python)
5. Tableaux — avec en-tête, sans en-tête, responsive
6. Colonnes — 2 colonnes, 3 colonnes, empilage mobile
7. Images — centré, gauche, droite, large, pleine largeur
8. Galerie — grille 3 colonnes, légendes, recadrage
9. Callouts — info, warning, success, danger
10. Vidéo — oEmbed YouTube 16:9
11. Boutons — primaire, contour, couleur, pleine largeur
12. Caractères spéciaux — symboles, unicode, RTL
13. Texte long/court — test de lisibilité et d’interligne

Un bon article de test est celui que vous pouvez parcourir visuellement en 30 secondes et immédiatement repérer ce qui cloche.

Principe de design orienté développement