Letter block set in box, Markus Spiske on Unsplash Letter block set in box, Markus Spiske on Unsplash

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.

Breakpoint: 1200 360 768 value (px) viewport width (px) 10 20 30 40 50 200 400 600 800 1000 1200 1400 1600 1800 20 20 20 20 16 Base value: 16 16 16 ~27 ~34 40 ~24 ~27 30 ~31 ~40 50 30 40 50

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 de rem et peut entraîner des résultats non désirés.
  • Utilisez toujours des valeurs relatives pour la propriété line-height (avec em 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.