Les Unités CSS

Démo interactive em vs rem

Démo vh vs dvh

Échelle typographique fluide

/* Définir une échelle globale avec rem sur :root */
:root {
  font-size: 16px;     /* Base = 1rem = 16px */
}

/* Échelle de taille avec rem — tout est cohérent */
.texte-xs   { font-size: 0.75rem; }   /* 12px */
.texte-sm   { font-size: 0.875rem; }  /* 14px */
.texte-base { font-size: 1rem; }      /* 16px */
.texte-lg   { font-size: 1.125rem; }  /* 18px */
.texte-xl   { font-size: 1.25rem; }   /* 20px */
.texte-2xl  { font-size: 1.5rem; }    /* 24px */
.texte-3xl  { font-size: 2rem; }      /* 32px */
.texte-4xl  { font-size: 2.5rem; }    /* 40px */

/* Les marges et paddings suivent la même échelle */
.espace-xs  { padding: 0.25rem; }     /* 4px */
.espace-sm  { padding: 0.5rem; }      /* 8px */
.espace-md  { padding: 1rem; }        /* 16px */
.espace-lg  { padding: 1.5rem; }      /* 24px */
.espace-xl  { padding: 2rem; }        /* 32px */

/* Avantage : changer la taille de base de :root
   redimensionne TOUT le site en une seule ligne */

Page avec sidebar

/* Layout moderne combinant unités absolues et relatives */
.page {
  display: grid;
  grid-template-columns: 260px 1fr;  /* px pour le fixe, fr pour le flexible */
  min-height: 100dvh;                  /* viewport dynamique */
  gap: 1.5rem;                         /* rem pour l'espacement */
}

.sidebar {
  padding: 1.5rem;                     /* rem */
  font-size: 0.875rem;                /* rem — texte un peu plus petit */
}

.contenu {
  padding: 2rem 3rem;                  /* rem */
  max-width: 75ch;                     /* ch — 75 caractères max par ligne */
}

/* Le header utilise em pour ses éléments internes */
.header-nav {
  font-size: 0.9rem;                   /* rem */
}

.header-nav .btn {
  padding: 0.5em 1.2em;               /* em — espace proportionnel au texte */
  font-size: 0.85rem;                  /* rem */
  border: 2px solid currentColor;       /* px — toujours pour les bordures */
}

Section héro sans média query

/* Un hero qui s'adapte sans aucune media query */
.hero {
  min-height: 100dvh;                   /* Pleine hauteur dynamique */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem clamp(1rem, 5vw, 4rem); /* Fluid horizontal padding */
}

.hero h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);  /* Min 32px → Préféré 6vw → Max 72px */
  line-height: 1.1;
  margin-bottom: 1rem;
}

.hero p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);/* Texte secondaire fluide */
  max-width: 60ch;                       /* Lisibilité */
  margin-bottom: 2rem;
}

.hero .btn-cta {
  padding: clamp(0.75rem, 2vw, 1.2rem) clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(1rem, 2vw, 1.25rem);
  border-radius: 8px;
}

Carte adaptative

/* Le composant s'adapte à son conteneur, pas au viewport */
.carte-wrapper {
  container-type: inline-size;
  container-name: carte;
}

.carte {
  padding: 4cqi;                        /* 4% du conteneur */
  font-size: 3.5cqi;                    /* Typographie fluide du conteneur */
  display: grid;
  gap: 2cqi;
}

/* Quand le conteneur atteint 400px, passage en layout horizontal */
@container carte (min-width: 400px) {
  .carte {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
}

/* Avantage : même composant dans deux conteneurs de tailles différentes
   s'adapte indépendamment dans chaque cas */

Projet : Système de design d'unités

Crée un fichier tokens.css qui définit un système complet d'unités :

/* tokens.css — Système d'unités */
:root {
  /* === ÉCHELLE TYPOGRAPHIQUE === */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */
  --text-4xl:  2.5rem;     /* 40px */
  --text-5xl:  3rem;       /* 48px */

  /* === PAS D'ESPACEMENT (base: 4px) === */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */

  /* === LARGEURS DE CONTENEUR === */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;

  /* === BORDURES === */
  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  4px;
  --radius-sm:     4px;
  --radius-md:     8px;
  --radius-lg:     12px;
  --radius-full:   9999px;
}

/* Usage : */
.card    { padding: var(--space-6); border-radius: var(--radius-md); }
.titre   { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.texte   { font-size: var(--text-base); line-height: 1.6; }
.bouton  {
  padding: var(--space-2) var(--space-5);
  border: var(--border-medium) solid currentColor;
  border-radius: var(--radius-full);
}

Contraintes :

• Ne jamais utiliser de valeur en px sauf pour les bordures.
• Toutes les tailles doivent être des multiples de 0.25rem (4px).
• Le système doit pouvoir être modifié en changeant uniquement font-size de :root.
• Inclure au moins 3 composants (carte, bouton, formulaire) utilisant les tokens.