2. Charte typographique

Charte typographique responsive

Ce modèle de feuille de style CSS propose une base typographique responsive, conçue selon l'approche Mobile First. Les valeurs de taille de police suggérées sont indicatives et doivent être ajustées selon la direction visuelle et le choix de polices de caractères.

/**
 * Typographie responsive (Mobile First)
   ========================================================================
 * Les valeurs de taille de police suggérées ici sont à titre indicatif.
 * À ajuster selon la direction visuelle et le choix de polices de caractères.
 *
 * Points de rupture :
 * ==========================================================================
 * 640px  (40rem)  - Téléphones en mode paysage (horizontal)
 * 768px  (48rem)  - Tablettes en mode portrait (vertical)
 * 1024px (64rem)  - Petits ordinateurs portables, tablette en mode paysage (horizontal)
 * 1280px (80rem)  - Écrans de portables et écrans de bureau
 * 1536px (96rem)  - Écrans de bureau - souvent écrans de 24 pouces ou plus
 */

/* Charte typographique
   ========================================================================== */
/* Polices liées */
/* copier ici l'instruction @import url('...'); proposée par Google Fonts */

body {
    /* Adapter la famille de polices selon le projet */
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 100;

    /*
    16px = taille de police minimale (1rem par défaut)
    Utiliser une taille de police minimale de 16px évite le zoom automatique
    sur mobile lors de la saisie dans les champs de formulaire
    */
    font-size: 1rem;

    /* facteur multiplicateur de la taille de la police 1.375x16 = 22 */
    line-height: 1.375;
}

h1,
h2,
h3,
h4 {
    /* Adapter la famille de polices selon le projet */
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 500;
}

/* Hiérarchie typographique adaptative (responsive)
   ========================================================================== */

h1 {
    /* = 32px */
    font-size: 2rem;
}

h2 {
    /* = 24px */
    font-size: 1.5rem;
}

h3 {
    /* = 18px */
    font-size: 1.125rem;
}

h4 {
    /* = 16px */
    font-size: 1rem;
}

/* Points de rupture (breakpoints)
   ========================================================================== */

/* 640px (40rem) - Téléphones en mode paysage (horizontal) */
@media (min-width: 40rem) {
    /* Styles spécifiques */
    h1 {
        /* = 40px */
        font-size: 2.5rem;
    }
    h2 {
        /* = 32px */
        font-size: 2rem;
    }
    h3 {
        /* = 24px */
        font-size: 1.5rem;
    }
    h4 {
        /* = 18px */
        font-size: 1.125rem;
    }
}

/* 768px (48rem) - Tablettes en mode portrait (vertical) */
@media (min-width: 48rem) {
    /* Styles spécifiques */
}

/* 1024px (64rem) - Petits ordinateurs portables, tablette en mode paysage (horizontal) */
@media (min-width: 64rem) {
    /* Styles spécifiques */
    h1 {
        /* = 48px */
        font-size: 3rem;
    }
    h2 {
        /* = 36px */
        font-size: 2.25rem;
    }
    h3 {
        /* = 30px */
        font-size: 1.875rem;
    }
    h4 {
        /* = 22px */
        font-size: 1.375rem;
    }
}

/* 1280px (80rem) - Écrans de portables et écrans de bureau */
@media (min-width: 80rem) {
    /* Styles spécifiques */
}

/* 1536px (96rem) - Écrans de bureau - souvent écrans de 24 pouces ou plus */
@media (min-width: 96rem) {
    /* Styles spécifiques */
}