Quelle augmentation pour la taille des textes ?

Bonjour,
j'ai cherché un peu sur le forum mais n'ai pas trouvé la réponse à cette question, peut-être n'est-elle pas si basique que ça ...

J'essaye d'adapter un site (dont les tailles de fontes sont en em) en responsive ; j'ai cru comprendre qu'il fallait augmenter la taille des textes pour les résolutions plus faibles mais y a t-il un ordre d'idée pour ce faire ? Une fourchette ? & éventuellement des choses à ajouter pour que ça fonctionne bien sur la majorité des appareils (smartphones / tablettes) ?

Merci d'avance de vos éclairages.

Salut,

En fait, ça dépendra surtout de la police puisqu'elles n'ont pas toute la même taille. Alors, vas-y à l'oeil et selon ton sentiment. Tu verras bien en regardant sur ton téléphone si c'est lisible ou non.

L'utilité de l'unité em à ce niveau est de te permettre de seulement redéfinir la taille de police sur un élément parent pour affecter tous les enfants (par exemple, augmenter la taille sur body pour augmenter proportionnellement la taille de toutes les polices.)

En théorie c'est génial, mais en pratique, le problème est que tu risque de devoir réduire les polices de tes titres, et augmenter celle de ton texte courant... Alors, malheureusement, tu devras probablement redéfinir plusieurs taille au sein de tes media-queries.

Singularity a écrit :
j'ai cherché un peu sur le forum mais n'ai pas trouvé la réponse à cette question, peut-être n'est-elle pas si basique que ça ...

Je ne la trouve pas si basique que ça moi non plus.

Certains proposent de ne redimensionner le texte que pour certaine div, et non pour la totalité de la typo du site, ceci afin de ne pas remettre en cause tout le design. Je penche pour cette option. Mais pour celle-ci il faut tout de même que la font de base soit d'une taille suffisamment grande à la base.

Le truc c'est d'avoir la taille de base qui fait 1em et de ne surtout pas la réduire. Tu peux aussi utiliser des REM qui sont insensibles à l'héritage mais là ça fonctionne uniquement dans les navigateurs récents.

Merci à vous trois pour ces réponses.

@ Vaxilart : J'aurais dû préciser, je n'ai ni tablette ni smartphone à disposition (oui, je sais, il y a des émulateurs mais j'essaye de ne pas trop alourdir la chose).

Vaxilart a écrit :

L'utilité de l'unité em à ce niveau est de te permettre de seulement redéfinir la taille de police sur un élément parent pour affecter tous les enfants (par exemple, augmenter la taille sur body pour augmenter proportionnellement la taille de toutes les polices.)

En théorie c'est génial, mais en pratique, le problème est que tu risque de devoir réduire les polices de tes titres, et augmenter celle de ton texte courant... Alors, malheureusement, tu devras probablement redéfinir plusieurs taille au sein de tes media-queries.

Oui, c'est vrai, je n'y avais même pas pensé (ne modifier qu'au niveau de body). J'ai directement appliqué les modifications sur les éléments souhaités (& de toutes manières, certains textes de la même taille sur la version pc ne le seraient pas sur la version mobile donc ça me paraissait plus évident ainsi).

@ Olivier C : Je n'ai pas tellement de contrainte pour ce qui est du design, je peux augmenter tous les textes sans souci si nécessaire.

@ Patidou : Je ne connaissais pas les rem, merci. Pour les em, d'après toi un texte de contenu (hors titres donc) en 1em serait donc lisible sur mobile ? Sur ma version pc, je suis en 0.75em avec du verdana (ou une fonte semblable sans-serif).

Singularity a écrit :
@ Patidou : Je ne connaissais pas les rem, merci. Pour les em, d'après toi un texte de contenu (hors titres donc) en 1em serait donc lisible sur mobile ? Sur ma version pc, je suis en 0.75em avec du verdana (ou une fonte semblable sans-serif).

Déjà, ça dépend de la font-size par défaut de l'utilisateur. Quand tu mets 1em, chez moi, c'est 16px, ce que je trouve pas énorme, mais bien pour un device mobile. Perso, j'ai du 19px en version normale, en j'ai un MQ qui passe ça en 16px en-dessous de 800px de largeur. Autrement, c'est illisible à cause de la trop grande taille de police, il faut scroller comme un dingue.

Singularity a écrit :

@ Patidou : Je ne connaissais pas les rem, merci. Pour les em, d'après toi un texte de contenu (hors titres donc) en 1em serait donc lisible sur mobile ? Sur ma version pc, je suis en 0.75em avec du verdana (ou une fonte semblable sans-serif).

Même si verdana est une des fontes les plus lisibles en petites tailles, .75em ça me semble vraiment très peu. Mais bon, sans voir le site c'est difficile à dire…
Modifié par Patidou (01 Sep 2012 - 11:56)

Je crois que c'est comme c'était avant sur A List Apart, mais depuis, ils ont augmenté la font size.

Merci de vos réponses.

1em c'est aussi 16px chez moi. Du coup la Verdana 0.75em, ça correspondait à 12px. (et c'est pour la version pc)

Patidou : le site est celui renseigné sur mon profil (par contre, pour le moment, rien n'y est fait pour le côté responsive).