Galerie de Styles CSS & Typographie

Cas d'usage: Startups, SaaS, Blogs, E-commerce, Portfolios numériques, Agences créatives

Aperçu Interactif

Titre Moderne

Moderne et Épuré Geometric Humanist

Ceci est un paragraphe de corps de texte, utilisant une police "Humanist" claire et lisible comme Seravek ou Ubuntu. Elle est conçue pour une lecture facile sur écran. Humanist

  • Élément de liste moderne
  • Élément de liste épuré

System UI

Palette de Couleur

Primary
Bleu Tech
#0066cc
Secondary
Gris Clair
#e8e8e8
Accent
Orange Énergique
#ff6b35
Text
Noir Doux
#1a1a1a
Background
Fond Clair
#f5f5f5

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: 700; letter-spacing: -0.5px; color: #1a1a1a; }
h1 { font-size: 48px; line-height: 1.2; }
h2 { font-size: 36px; line-height: 1.25; }
h3 { font-size: 28px; line-height: 1.3; }

/* Body */
p, li {
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  font-size: 16px; line-height: 1.65; color: #333; }

/* Accents */
.btn, label, .tag { font-family: system-ui, sans-serif; font-weight: 600; font-size: 14px; }

Cas d'usage: Marques de luxe, Édition haut de gamme, Mode et cosmétiques, Publications prestigieuses

Aperçu Interactif

Titre de Luxe

Élégance et Contraste Didone

Un corps de texte "Transitional" comme Charter offre une lisibilité exceptionnelle avec une touche de classicisme. Le haut contraste des titres Didone (comme Didot ou Bodoni) crée un effet dramatique. Transitional

  • Élément de liste raffiné
  • Élément de liste élégant

Slab Serif

Palette de Couleur

Primary
Noir Profond
#1a1a1a
Secondary
Gris Doux
#e8e4e0
Accent
Or
#d4af37
Text
Gris Très Foncé
#2a2a2a
Background
Fond Crème
#faf9f7

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
  font-weight: 400; letter-spacing: 0.4px; color: #2a2a2a; font-style: normal; }
h1 { font-size: 56px; line-height: 1.1; font-weight: 400; text-align: center; }
h2 { font-size: 40px; line-height: 1.2; }
h3 { font-size: 28px; line-height: 1.3; }

/* Body */
p, li {
  font-family: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
  font-size: 17px; line-height: 1.8; color: #3a3a3a; letter-spacing: 0.2px; }

/* Accents */
.btn, label, .tag {
  font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  font-weight: 700; font-size: 13px; text-transform: uppercase; }

Cas d'usage: Banques, Finance, Consulting, Corporate, Applications web, Gouvernement, Technologies

Aperçu Interactif

Titre Professionnel

Clair, Net et Technique Neo-Grotesque

Le style "Neo-Grotesque" (comme Inter ou Roboto) est le standard de l'industrie pour sa clarté. Associé à la police système (system-ui) pour le corps, il crée une interface utilisateur neutre et fonctionnelle. System UI

  • Élément de liste neutre
  • Élément de liste fonctionnel

Monospace Code

Palette de Couleur

Primary
Bleu Corporate
#003d99
Secondary
Bleu Clair
#e8f1ff
Accent
Vert
#006633
Text
Noir Pur
#0a0a0a
Background
Fond Gris
#f0f0f0

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  font-weight: 700; letter-spacing: 0.1px; color: #0a0a0a; }
h1 { font-size: 48px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 36px; line-height: 1.25; font-weight: 700; }
h3 { font-size: 24px; line-height: 1.35; font-weight: 600; }

/* Body */
p, li {
  font-family: system-ui, sans-serif;
  font-size: 15px; line-height: 1.6; color: #333; font-weight: 400; }

/* Accents */
.btn, label, .tag {
  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  font-weight: 600; font-size: 12px; letter-spacing: 0.5px; }

Cas d'usage: Agences créatives, Magazines, Design portfolio, Retail créatif, Startups design-forward

Aperçu Interactif

Titre Créatif

Solide et Contemporain Slab Serif

L'utilisation d'un "Slab Serif" (comme Rockwell ou Roboto Slab) pour les titres donne une impression de confiance et de créativité. Le corps "Humanist" équilibre cela avec une grande lisibilité. Humanist

  • Élément de liste solide
  • Élément de liste contemporain

Geometric Humanist

Palette de Couleur

Primary
Rouge Vif
#d32f2f
Secondary
Rose Doux
#f5e5e3
Accent
Bleu
#1976d2
Text
Noir Doux
#1a1a1a
Background
Fond Beige
#fff9f0

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
  font-weight: 700; letter-spacing: 0.2px; color: #1a1a1a; }
h1 { font-size: 52px; line-height: 1.15; }
h2 { font-size: 38px; line-height: 1.2; }
h3 { font-size: 28px; line-height: 1.3; }

/* Body */
p, li {
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  font-size: 16px; line-height: 1.65; color: #2a2a2a; }

/* Accents */
.btn, label, .tag {
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-weight: 600; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }

Cas d'usage: Cabinets d'avocats, Institutions financières, Universités, Gouvernement, Musées, Cabinet médical

Aperçu Interactif

Titre Raffiné

Établi et Confiant Classical Humanist

Un style "Classical Humanist" (comme Optima) est moins sévère qu'un "Neo-Grotesque". Associé à un corps "Old Style" (comme Iowan Old Style), il évoque la confiance, la tradition et l'académisme. Old Style

  • Élément de liste établi
  • Élément de liste confiant

Neo-Grotesque

Palette de Couleur

Primary
Bleu Marine Foncé
#2c3e50
Secondary
Taupe
#d4c5b9
Accent
Marron
#8b7355
Text
Gris Foncé
#333333
Background
Fond Gris
#ecf0f1

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
  font-weight: 700; letter-spacing: 0.3px; color: #1a1a1a; }
h1 { font-size: 48px; line-height: 1.2; font-weight: 600; }
h2 { font-size: 36px; line-height: 1.25; font-weight: 600; }
h3 { font-size: 26px; line-height: 1.3; font-weight: 600; }

/* Body */
p, li {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  font-size: 17px; line-height: 1.8; color: #333; letter-spacing: 0.3px; }

/* Accents */
.btn, label, .tag {
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  font-weight: 600; font-size: 13px; text-transform: uppercase; }

Cas d'usage: Sites enfants, Wellness/santé, Applications jeunesse, Communautés, Startups sociales, ONG

Aperçu Interactif

Titre Amical

Inclusif et Moderne Rounded Sans

Les polices arrondies (comme Quicksand ou ui-rounded) sont douces, amicales et accessibles. Elles donnent un sentiment de sécurité et d'optimisme, renforcé par une palette de couleurs vives et douces. Humanist

  • Élément de liste inclusif
  • Élément de liste moderne

Rounded Sans

Palette de Couleur

Primary
Violet Doux
#6c5ce7
Secondary
Vert Pastel
#d4f1d4
Accent
Vert Mint
#00b894
Text
Gris Bleu
#2c3e50
Background
Fond Blanc
#fcfcfc

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  font-weight: 600; letter-spacing: 0.3px; color: #2c3e50; }
h1 { font-size: 48px; line-height: 1.2; font-weight: 700; }
h2 { font-size: 36px; line-height: 1.25; font-weight: 700; }
h3 { font-size: 28px; line-height: 1.3; font-weight: 600; }

/* Body */
p, li {
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  font-size: 16px; line-height: 1.65; color: #2c3e50; }

/* Accents */
.btn, label, .tag {
  font-family: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
  font-weight: 700; font-size: 14px; letter-spacing: 0.2px; }

Cas d'usage: Construction/ingénierie, Industrie, Design "gritty", Musique/concerts, Marques de streetwear

Aperçu Interactif

Titre Puissant

Audacieux et Impactant Industrial

Les polices "Industrielles" (condensées, épaisses, comme Bahnschrift ou DIN) sont utilitaires et fortes. Elles sont faites pour être vues. Un corps "Neo-Grotesque" simple ancre le design sans lui voler la vedette. Neo-Grotesque

  • Élément de liste audacieux
  • Élément de liste impactant

Monospace Slab Serif

Palette de Couleur

Primary
Noir Pur
#000000
Secondary
Gris Charbon
#4a4a4a
Accent
Bleu Foncé
#004e89
Text
Noir Doux
#1a1a1a
Background
Fond Gris
#f5f5f5

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  font-weight: 700; letter-spacing: 0.6px; color: #0a0a0a; text-transform: uppercase; }
h1 { font-size: 56px; line-height: 1.1; letter-spacing: 1px; }
h2 { font-size: 42px; line-height: 1.15; letter-spacing: 0.8px; }
h3 { font-size: 28px; line-height: 1.25; letter-spacing: 0.5px; }

/* Body */
p, li {
  font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
  font-size: 15px; line-height: 1.6; color: #1a1a1a; font-weight: 400; }

/* Accents */
.btn, label, .tag {
  font-family: 'Nimbus Mono PS', 'Courier New', monospace;
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; }

Cas d'usage: Antiquaires, Musées, Archives, Édition vintage, Livres rares, Sociétés historiques

Aperçu Interactif

Titre Vintage

Authentique et Historique Antique

Les polices "Antique" (comme Bookman ou Superclarendon) ont un charme d'antan. Combinées à un corps "Old Style" très lisible (comme Palatino), elles transportent l'utilisateur à une autre époque, idéal pour l'histoire et l'authenticité. Old Style

  • Élément de style authentique
  • Élément de style historique

Humanist

Palette de Couleur

Primary
Gris Foncé
#4a4a4a
Secondary
Bleu-Gris
#b8cfe0
Accent
Or Antique
#8b6914
Text
Gris Très Foncé
#3a3a3a
Background
Fond Beige
#f5ede0

Code CSS Original

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
  font-weight: 700; letter-spacing: 0.3px; color: #3a3a3a; }
h1 { font-size: 52px; line-height: 1.15; font-weight: 700; }
h2 { font-size: 40px; line-height: 1.2; font-weight: 700; }
h3 { font-size: 28px; line-height: 1.3; font-weight: 700; }

/* Body */
p, li {
  font-family: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
  font-size: 18px; line-height: 1.8; color: #3a3a3a; letter-spacing: 0.3px; }

/* Accents */
.btn, label, .tag {
  font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }