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!
Un peu d’histoire…
Heureusement, est loin le temps du Courrier et du Times! Aujourd’hui, un designer peut utiliser les mêmes typos qu’il utilise en édition ou en vidéo.
Jusque dans les années 2000, il était impossible (ou compliqué et lourd) d’utiliser autre chose que les typographies fournies dans les systèmes d’exploitation de l’appareil de consultation (Mac/Win…).
Longtemps les designers furent limités à des choix typographiques minimaux (à savoir Arial, courrier, Times voire Trebuchet et Verdana…) ou à remplacer des “accroches” par des images bitmap (gif, png, jpg) ou autres ruses (flash?) rendant le contenu peu accessible et difficile à éditer.
La W3C a dès lors décidé de diviser les CSS (et HTML) en modules permettant une évolution plus rapide et parallèle des spécifications (et de leur implémentations dans les navigateurs et systèmes).
Utiliser des polices personnalisées
CSS/HTML permettent donc d’appeler une ressource de police de caractère pour en faire un rendu graphique plus élaboré typographiquement, sans toutefois changer le “sens” du texte, son contenu, sa valeur…
Pour être tout à fait clair, la substitution typographique est uniquement visuelle et ne change en aucune façon le contenu. Oui, c’est le principe de base d’HTML (l’accessibilité) et des CSS qui est une sur-couche de “représentation” (Design!). Et c’est important!
D’ailleurs , si votre bande passante est cracra 💩, vous pourrez toujours voir le contenu avec une typographie standard, juste avant que le navigateur ne ‘substitue’ la police… Et si vous êtes mal voyant, le texte sera interprété en braille ou lu par les “Assistive Devices” que vous utilisez.
Un réflexe de base est d’utiliser, dans votre code, l’appel de votre provider de police, usuellement google fonts —pour les béotiens de la typo— et souvent un des choix par défaut dans beaucoup d’outils SAAS/CMS (dont WordPress).
Ce qui donne en CSS, le code ci-après.
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,100,300;0,100,800;0,83.9,800;1,83.9,717&display=swap');
/* Local "Google" Fonts */
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Open Sans';
src:
local('Open Sans'), local('OpenSans'),
url('/wp-content/themes/folder/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
url('/wp-content/themes/folder/assets/fonts/Open_Sans/OpenSans-VariableFont_wdth,wght.woff2') format('woff2-variations'); /* old soon obsolete rule */
font-weight: 300 800;
font-stretch: 75% 100%;
font-style: normal;
font-display:swap;
}
@font-face {
font-family: 'Open Sans';
src:
local('Open Sans'), local('OpenSans'),
url('/wp-content/themes/folder/assets/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2 supports variations'),
url('/wp-content/themes/folder/assets/fonts/Open_Sans/OpenSans-Italic-VariableFont_wdth,wght.woff2') format('woff2-variations');/* old soon obsolete rule */
font-weight: 300 800;
font-stretch: 75% 100%;
font-style: italic;
font-display:swap;
}
}
* 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.
C’est un bon début pour tester mais certainement pas en production.
Pourquoi?
Cela implique de sortir de votre domaine (votre nom de domaine) pour appeler des ressources ‘externes’ (hébergées par Google ou autre provider de polices/fonts, c’est la première partie de l’argument @import url:. Ceci implique donc :
- des validations DNS en amont et/ou en captation de cookies. Pas très réaliste, et compliqué du point de vue du RGDP, qui demande des validations régulières pour les réseaux externes.
- et, de plus, cela induit des latences réseau.
Polices Auto-Hébergées
Ou, vous hébergez vos polices personnalisées sur votre serveur. Et on en parle plus 🙂
Les fondeurs de polices proposent la possibilité de télécharger une version ‘web’ de leur font, selon la licence (à vérifier). Vous pouvez ensuite les placer sur votre serveur FTP.
- Idéalement vos polices sont en cache.
Et appel des polices
Ensuite on appeller la police. Ici, j’utilise des variables CSS pour pouvoir gérer différentes polices selon l’entité HTML utilisée (ici Font Awesome pour les icônes, et Open Sans et ses fallback selon les systèmes…).
/* Type */
/* DVW Design set */
/*--font-dvwdesign-set: 'Source Sans Pro', "Helvetica Neue", Helvetica, Arial, sans-serif;*/
--font-main-standard: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-special-set: "Font Awesome 5 Free";
Explications
Rappel: Ici, j’utilise des variables CSS pour pouvoir appeler différentes polices et/ou différentes valeurs CSS, selon l’entité HTML utilisée.
Typo Responsive
Dans le code ci-aprè, 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 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 da 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.
Calc()
La 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 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.
Calc() ouvre donc la porte à des conceptions plus flexibles et adaptatives, facilitant la création de designs réactifs et personnalisés qui répondent aux besoins spécifiques de chaque contexte d’affichage.
Clamp()
La 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 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.
