Analyse de votre proposition

Votre formule font-size: clamp(14px, 0.9rem + 0.5vw, 20px); est une excellente approche moderne pour le design responsive.

Cependant, sur une grande tablette, l'utilisation de l'unité vw (qui dépend de la largeur totale de la fenêtre) fait grandir le texte un peu trop rapidement, ce qui explique pourquoi vous le trouvez trop grand.

Proposition optimisée

Pour garantir une lisibilité parfaite et universelle sur tous les types d'écrans (du smartphone à la grande tablette, jusqu'au moniteur de bureau), voici une alternative plus équilibrée :

font-size: clamp(0.9rem, 0.8rem + 0.35vw, 1.15rem);

Pourquoi cette formule fonctionne mieux ?

• Valeur minimale (0.9rem) : Empêche le texte de devenir illisible sur les petits écrans tout en respectant les préférences de zoom de l'utilisateur.
• Valeur fluide (0.8rem + 0.35vw) : Réduit l'impact de la largeur de l'écran (0.35vw au lieu de 0.5vw), ce qui évite l'effet "caractères trop gros" sur les tablettes.
• Valeur maximale (1.15rem) : Bloque la taille maximale pour que les textes gardent une proportion harmonieuse et élégante sur les très grands écrans.

Alternative moderne (Requêtes de conteneur)

Si vous appliquez cette taille à un composant spécifique (une carte, un bloc de texte), vous pouvez utiliser les unités de conteneur (cqi) qui s'adaptent à la taille du bloc parent plutôt qu'à celle de tout l'écran :

font-size: clamp(0.9rem, 0.8rem + 0.5cqi, 1.15rem);

Souhaitez-vous adapter ce réglage pour un type d'élément en particulier, comme un titre ou un paragraphe de texte ?