CSS Texte adaptatif

CSS Texte adaptatif est une approche de conception de contenu textuel qui garantit un affichage optimal du texte sur différents appareils et écrans. Cette technologie est un élément essentiel du design web réactif.

Principales unités de mesure

Unités relatives

em – unité relative dépendant de la taille de police de l'élément parent
rem – unité relative dépendant de la taille de police de l'élément racine (root em)
vw – unité correspondant à 1% de la largeur de la fenêtre (viewport)
vh – unité correspondant à 1% de la hauteur de la fenêtre (viewport)
vmin – la plus petite valeur entre vw et vh
vmax – la plus grande valeur entre vw et vh

Unités absolues

px – pixels
pt – points
pc – picas

Propriétés

font-size — taille de la police.
line-height — hauteur de ligne.
font-weight — épaisseur de la police.
text-align — alignement du texte.
word-wrap et overflow-wrap — contrôle du retour à la ligne.

Techniques d’adaptation

Typographie fluide (Fluid Typography)

La typographie fluide permet d’adapter la taille du texte en fonction de la taille de l’écran :

.fluid-text {
    font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Media Queries

Les Media Queries permettent de définir différents styles en fonction de la taille de l’écran :

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
}

La fonction calc()

La fonction calc() permet de combiner différentes unités de mesure :

.adaptive-heading {
    font-size: calc(16px + 2vw);
    line-height: calc(1.1em + 0.5vw);
}

Fonctions modernes de CSS

clamp()

La fonction clamp() permet de définir une valeur minimale, préférée et maximale :

.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

min() et max()

Les fonctions min() et max() permettent de définir des limites dynamiques :

.paragraph {
    width: min(65ch, 100%);
    font-size: max(1rem, 2vw);
}

Exemples d’utilisation

Titre adaptatif

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: calc(1rem + 2vw);
}

Paragraphe lisible

p {
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    max-width: 65ch;
    margin: 0 auto;
}

Résultat du texte lisible :

Testez le code sur une page séparée

Conseils pratiques

Utilisez des unités relatives plutôt qu’absolues
Combinez différentes techniques pour un rendu optimal
Testez votre mise en page sur plusieurs appareils
Pensez à la lisibilité du texte
Définissez des valeurs minimales et maximales pour éviter les tailles extrêmes

Compatibilité avec les navigateurs

Fonction	Chrome	Firefox	Safari	Edge
clamp()	79+	75+	13.1+	79+
calc()	19+	4+	6+	12+
vw/vh	20+	19+	6+	12+