1307 sujets

Web Mobile et responsive web design

Bonjour à tous,

Auriez-vous quelques articles au sujet des méthodologies pour styler (en terme de taille) les fontes ?

Les graphistes — parfois issus d'une autre boite — (et parfois même d'une autre planète) fournissent majoritairement des maquettes à des "breakpoint" donnés, des clients exigent souvent du "pixel perfect", bien qu'il faille les éduquer sur le fait qu'il existe une diversité de périphérique et que le lâcher prise s'impose, certains compromis ne sont pas possibles.

exemple :
- une ligne de texte qui ne doit pas passer à la ligne.
- 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)

J'aimerai revoir mes techniques sur les méthodes pour styler les textes sur les résolutions intermédiaires aux "breakpoint" des maquettes, et je cherche des méthodes actuelles.

(Les articles/tuto/méthodologies en anglais conviennent aussi)

Pour des raisons d'accessibilité, les techniques basées sur des tailles fixées en pixel (ou tout autre unité fixe) ne m'intéressent pas.
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)
Meilleure solution
Administrateur
Depassage a écrit :
- 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.

Hello,

Pour ce point précis, il existe une astuce avec calc :
h1 {
  font-size: calc(4.5vw + 2rem)
}

Grâce à cette astuce, le titre h1 aura toujours une taille minimale de 2rem même si la fenêtre est minuscule.