Style Éditorial

Style Éditorial

Le lecteur doit reconnaître un magazine en trois secondes. La typo fait le travail, les images l'accompagnent.

Quand l'utiliser

• Médias, blogs d'auteur, newsletters, revues culturelles, rapports annuels, études de cas longues.
• Évite-le pour les dashboards, les outils SaaS denses et les landing pages de conversion pure.

Palette

• --bg : papier crème #f4f0e6, ou version nuit #0a0a0a.
• --surface (encadrés) : #ebe5d6 sur crème, #151515 sur noir.
• --text : #1a1a1a sur crème, #f5f5f5 sur noir (contraste supérieur à 14:1).
• --muted (légendes, byline) : #5c574f sur crème (environ 6:1), #a3a3a3 sur noir.
• --accent : rouge brique #c1440e, seul accent, réservé aux drop caps, pull quotes, kickers et survols. Environ 4.5:1 sur crème, donc jamais pour du texte courant.
• États : lien souligné 1px, survol --accent, focus outline 2px --accent offset 3px, erreur #9b1c1c.

Typographie

• Display : Fraunces ou Playfair Display (Google Fonts), GT Sectra si licence. Fallback Georgia, serif.
• Body : Inter ou Manrope (Google Fonts), Söhne si licence. Fallback system-ui, sans-serif.
• Kicker : IBM Plex Mono 12 px uppercase, letter-spacing 0.15em.
• H1 : clamp(2.5rem, 6vw, 4.5rem), weight 600, line-height 1.05.
• Chapô : 22 px, display italique, line-height 1.4.
• H2 : 34 px / 1.15, H3 : 22 px / 1.25, weight 600.
• Body : 19 px, line-height 1.55, max-width: 66ch.
• Légende : 14 px / 1.4 en --muted. Pull quote : 32 à 40 px, display italique, line-height 1.2.
• Drop cap : 4 lignes, capitale de la police body en --accent, marge droite 0.6em (initial-letter: 4).

Layout & grille

• Grille 12 colonnes, max-width: 1280px, gouttières 24 à 32 px.
• Texte sur 6 à 8 colonnes, sidebar de légendes sur 3 à 4 colonnes.
• Rythme : 0.75em entre paragraphes sans indent, 4rem avant chaque h2, 8rem entre grandes parties.
• Images pleine largeur object-fit: cover, ratio 3:2 ou 16:9.
• Sous 768 px : une colonne, légendes sous l'image, body 18 px. À partir de 1200 px : sidebar active.

Composants signature

• En-tête d'article : kicker, H1, chapô, byline (auteur, date, temps de lecture en mono 13 px), filet 1px.
• Pull quote : 3 à 4 colonnes, filet 2px --accent au-dessus, guillemets « ».
• Navigation : logo serif, rubriques en sans 13 px uppercase, sticky 56 px, filet bas 1px.
• Carte d'article : image 3:2, kicker, titre serif 24 px, chapô sur 2 lignes. Radius 0, pas d'ombre.
• Bouton : radius 0, bordure 1px --text, sans 14 px uppercase. Survol : fond --text, texte --bg.

Motion

• Transitions de 150 à 250 ms, ease-out, sur couleur et soulignement uniquement.
• Barre de progression de lecture 2px en --accent. Images en fondu de 300 ms.
• Jamais de parallax ni de reveal mot par mot sur le texte. Respecte prefers-reduced-motion.

Tokens CSS

:root {
  --bg: #f4f0e6;
  --surface: #ebe5d6;
  --text: #1a1a1a;
  --muted: #5c574f;
  --accent: #c1440e;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-kicker: "IBM Plex Mono", monospace;
  --measure: 66ch;
  --gutter: 32px;
}

Checklist avant livraison

• Un seul serif display sur toute la page.
• Mesure du body entre 60 et 72 caractères.
• Accent uniquement sur drop cap, pull quotes, kickers et survols.
• Chaque image a une légende et un texte alternatif.
• Hiérarchie lisible une fois la page désaturée.

À éviter

• Deux serifs différents dans le même article.
• Texte justifié sans hyphens: auto.
• Cards à ombre portée et coins arrondis façon SaaS.
• Body gris clair sur crème pour faire "élégant".

Prompts de démarrage

• "Crée une page article longue lecture en style éditorial avec drop cap, chapô, pull quote et légendes en marge."
• "Transforme la home de mon blog en une de magazine : article à la une, grille de 6 articles, rubriques en kicker."
• "Fais une newsletter HTML éditoriale sur fond crème avec un seul accent rouge brique."