Couleurs, unités et typographie en CSS

Quand on débute en CSS, on a souvent l’impression que tout est une affaire de détails. Une couleur trop foncée, un texte trop petit, un espacement étrange… et soudain, la page ne ressemble plus du tout à ce que l’on imaginait. Pourtant, derrière ces ajustements se cachent trois piliers fondamentaux du CSS : la couleur, l’unité de mesure et la typographie.

• Choisir et appliquer des couleurs lisibles et cohérentes pour améliorer immédiatement le confort de lecture et la crédibilité visuelle d’un site.
• Comprendre quelles unités utiliser selon les situations afin de créer des mises en page souples, adaptées à tous les écrans et aux préférences des utilisateurs.
• Construire une typographie claire et équilibrée qui guide naturellement le regard et donne envie de lire jusqu’au bout, même sur des contenus longs.

Ces trois notions sont partout. Elles influencent la lisibilité, l’ergonomie, l’émotion transmise par un site et même la confiance qu’un visiteur va accorder à votre contenu. Un texte mal contrasté ou une police mal choisie peut faire fuir un utilisateur en quelques secondes, sans qu’il sache vraiment pourquoi.

Dans ce chapitre, vous allez apprendre à maîtriser les couleurs CSS, les unités CSS et la typographie CSS, pas à pas, avec des mots simples, des exemples concrets et du code clair. L’objectif n’est pas seulement de comprendre, mais de savoir pourquoi vous faites tel ou tel choix, et comment les appliquer intelligemment dès vos premiers projets.

Comprendre la couleur en CSS

La couleur est souvent la première chose que l’on modifie quand on découvre le CSS. C’est aussi l’une des plus puissantes, car elle agit directement sur l’émotion et la perception visuelle.

En CSS, une couleur peut s’appliquer à de nombreux éléments. Le texte, les arrière-plans, les bordures, les ombres ou encore les icônes utilisent tous la propriété color ou background-color.

Voici un exemple très simple :

p {
  color: blue;
}

Ici, tous les paragraphes s’affichent en bleu. C’est clair, lisible et immédiat. Mais ce n’est que la surface des possibilités offertes par la couleur CSS.

Les couleurs nommées

Le CSS permet d’utiliser des noms de couleurs prédéfinis comme red, blue, green, black ou white. C’est pratique pour débuter, car on comprend immédiatement ce que l’on fait.

h1 {
  color: red;
}

Cependant, ces couleurs restent limitées. Il en existe un peu plus d’une centaine, mais elles manquent de précision. Dès que l’on cherche une nuance spécifique, il faut passer à autre chose.

Les couleurs hexadécimales

Les couleurs hexadécimales sont très répandues sur le web. Elles commencent par un dièse suivi de six caractères, composés de chiffres et de lettres.

body {
  background-color: #f5f5f5;
}

Ce code représente une nuance de gris très clair. Les six caractères correspondent à trois paires qui définissent la quantité de rouge, de vert et de bleu. Plus la valeur est élevée, plus la couleur est intense.

Par exemple, #000000 correspond au noir, tandis que #ffffff correspond au blanc. Entre les deux, vous avez des millions de combinaisons possibles.

Quand on débute, inutile de mémoriser ces valeurs. On utilise généralement un sélecteur de couleur dans un éditeur comme VS Code ou un outil en ligne.

Les couleurs RGB et RGBA

Une autre façon de définir une couleur CSS consiste à utiliser le modèle RGB, pour Rouge, Vert et Bleu.

div {
  background-color: rgb(255, 0, 0);
}

Ici, la couleur est rouge pur. Chaque valeur va de 0 à 255. Plus le chiffre est élevé, plus la couleur est présente.

La version RGBA ajoute une notion très importante : la transparence.

div {
  background-color: rgba(0, 0, 0, 0.5);
}

Le dernier chiffre correspond à l’opacité, entre 0 et 1. Une valeur de 0 rend l’élément totalement transparent, tandis que 1 le rend totalement opaque. Cette notion est essentielle pour créer des effets modernes, comme des superpositions ou des arrière-plans légers.

Les couleurs HSL

Le modèle HSL est souvent plus intuitif pour les humains. Il repose sur la teinte, la saturation et la luminosité.

button {
  background-color: hsl(200, 80%, 50%);
}

La teinte correspond à un angle sur un cercle chromatique, la saturation indique l’intensité de la couleur et la luminosité définit si la couleur est claire ou foncée. Ce modèle est très apprécié en design, car il permet d’ajuster une couleur sans la dénaturer.

Bien utiliser la couleur CSS

Choisir une couleur n’est pas qu’une question de goût. Il faut penser lisibilité, contraste et accessibilité.

Un texte clair sur un fond clair fatigue les yeux. À l’inverse, un contraste trop agressif peut devenir désagréable. L’objectif est toujours de faciliter la lecture.

Un exemple classique :

body {
  background-color: #ffffff;
  color: #333333;
}

Ce gris foncé est souvent préférable au noir pur, car il est plus doux pour les yeux, surtout sur de longues lectures.

Les unités CSS : mesurer l’espace

Passons maintenant à un autre pilier fondamental : les unités CSS. Elles servent à définir des tailles, des espacements, des largeurs ou encore des hauteurs.

Sans unité, le CSS ne peut rien afficher correctement.

Les unités absolues

L’unité la plus connue est le pixel, noté px.

p {
  font-size: 16px;
}

Le pixel est simple à comprendre. Il correspond à un point à l’écran. C’est rassurant quand on débute, car le rendu semble prévisible. Cependant, il présente un inconvénient majeur : il ne s’adapte pas bien aux différents écrans et aux préférences utilisateur.

Les unités absolues figent la taille, ce qui peut poser des problèmes d’accessibilité.

Les unités relatives : la clé d’un CSS moderne

Si vous ne deviez retenir qu’une chose sur les unités CSS, ce serait celle-ci : les unités relatives sont vos meilleures alliées. Contrairement aux unités fixes comme le pixel, elles s’adaptent au contexte, à l’écran et aux préférences de l’utilisateur.

C’est précisément pour cela qu’elles sont aujourd’hui privilégiées dans le développement web moderne.

L’unité em : relative à l’élément parent

L’unité em est directement liée à la taille de la police de l’élément parent.

Prenons un exemple simple :

body {
  font-size: 16px;
}

p {
  font-size: 1.2em;
}

Ici, le paragraphe aura une taille de 19,2 pixels. Pourquoi ? Parce que 1.2em correspond à 1,2 fois la taille du texte du parent, donc 16 multiplié par 1,2.

Cette unité est très pratique pour créer des proportions cohérentes. Si vous augmentez la taille du texte global, tous les éléments suivent naturellement.

Cependant, em peut parfois dérouter. Lorsqu’un élément est imbriqué dans un autre, les valeurs s’accumulent. Un em dans un em peut vite devenir difficile à anticiper quand on débute.

L’unité rem : relative à la racine du document

Pour résoudre ce problème, le CSS a introduit l’unité rem. Elle est relative non pas au parent, mais à l’élément racine, c’est-à-dire html.

html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;
}

Ici, le titre aura une taille de 32 pixels, peu importe l’endroit où il se trouve dans la page. C’est simple, stable et très lisible.

En pratique, beaucoup de développeurs définissent une taille de base sur html, puis utilisent exclusivement des rem pour toute la typographie. Cette approche facilite la maintenance et améliore l’accessibilité.

Les pourcentages : une relation directe

L’unité % est souvent utilisée pour les largeurs, les hauteurs ou les espacements.

.container {
  width: 80%;
}

Dans cet exemple, la largeur de l’élément correspond à 80 % de celle de son parent. C’est une unité intuitive, idéale pour les mises en page fluides.

En revanche, pour la typographie, les pourcentages sont aujourd’hui moins courants que les rem, car ils peuvent devenir difficiles à gérer sur des structures complexes.

Les unités liées à la fenêtre

Les unités vw et vh sont relatives à la taille de la fenêtre du navigateur.

section {
  height: 100vh;
}

Ici, la section occupe toute la hauteur visible de l’écran. C’est très utile pour créer des pages d’accueil immersives ou des sections pleine page.

1vw correspond à 1 % de la largeur de la fenêtre, tandis que 1vh correspond à 1 % de sa hauteur. Ces unités permettent de concevoir des interfaces dynamiques, mais doivent être utilisées avec parcimonie, surtout pour le texte, afin d’éviter des tailles excessives sur les grands écrans.

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Comprendre la typographie CSS

La typographie CSS ne consiste pas seulement à choisir une police. Elle influence la lisibilité, le confort de lecture et l’identité visuelle d’un site.

Un bon texte ne se remarque pas. Un mauvais texte, lui, se fait immédiatement sentir.

La propriété font-family

La propriété font-family permet de définir la police utilisée.

body {
  font-family: Arial, Helvetica, sans-serif;
}

Ce code indique au navigateur d’utiliser Arial. Si elle n’est pas disponible, il tentera Helvetica, puis une police générique sans empattement.

Il est toujours recommandé de prévoir plusieurs polices, car toutes ne sont pas installées sur tous les systèmes.

Les polices serif et sans-serif

Les polices serif possèdent de petites extensions aux extrémités des lettres. Elles sont souvent associées à la presse ou aux livres.

Les polices sans-serif, plus épurées, sont très utilisées sur le web, car elles offrent une excellente lisibilité à l’écran.

Pour un site pédagogique ou technique, une police sans-serif est généralement un choix sûr.

La taille du texte avec font-size

La propriété font-size définit la taille du texte.

p {
  font-size: 1rem;
}

En utilisant des unités CSS relatives, vous permettez à l’utilisateur d’agrandir ou réduire le texte via son navigateur sans casser la mise en page. C’est un point essentiel pour l’accessibilité.

L’épaisseur du texte avec font-weight

Le poids d’une police (plus ou moins gras) se règle avec font-weight.

strong {
  font-weight: 700;
}

Les valeurs vont généralement de 100 à 900, mais les plus courantes sont 400 pour le texte normal et 700 pour le gras. Attention toutefois, toutes les polices ne supportent pas tous les niveaux de poids.

L’importance de l’interligne et de l’espacement

Un texte bien écrit peut devenir pénible à lire si l’interligne est mal réglé.

La propriété line-height

p {
  line-height: 1.6;
}

Cette valeur signifie que l’espace entre les lignes est 1,6 fois la taille du texte. C’est un réglage très confortable pour la lecture, surtout sur les paragraphes longs.

Un interligne trop serré fatigue les yeux, tandis qu’un interligne trop large casse le rythme de lecture.

L’espacement entre les lettres

La propriété letter-spacing permet d’ajuster l’espace entre les caractères.

h1 {
  letter-spacing: 1px;
}

Utilisée avec subtilité, elle peut renforcer l’élégance d’un titre. En revanche, sur un texte courant, elle devient vite désagréable.

Associer couleurs, unités et typographie intelligemment

Pris séparément, chaque concept est relativement simple. Mais c’est leur combinaison qui donne naissance à une interface lisible, agréable et cohérente. En CSS, tout est une question d’équilibre.

Un exemple de base réaliste

Imaginons une page de contenu classique, comme un article de blog ou une page de formation. L’objectif est clair : faciliter la lecture sur la durée.

html {
  font-size: 16px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333333;
  background-color: #ffffff;
  line-height: 1.6;
}

Ici, chaque choix a une raison précise. La taille de base est fixée sur l’élément racine, ce qui rend l’utilisation des remcohérente partout. La couleur du texte n’est pas noire pure, afin d’adoucir la lecture. Le fond est blanc pour un contraste naturel. Enfin, l’interligne améliore le confort visuel sans alourdir la page.

Ce type de configuration simple constitue une excellente base pour presque tous les projets.

Hiérarchiser le contenu avec la typographie CSS

Un bon site se lit comme un livre bien structuré. Le regard doit comprendre instantanément ce qui est important et ce qui l’est moins.

Les titres

Les titres sont là pour guider l’utilisateur. Ils doivent être visibles sans être agressifs.

h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.6rem;
  margin-top: 2rem;
  margin-bottom: 0.8rem;
}

Grâce aux unités CSS relatives, les titres s’adaptent automatiquement si la taille de base change. Les marges utilisent elles aussi des unités proportionnelles, ce qui évite les espacements incohérents.

Les paragraphes

p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

Ici, rien de spectaculaire, et c’est volontaire. Un paragraphe ne doit pas attirer l’attention sur lui-même, mais servir le contenu.

La couleur CSS au service de la compréhension

La couleur ne doit jamais être utilisée uniquement pour faire joli. Elle sert à transmettre une information.

Mettre en valeur sans surcharger

.highlight {
  color: #0066cc;
}

Cette classe peut être utilisée pour attirer l’œil sur un mot important ou une notion clé. La couleur choisie reste suffisamment sobre pour ne pas casser la lecture.

Un piège courant consiste à multiplier les couleurs. Trop de nuances créent une confusion visuelle. En pratique, deux ou trois couleurs bien choisies suffisent largement pour un site pédagogique.

Attention au contraste

Un texte doit toujours rester lisible, quel que soit l’écran ou la luminosité ambiante. Un bon contraste n’est pas une option, c’est une obligation.

.alert {
  background-color: #f5f5f5;
  color: #222222;
}

Même sur un fond gris clair, le texte reste lisible grâce à une couleur suffisamment foncée. C’est un détail, mais ces détails font toute la différence sur un site professionnel.

Adapter le texte à tous les écrans

Aujourd’hui, un site est consulté sur ordinateur, tablette et smartphone. Les unités CSS relatives sont indispensables pour garantir une bonne expérience partout.

Exemple d’adaptation simple

body {
  font-size: 1rem;
}

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

Ici, la taille du texte est légèrement réduite sur les écrans plus petits pour éviter un effet de surcharge. Grâce aux rem, toute la typographie s’adapte automatiquement.

Cette approche est bien plus propre que de modifier chaque élément individuellement.

Les erreurs courantes à éviter quand on débute

Il est très fréquent de vouloir tout contrôler au pixel près. Pourtant, le web n’est pas un support figé.

Utiliser uniquement des pixels pour la typographie est une erreur classique. Cela bloque l’adaptation aux préférences utilisateur et complique la maintenance. Mélanger trop d’unités différentes dans un même projet crée aussi une incohérence difficile à corriger plus tard.

Du côté des couleurs CSS, le manque de contraste est l’erreur la plus répandue. Un texte élégant mais illisible n’a aucune valeur. Enfin, en typographie CSS, multiplier les polices nuit à l’harmonie visuelle. Une ou deux polices bien choisies suffisent amplement.

Construire une base CSS réutilisable

Avec l’expérience, on se rend compte que beaucoup de règles CSS reviennent sans cesse. Créer une base typographique solide permet de gagner un temps précieux.

html {
  font-size: 16px;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  background-color: #fff;
  line-height: 1.6;
}

À partir de cette base, chaque nouveau projet démarre sur des fondations saines. Les couleurs CSS, les unités CSS et la typographie CSS travaillent ensemble au lieu de se battre entre elles.

Maîtriser la couleur CSS, l’unité CSS et la typographie CSS, ce n’est pas apprendre des règles par cœur. C’est comprendre comment l’œil humain lit, perçoit et ressent une interface. Ces trois piliers ne servent pas à impressionner, mais à rendre votre contenu accessible, confortable et agréable.

Lorsque vous écrivez votre CSS, posez-vous toujours la même question : est-ce que ce choix aide l’utilisateur ou complique son expérience ? Une bonne couleur rassure, une unité bien choisie s’adapte naturellement, une typographie cohérente donne envie de lire jusqu’au bout.

Avec ces bases solides, vous êtes désormais capable de construire des pages propres, lisibles et professionnelles. Et surtout, vous avez acquis une compétence essentielle : celle de faire des choix réfléchis, plutôt que d’empiler des styles au hasard. C’est exactement à ce moment-là que le CSS cesse d’être une contrainte et devient un véritable outil de création.

Chapitre suivant : Le Model Box en CSS

Alban

Fondateur de l’agence Créa-troyes, affiliée France Num
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr