Échelle typographique et police fluide (clamp)

Échelle typographique et police fluide (clamp): à quoi ça sert

Choisissez la taille de base et le rapport (de la seconde mineure au nombre d’or) pour le mobile et pour l’ordinateur, ainsi que les largeurs d’écran de chacun. L’outil calcule les tailles de h1, h2, h3, h4, h5, texte et petit sur les deux écrans et construit le clamp() de chacune, en rem.

L’aperçu affiche votre texte à chaque taille, sur mobile ou sur ordinateur, et le CSS sort avec des variables prêtes à l’emploi.

Mode d’emploi

1. Choisissez la base et le rapport pour mobile et ordinateur.
2. Vérifiez l’aperçu de chaque niveau.
3. Copiez les variables CSS.

Quand l’utiliser

• Définir les tailles de police d’un nouveau site.
• Des titres qui s’adaptent au mobile sans media queries.
• Créer la typographie d’un système de design.

Questions fréquentes

Qu’est-ce qu’une échelle typographique ?

C’est une suite de tailles où chacune est la précédente multipliée par le même rapport, comme 1,25 (tierce majeure). Les titres restent proportionnés entre eux et le site paraît mieux organisé qu’avec des tailles choisies au hasard.

Comment fonctionne clamp() ?

clamp(minimum, préféré, maximum) laisse la police grandir avec la largeur de l’écran (la valeur préférée utilise vw) sans dépasser les limites. Un titre a ainsi une taille sur mobile et une autre sur ordinateur, sans media queries.

Pourquoi utiliser rem ?

En rem, les tailles respectent le réglage de taille de police du navigateur de la personne, ce qui est important pour ceux qui agrandissent les lettres pour mieux lire. L’outil utilise 1rem = 16px.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires