

Tailles de police responsive automatisées avec RFS
La gestion des polices responsives s'est beaucoup simplifiée. Avec entre autres les médias queries, les fonctions css ou les unités proportionnelles, nous disposons d'un panel de techniques très pratique. Il ne manquait qu'un système de redimensionnement automatique et bonne nouvelle, c'est exactement ce que fait RFS.
Passez à l'automatique
RFS est un moteur de redimensionnement d'unité initialement développé pour redimensionner les tailles de polices d'où son nom « Responsive Font Size ». RFS est capable de redimensionner toutes les propriétés css ayant des valeurs avec des unités.
Le fonctionnement de RFS est basé sur la taille du viewport, la partie de l'écran
visible par l'internaute. Il suffit de définir la taille de la police en mode desktop
et l'algorithme calcule les tailles adaptées pour les écrans plus petits.
Avec RFS, Les tailles de police restent toujours liées les unes avec les autres et
sont mises à l'échelle correctement, ce qui empêche les comportements indésirables.
RFS est compatible avec tous les navigateurs qui supportent les media queries et les unités relatives au viewport.
Visualisation du fonctionnement
Avec ce graphique on comprend mieux le fonctionnement de RFS. Seules les valeurs supérieures à la valeur de base sont redimensionnées.
Installation
RFS est disponible dans plusieurs versions : Sass, Less, Stylus ou PostCSS. Pour ma part c'est la version Sass (Scss) qui m'intéresse.
J'installe le package avec Yarn.
$ yarn add rfs
J'importe RFS dans mon fichier centralisateur styles.scss.
// styles.scss
@import '../node_modules/rfs/scss';
Configuration
RFS fonctionne « out of the box », sans aucune modification de configuration. Néanmoins il y a deux options qui me semblent importantes à adapter selon votre configuration.
Option base-value
C'est la taille minimale sous laquelle aucun redimensionnement de taille de police
n'aura lieu.
Cette option accepte des valeurs en px
ou rem
. La valeur par
défaut est 1.25rem
.
Option breakpoint
Au-dessus de cette valeur du point d'arrêt, la taille de police restera égale à la
taille que vous avez transmise à RFS. En dessous, la taille de police sera mise à
l'échelle dynamiquement.
Cette option accepte des valeurs en px
, em
ou
rem
. La valeur par défaut est 1200px
.
Exemple de configuration.
// _variables.scss
/* RFS base-value */
$rfs-base-value: 1.125rem;
/* RFS breakpoint */
$rfs-breakpoint: 1200px;
Utilisation
Saisie de valeur en scss. On apelle RFS comme un mixin avec @include
.
/* fichier SCSS */
.title {
@include font-size(4rem);
}
CSS générée.
/* fichier CSS */
.title {
font-size: calc(1.525rem + 3.3vw);
}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}
Bonnes pratiques
-
N'utilisez pas RFS avec l'élément
html
car cela modifie la valeur derem
et peut entraîner des résultats non désirés. -
Utilisez toujours des valeurs relatives pour la propriété
line-height
(avecem
ou sans unité) pour éviter des problèmes d'interligne avec les tailles de police.
Toutes les informations utiles sur RFS sont disponibles le RFS GitHub.