CSS permet de nombreuses manipulations du texte pour l’adapter à la taille de l’écran (@media, var(), flex, …), ou d’utiliser des valeurs relatives (%, em, rem, clamp(), …) ET de choisir une typographie qui colle à la charte graphique du client!
Dans l’épisode précédent, nous abordions les polices personnalisées et leur hébergement. Et également Les variables CSS, appliquées aux polices.
Nous avions utilisé également des « Variable Fonts ».
* Les polices « Variables » permettent d’ajuster finement via CSS différents paramètres de la typographie comme l’oeil, la graisse, l’italisation, les empattements, ou autres tels que définis par le créateur de la police.
Typo Responsive
Dans le code ci-après, j’illustre comment rendre la typographie « fluide » (adaptée à la taille de l’écran).
/* Puis on appelle l'entité html (la font peut être définie sur l'élément 'body'>)*/
p {
font-family: var(--font-main-set);
font-weight: 301;
font-variation-settings: 'wght' 380, 'wdth' 100;
font-size: clamp(0.825rem, 0.7442rem + 0.3590vw, 1.25rem);
line-height: calc(2px + 2.5ex + 2px);
margin: 0 0 var(--spacing-dble);
letter-spacing: 0.0325em;
color:inherit
}
Font-family, la variable [var(–value-ofVar)] appelle la famille définie en amont (dans la variable ). Ici, ‘Open Sans’ et ses fall-back.
Font-weight est un fallback de la définition suivante pour les navigateurs qui ne supportent pas les polices variables..
Font-variation-settings définit la graisse, condensé, l’italisation, … ici wdth et wght (selon la typo variable font choisie).
Font-size est calculée pour être responsive en utilisant la fonction CSS clamp().
Line-height est calculée à l’aide la fonction CSS calc() avec une valeur relative à l’oeil de la typographie (valeur en ex).
Letter-spacing utilise une valeur relative au corps (em)
Note: ‘color:inherit‘ déclare que la couleur du texte hérite de la couleur définie sur le parent. C’est pratique pour gérer l’héritage selon la couleur de fond du parent (et de ne pas avoir à définir trop de cas particulier), et pour la gestion du Dark Mode.
Les valeurs CSS relatives
CSS permet d’utiliser des types de valeurs relatives, et vous devriez les utiliser autant que possible.
Une valeur relative est une valeur qui va changer selon le contexte, par opposition à une valeur fixe qui sera toujours identique quel que soit le ratio.
Pour la typographie, les valeurs qui nous intéressent sont rem, em, ex et %.
On évitera d’utiliser le pixel et autre cm, inch ou pico ou autre valeur issue du print.
rem : L’unité rem (Root EM) est relative à la taille de la police du root element (). Par exemple, si la taille de la police du root est de 16px, 1rem équivaut à 16px. Cela permet une cohérence dans la mise à l’échelle des éléments car elle est toujours basée sur une taille de police globale.
em : L’unité em est relative à la taille de la police de l’élément parent. Ainsi, 1em correspond à la taille actuelle de la police de l’élément. Si l’élément parent a une police de 20px, 1em dans un élément enfant sera équivalent à 20px. Cette unité est utile pour une mise à l’échelle proportionnelle à l’intérieur d’un élément spécifique.
ex : L’unité ex est basée sur la hauteur en x de la police actuelle, c’est-à-dire la hauteur de la lettre minuscule ‘x’. C’est moins couramment utilisé que em et rem, mais peut être utile pour un alignement vertical précis selon la police utilisée.
L’unité `%` en CSS définit la taille d’un élément en pourcentage de son conteneur parent. Elle est idéale pour des designs responsifs, adaptant la taille d’un élément à différents écrans ou fenêtres. Et idéal pour adapter l’interlignage des textes.
Calc()
La valeur ‘fonction’ CSS calc() est un outil puissant et polyvalent qui permet de réaliser des calculs directement dans les feuilles de style CSS.
Cette fonction est particulièrement utile pour mélanger différentes unités de mesure ou pour définir des valeurs de propriétés de manière plus dynamique et contextuelle.
La syntaxe de calc() permet d’effectuer des opérations arithmétiques de base telles que l’addition, la soustraction, la multiplication et la division.
Par exemple, width: calc(100% - 50px); permet de définir une largeur qui est 100% de l’espace parent moins 50 pixels.
Ce type de calcul est extrêmement utile pour créer des mises en page réactives et précises, car elle adapte automatiquement les dimensions en fonction des autres éléments ou des proportions de l’écran.
Clamp()
La valeur ‘fonction’ CSS clamp() est un outil remarquable qui offre aux designers une approche dynamique et flexible pour définir les valeurs des propriétés CSS, particulièrement utile pour la typographie et la conception de mise en page adaptatives.
Clamp() sert d’alternative plus avancée aux unités fixes ou basées (uniquement) sur le viewport.
La syntaxe de clamp() est clamp(min, préféré, max). Ici, min indique la valeur minimale que la propriété peut prendre, préféré représente la valeur idéale qui est souvent une unité fluide comme la largeur du viewport (vw), et max établit la limite supérieure.
Cette fonction utilisée en typographie, permet d’ajuster les tailles de police de manière réactive.
Par exemple,
font-size: clamp(1rem, 2vw, 2rem);
assure que la taille de police évolue en douceur entre 1rem et 2rem, en fonction de la largeur du viewport, mais ne dépasse jamais ces limites.
Clamp() permet une conception adaptable qui maintient l’accessibilité et l’esthétique sur une gamme de tailles d’appareils, améliorant l’expérience utilisateur globale dans un produit numérique.
