Calculateur de taille de police fluide

Définir la transition de taille

1. Entrez des largeurs de fenêtre plus petites et plus grandes en pixels CSS, espacées d'au moins 100px, ainsi que la taille de police pour chaque largeur. Les tailles peuvent augmenter, diminuer ou rester constantes. Indiquez les pixels CSS supposés par rem.
2. Inspectez la déclaration actuelle et la table des points de terminaison. Modifiez la largeur de test du modèle pour inspecter un autre point ; cela modifie le spécimen de modèle sans modifier le CSS copié ni prétendre que la carte est une fenêtre d'affichage.
3. Copiez CSS et testez-le sur un élément non racine dans la page de réception. Sa taille réelle de racine, sa fenêtre d'affichage, sa police et son comportement de zoom sont importants. Le refus du Presse-papiers vous permet de sélectionner manuellement la même déclaration.

Comprendre l'expression

La calculatrice divise la différence font-size par la différence de largeur de fenêtre pour obtenir une pente. Il multiplie cette pente par 100 pour le terme vw, puis convertit les limites de décalage et de taille numérique en rem en utilisant votre racine supposée.

Les valeurs plus petites et plus grandes décrivent les largeurs de fenêtre, pas nécessairement les tailles de police. Un plan décroissant utilise un coefficient de fenêtre d'affichage négatif avec des limites clamp ordonnées numériquement. Des tailles de police égales produisent une déclaration de constante rem plus simple.

Les coefficients sont arrondis à six décimales ; les valeurs exactement à mi-chemin sont arrondies en s’éloignant de zéro. Le tableau et l’aperçu utilisent les coefficients copiés et peuvent donc différer légèrement de l’interpolation idéale. Les résultats en pixels affichent trois décimales et signalent les arrondis.

La taille racine est une hypothèse de conversion. Une racine différente sur la page de destination peut modifier les limites du texte et les largeurs de transition. rem se rapporte à la racine du document et vw à la fenêtre ; modifier la largeur ou la police d’un div ordinaire ne les simule pas.

Exemples croissants, décroissants et arrondis

La conception par défaut utilise 16 px dans une fenêtre de 320 px et 32 ​​px à 1 600 px, en supposant une racine de 16 px. Il produit clamp(1rem, calc(0.75rem + 1.25vw), 2rem), avec une taille modélisée d'exactement 24 px à 960 px.

L'inversion de ces tailles de points de terminaison produit clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Les deux limites restent ordonnées numériquement. La saisie de 20 px dans les deux largeurs produit à la place font-size: 1.25rem; sous la même racine supposée.

Pour 17px à 360px et 23px à 1280px, les coefficients arrondis à six décimales donnent 17,0000024px à la première largeur et 20,0000028px au milieu du modèle copié. Le tableau arrondit ces valeurs et ne prétend pas atteindre exactement les extrémités.

Limites de création et de modèle

Les largeurs de fenêtre sont des nombres entiers compris entre 240 et 3 840 pixels CSS, espacés d'au moins 100px. Les tailles de police sont comprises entre 1 et 256 pixels CSS et les tailles de racine supposées sont comprises entre 8 et 32 ​​pixels CSS par rem, avec jusqu'à deux décimales. Les signes, les unités dans les champs, les regroupements, les exposants et les excès de précision sont rejetés plutôt que corrigés en silence.

L’outil crée une déclaration font-size pour un élément autre que la racine, avec rem et vw. Il n’importe pas de CSS arbitraire, ne crée pas d’échelle typographique, n’utilise pas d’unités de conteneur, ne transmet pas de polices et ne modifie pas les styles racine. La limite d’erreur concerne le modèle arithmétique fini, pas la rastérisation du navigateur.

L’aperçu utilise la taille calculée en pixels et passe à la ligne dans la carte. Il ne simule pas une fenêtre et ne prouve pas que le CSS produira le même résultat sur votre page. La police, la racine, la fenêtre et la précision du navigateur peuvent modifier le résultat.

Les unités mixtes rem et viewport ne prouvent pas automatiquement le redimensionnement du texte accessible. Testez la page de réception avec le texte du navigateur et les paramètres de zoom. L'outil ne fournit pas de badge universel WCAG, de promesse de correspondance de pixels fixe ou de doublement garanti de la police avec un zoom de 200 %.

Création numérique locale sans paramètres enregistrés

L’outil ne transmet pas les valeurs, ne demande pas de polices distantes, ne conserve pas de brouillons, ne crée pas de liens contenant les réglages et n’ajoute pas de télémétrie contenant les valeurs. La copie est déclenchée par l’utilisateur. Les services existants, les extensions et les copies conservées ne sont pas couverts par une promesse universelle de confidentialité ou d’effacement.