Typographie, arrière-plans, bordures et ombres

Un site se juge d’abord à son allure : une belle typographie et de bonnes finitions donnent immédiatement une impression de soin. Heureusement, quelques propriétés suffisent à transformer une page ordinaire. Dans cette leçon, vous choisissez des polices lisibles, vous réglez l’interligne, vous habillez les fonds et vous donnez au portfolio de Camille des cartes aux coins arrondis et délicatement ombrées.

Choisir une police avec font-family

La propriété font-family accepte une liste de polices, séparées par des virgules. Le navigateur essaie la première, et si elle n’est pas disponible sur l’appareil du visiteur, passe à la suivante, jusqu’à une famille générique de secours.

body {
  font-family: system-ui, sans-serif;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
}

Les familles génériques sont serif (avec empattements), sans-serif (sans empattements), monospace (chasse fixe, pour le code), ainsi que cursive et fantasy à éviter pour du texte courant. Les noms de polices composés de plusieurs mots s’écrivent entre guillemets.

Les polices système

Le mot-clé system-ui demande la police par défaut du système de l’utilisateur. Ce choix présente de grands avantages : zéro téléchargement, affichage immédiat, rendu familier et très lisible. Pour un premier site, c’est un excellent choix.

Les polices web

Si vous souhaitez une identité typographique plus marquée, vous pouvez charger une police depuis un fichier grâce à la règle @font-face :

@font-face {
  font-family: "Ma Police";
  src: url("../fonts/ma-police.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-family: "Ma Police", system-ui, sans-serif;
}

Quelques précautions importantes :

• vérifiez la licence : toutes les polices ne peuvent pas être utilisées librement sur un site ;
• le format woff2 est le plus léger et largement pris en charge ;
• font-display: swap affiche d’abord le texte avec une police de secours, puis bascule quand la police est chargée, ce qui évite un texte invisible pendant le chargement ;
• n’utilisez pas plus de deux familles (et quelques graisses) : chaque fichier alourdit la page ;
• si vous hébergez la police vous-même, vous évitez de transmettre les adresses IP de vos visiteurs à un service tiers.

Taille, graisse, interligne

L’line-height est la propriété la plus sous-estimée : une valeur sans unité (par exemple 1.6) est multipliée par la taille de la police. Un texte trop serré fatigue la lecture, alors qu’un interligne généreux l’aère. Pour un texte courant, une valeur entre 1,5 et 1,7 convient bien.

Pour la longueur de ligne, visez environ 50 à 75 caractères : au-delà, l’œil se perd en revenant à la ligne. C’est pourquoi une largeur maximale en ch (vue à la leçon précédente) améliore tant la lecture.

Les arrière-plans

Au-delà de background-color, on peut afficher une image ou un dégradé :

.hero {
  background-color: #1d4e5f;
  background-image: url("../images/hero.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  min-height: 60vh;
}

• background-size: cover agrandit l’image pour couvrir toute la zone, quitte à en rogner les bords ; contain la garde entière mais peut laisser des vides ;
• background-position règle le point d’ancrage (center, top, 20% 50%…) ;
• background-repeat évite la répétition ;
• le raccourci background permet de tout combiner en une ligne.

N’oubliez pas la couleur de fond de secours : elle s’affiche pendant le chargement de l’image et si elle ne charge pas. Et rappelez-vous qu’une image de fond n’a pas de texte alternatif : si l’image porte une information, utilisez plutôt un élément img.

Les dégradés

Un dégradé est une image générée par CSS, légère et nette à toutes les tailles :

.hero {
  background: linear-gradient(135deg, #1d4e5f, #3b7a8c);
}

.banniere::after {
  background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 60%));
}

Un dégradé sombre posé sur une photo est un procédé classique pour garantir la lisibilité d’un texte superposé.

Bordures et coins arrondis

.carte {
  border: 1px solid #e3ded3;
  border-radius: 12px;
}

.bouton {
  border: 2px solid #1d4e5f;
  border-radius: 999px; /* extrémités totalement arrondies */
}

.portrait {
  border-radius: 50%; /* cercle si l’image est carrée */
}

Le raccourci border combine épaisseur, style (solid, dashed, dotted…) et couleur. Il existe des versions par côté (border-bottom, border-left…). La propriété outline, proche, dessine un contour qui ne prend pas de place dans la mise en page : c’est elle qui sert d’indicateur de focus au clavier.

Les ombres

box-shadow projette une ombre autour de la boîte, avec la syntaxe suivante : décalage horizontal, décalage vertical, flou, étalement, couleur.

.carte {
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.carte:hover {
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
}

.hero h1 {
  text-shadow: 0 2px 4px rgb(0 0 0 / 40%);
}

La subtilité est la règle : des ombres douces, peu opaques, donnent de la profondeur sans lourdeur. Évitez les ombres noires franches. text-shadow s’applique au texte, avec une syntaxe voisine, et peut améliorer la lisibilité d’un titre sur une photo, à utiliser avec modération.

La mise en forme du portfolio de Camille

Réunissons ces notions pour styliser les cartes de projet et l’en-tête :

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.2;
}

header {
  background: linear-gradient(135deg, #1d4e5f, #3b7a8c);
  color: white;
  text-align: center;
}

.carte {
  background-color: white;
  border: 1px solid #e3ded3;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.carte img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

La règle max-width: 100%; height: auto; sur les images est essentielle : elle empêche une image de dépasser de sa boîte et conserve ses proportions. Nous la retrouverons au chapitre suivant.

À vous de jouer

1. Choisissez une police pour les titres et une pour le texte (polices système ou génériques si vous voulez rester simple), et réglez un line-height confortable ;
2. donnez à l’en-tête un fond en dégradé avec un texte clair ;
3. transformez vos cartes : coins arrondis, bordure fine, ombre douce, et une légère ombre plus marquée au survol ;
4. arrondissez le portrait de Camille en cercle.

body { font-family: system-ui, sans-serif; line-height: 1.65; }
h1, h2, h3 { font-family: Georgia, serif; line-height: 1.2; }

header {
  background: linear-gradient(135deg, #1d4e5f, #3b7a8c);
  color: #ffffff;
  text-align: center;
  padding: 2rem 1rem;
}

.carte {
  border: 1px solid #e3ded3;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}
.carte:hover { box-shadow: 0 6px 18px rgb(0 0 0 / 18%); }

.portrait {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 50%;
}

Vous maîtrisez maintenant les fondamentaux du CSS. Dans le chapitre suivant, vous apprenez à disposer les blocs sur la page avec Flexbox et Grid, et à adapter le tout aux mobiles.