Un point sur les méthodologies pour les tailles de texte.

Salut,

les clients qui vont comparer le site aux maquettes autrement qu'a l'oeil nu c'est quand même pas la majorité. D'ailleurs ils ont souvent du mal à voir ce que cela va rendre dans le navigateur pour ce qui est de clients finaux. A mon avis c'est plus un délire d'intégrateur de faire du pixel perfect et personnellement je privilégie toujours le bon sens, la lisibilité et la cohérence graphique générale.

"rs459" a écrit :

- une ligne de texte qui ne doit pas passer à la ligne.

"rs459" a écrit :

- une bannière, un encart ou l'on souhaite garder les même proportions (texte/fond, rapport de contraste et texte qui doit rester dans les zones ou il est lisible)

Pour ce que tu demandes beaucoup de solutions peuvent convenir. J'ai pas d'article en particulier à te donner mais voilà ce que je fais généralement :

- La solution bête et méchante qui je pense est la plus utilisé est de définir la taille du texte pour chaque breakpoint. Si au moindres rétrécissement le texte se retrouve sur plusieurs ligne et que cela ne devient plus lisible c'est certainement qu'il y a un problème de conception au départ car la maquette ne prend pas en compte la spécificité du média en ne laissant pas suffisamment d'espace pour pouvoir permettre au texte de s'adapter un minimum.

- Pour afficher le texte en fonction du viewport tu as les unités relatives : https://css-tricks.com/viewport-sized-typography/. Ce n'est pas toujours la meilleure solution car parfois ton texte peut devenir minuscule et ne plus avoir l'impact escompté sur certaines résolution. Mais bien entendu tu peux toujours définir de nouvelles règles pour adapter sur les plus petites résolutions.

- Une autre possibilité est de couper le texte avec text-overflow: ellipsis; et overflow: hidden;. Parfois ça peut convenir pour des titres d'articles/des listes où seul un extrait est suffisant pour la compréhension.

- Pour le texte par dessus une image il faut parfois renforcer le contraste avec une ombre portée (text-shadow) ou a l'inverse diminuer/augmenter l'opacité du fond.

- Enfin parfois le plus logique est de laisser aller le texte sur plusieurs lignes. C'est même une bonne pratique que de toujours laisser la possibilité à un texte de l'agrandir, d'aller sur plusieurs ligne car la taille du texte peut varier en fonction des réglages navigateur de l'utilisateur final.

Parfois dans les maquettes on a la même image et le même lorem ispum (de 3/4 mots) collé pour tous les titres ce qui ne correspond pas à la réalité finale du site donc on se retrouve avec des problèmes de contraste, d'espaces ou de longueur de texte différents de l'original. Un chose importante est de sensibiliser les graphistes à ces contraintes pour qu'ils puissent anticiper le rendu de ce genre de choses.
Modifié par Depassage (01 Apr 2019 - 14:39)