Une formule pour des tailles de police responsives

• De nombreux sites web comme le New York Times, Medium et Substack utilisent des breakpoints (comme 768px) pour changer la taille de la police selon ce seuil (1.125 rem et 1.25rem)
• Avec calc en CSS, on peut écrire des valeurs similaires : calc(1.0625rem + 0.2604vw)
• En arrondissant, cela peut s’écrire 1rem + 0.25vw. J’utilise donc désormais le CSS ci-dessous sur la plupart des sites web

:root {  
  font-size: calc(1rem + 0.25vw);  
}  

[yanggitak]

Pour obtenir une implémentation identique à la maquette sur PC, il me semble qu’il faudrait aussi inclure dans la formule une variable CSS qui exclut la largeur de la barre de défilement. Si je ne me trompe pas, l’unité vw est calculée sur une largeur qui inclut aussi la barre de défilement.

S’il faut faire varier à l’identique, dans les mêmes proportions, jusqu’aux marges des éléments autour comme sur l’image complète, la méthode de réglage des polices du site ci-dessous peut aussi être une bonne référence. Dans le cas d’un Galaxy Fold (320px) ou d’un moniteur haute résolution, il peut aussi être pertinent de poser des limites appropriées avec des breakpoints.
https://amerimnos.github.io/coding-playground/reponsive-css-trick-vw/

[cometkim]

C’est une approximation utile, mais elle remplace difficilement complètement les breakpoints réellement utilisés en Fluid Typography.

En général, clamp(min_rem, calc_relative_vw, max_rem) s’applique différemment selon les breakpoints, en fonction de la lisibilité du contenu et de la forme du conteneur ; si l’on essaie de tout gérer avec une seule formule, il devient difficile de prendre en charge des form factors peu courants.

Par exemple, des environnements comme les fenêtres pop-up d’Android, les moniteurs 21:9 ou les HMD

[nemorize]

Je ne connais pas très bien les pop-ups Android ou les HMD, mais...
Pour des formats comme le 21:9, ce ne serait pas pas mal d’utiliser aussi vh ?
Quelque chose dans l’esprit de calc(1rem + min(1vw, 1vh) * 0.25), par exemple.