19 April 2015

Utiliser les unités relatives en css pour gérer vos typographies responsivement

Il est toujours difficile de concevoir un usage des unités relatives cohérent  et maintenable aisément. Pour rappel, le navigateur ne va pas rendre une propriété css définie par une unité de mesure relative (comme “em” ou “rem”) selon une échelle fixe, mais en fonction d’un élément parent.

D’une manière générale, les unités rem sont plus facilement maintenables car définies par le même référent (le sélécteur html) quelque soit la position de l’élément sélectionné dans le DOM. Au contraire les em vont rendre  en fonction de l’élément parent le plus proche ayant la même propriété  définie.

Le principal usage de ces unités relatives concerne le rendu de texte et plus particulièrement la propriété “font-size”. Et s’il peut paraitre plus aisé et directe d’utiliser des unités de mesures absolues comme les px ou les pt, dans le cadre d’un environnement conçu pour être responsif, les font-sizes relatives peuvent être un atout très précieux.

Exemple 1

html {
    font-size: 18px;
}

p {
    font-size: 1rem;
}

h1 {
   font-size: 1.8rem;
}

See the Pen Example 1 for a responsive use for relative units by Loic Goyet (@loic) on CodePen.

Ici nous avons défini une taille de texte référente  pour l’ensemble des éléments du dom. Nous exploitons ensuite cette valeur référente sur différents sélecteurs via la valeur relative rem. Nos balises <p> renverront donc un texte de 16px de taille tandis que nos <h1> seront d’environ 29px.

 

Exemple 2

html {
    font-size: 16px;
}

@media (max-width: 991px) {
  html {
    font-size: 18px;
  } 
}

@media (max-width: 767px) {
  html {
    font-size: 20px;
  } 
}

p {
    font-size: 1rem;
}

h1 {
   font-size: 1.8rem;
}

See the Pen Example 2 for a responsive use for relative units by Loic Goyet (@loic) on CodePen.

Nous avons rajouté dans l’exemple 2, des media-queries qui ont pour simples objectifs de modifier la valeure référente  utilisée pour calculer les propriétés définies en rem. Le résultat c’est que nos elements <p> et <h1> vont changer de font-size en fonction de la taille du viewport en conservant le même  rapport de taille entre les différents éléments.

Cette technique présente plusieurs avantages :

  • mettre en place aisément une stratégie responsive tout en gardant un design cohérent.
  • le navigateur doit gérer un rendu responsive pas trop lourd car avec peu de media-queries
  • ce système est ultra simple à maintenir.

Cependant mettre en place cette stratégie demande de lire autrement un design. Il vous faudra déterminer dans un premier temps la font-size référente, celle qui sera définie pour la balise <html> et qui vaudra 1rem. Puis il faudra transcrire les différentes font-size que vous trouverez non pas en valeur  brute mais en fonction de votre font-size. Nous ne somme plus dans l’idée de valeurs fixes mais de rapports entre les éléments. Cela demande une petite gymnastique mais en vaut la peine smiley.

Pro Tip

$fontSize_collection: (
    351px: 19px,
    768px: 18px,
    992px: 17px,
    1200px: 16px
);

html {
    font-size: 16px;

    @each $viewport, $size in $fontSize_collection {
        @media (min-width: $viewport) {
            font-size: $size;
        }
    }
}

p {
    font-size: 1rem;
}

h1 {
    font-size: 1.8rem;
}

See the Pen Example 3 for a responsive use for relative units by Loic Goyet (@loic) on CodePen.

Avec le préprocesseur sass, il est possible d’aller plus loin dans l’écriture du code (même si le résultat sera identique). Nous pouvons faire une boucle dans un tableau  de valeurs comportant pour chaque entrée la min-width,   référencée dans la  media-querie, et la valeur de la font-size. Tout cela dans le simple but d’éviter la répétition dans votre code sass des media-queries. Cela permet aussi rassembler au sein d’un tableau les différentes définitions d’une propriété et donc de rassembler de l'information similaire pour obtenir un code maintenable plus facilement.

comments powered by Disqus