18041 sujets

Questions générales et questions de débutants

Taille police responsive

Bonjour,

Je viens recueillir des avis sur une la taille de polices lorsque l'on fait du responsive.

Je travaille sur une maquette responsive et je fait du mobile first, donc du plus petit au plus grand.

J'ai 3 breakpoints (768px, 1280px et 1920px). J'ai 4 fichiers css (mobile.css, tablet.css (768px), tablet2.css (1280px) et desktop.css(1920px)).

Je suis complètement perdu pour ce qui est de la taille du texte et les bonnes pratiques.

Y-a-t-il une façon d'agrandir la taille du texte en changeant seulement le font-size de body dans chaque media-query? Faut-il définir une font-size pour html? Utiliser vous le rem?

Comment feriez-vous pour gérer la taille des polices en responsive avec la méthode mobie first?

Merci Smiley smile
allan00958 a écrit :
Y-a-t-il une façon d'agrandir la taille du texte en changeant seulement le font-size de body dans chaque media-query?

Oui, mais à condition d'utiliser une unité relative comme les em ou %. Si tu as tout défini en px ce n'est pas possible.

Et apparemment les rem fonctionnent relativement à la taille définie sur l'élément html. Personnellement je préfère les em qui permettent un peu plus de choses.

PS : tes breakpoint sont immenses, les résolutions supérieures à 1920 ça court pas les rues
@bzh

Donc prenons un example avec mes 4 breakpoints.

J'ai un paragraphe qui devient de plus en plus grand. Donc sur le body au départ, je mets quoi?

body {font-size: 100%} ou moins 62.5% ou 50% ?
p {font-size: 1em};

J'ai besoin d'un exemple concret pour comprendre.

Ou sinon, partagez vos techniques/habitudes....
allan00958 a écrit :
@bzh

Donc prenons un example avec mes 4 breakpoints.

J'ai un paragraphe qui devient de plus en plus grand. Donc sur le body au départ, je mets quoi?

body {font-size: 100%} ou moins 62.5% ou 50% ?
p {font-size: 1em};

J'ai besoin d'un exemple concret pour comprendre.

Ou sinon, partagez vos techniques/habitudes....


Certains définissent une taille moindre sur le body comme 62,5% pour ensuite avoir un rapport 1em = 10px qui rend les calculs plus simple pour le style de base. Je n'aime pas cette technique car la typo de base est du coup assez petite et si on oublie de définir un style pour telle ou telle balise celle-ci aura alors une taille trop faible. Perso, je prend comme référence la taille du texte de base qui est généralement la plus petite. Donc si mon corps de texte est 15px, je vais définir un truc comme :

body {font-size: 95%}


Ensuite il suffit de redéfinir la taille du texte sur le body pour agrandir/réduire globalement le texte dans tes medias queries. Là, encore une fois je me fie au texte de base et ensuite je réadapte éventuellement certains éléments en écrasant directement les valeurs en em définie sur ces balises (car tout ne s'agrandit pas toujours miraculeusement à la bonne taille Smiley cligne ).

Autrement je défini toutes les typos à part des autres styles de mise en forme ce qui simplifie grandement ce travail.
Modifié par bzh (04 Jul 2016 - 20:43)
La technique de mettre une font size sur le body (font-size:65% = 10px) - préconisée à une époque - n'est plus guère employée, et même à éviter : certaines personnes ont écrit à ce sujet (je ne me souviens plus des références que j'ai lu alors, c'était il y a au moins deux ans) et j'ai personnellement rencontré des bug au chargement des pages avec Chrome sous certaines conditions de test.

Et puis le pixel a fait son temps...

Autre point : je ne paramètre toujours mes media queries en unités rem, cela me permet de garder mon design intact si l'utilisateur prend l'idée de zoomer dans ses préférences.

Sinon pour l'emploi de font-size pour zoomer : c'est la technique que j'emploie couramment (cf. cette page web dédiée au zoom en font-size), mais il faut alors que tous les éléments enfants aient été définis en unités relatives, sinon cela ne fonctionnera pas (dixit le commentaire de bzh).
Modifié par Olivier C (05 Jul 2016 - 13:13)
Administrateur
Olivier C a écrit :
La technique de mettre une font size sur le body (font-size:65% = 10px) - préconisée à une époque - n'est plus guère employée, et même à éviter : certaines personnes ont écrit à ce sujet (je ne me souviens plus des références que j'ai lu alors, c'était il y a au moins deux ans) et j'ai personnellement rencontré des bug au chargement des pages avec Chrome sous certaines conditions de test.

Hello Olivier,

Je suis très curieux de trouver des vraies références concernant les éventuels problèmes de la technique du 62.5% (que nous apprécions énormément chez nous). Aux dernières nouvelles, je n'en ai toujours pas trouvé de convaincantes, par exemple dans cette discussion récente : https://github.com/alsacreations/KNACSS/issues/186#issuecomment-187164487

PS : nous parlons bien évidemment du font-size 62.5% sur html et non sur body, afin de pouvoir utiliser très facilement des unités rem par la suite.
@Raphael : oui oui, 62,5% sur le tag html pardon, ça fait un bail que j'ai mis cette technique de côté du coup de perd un peu le fil...

Tiens, je viens de retrouver le code que j'utilisais exactement :
html {
  font-size: 62.5%;
  font-size: calc(1em * 0.625); /* ça c'est pour IE... */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}


Pour la bibliographie j'ai oublié aussi mais se sont surtout mes propres bugs qui m'ont fait remettre en cause : de mémoire sous Chrome au chargement d'une page, quand il y a du lag réseau ("saut" de page) et sous d'autres conditions de test que j'ai oublié mais où le layout était explosé et revenait à la normale si resize de la taille de la fenettre Smiley eek

Bref je suis passé à autre chose...
Modifié par Olivier C (05 Jul 2016 - 13:37)
Administrateur
Olivier C a écrit :
de mémoire sous Chrome au chargement d'une page, quand il y a du lag réseau ("saut" de page) et sous d'autres conditions de test que j'ai oublié mais où le layout était explosé et revenait à la normale si resize de la taille de la fenettre Smiley eek

C'est justement ce genre de cas concret que j'aimerais retrouver, car nous n'avons justement jamais rencontré ce type de désagréments.

Dans ton cas, cela pourrait provenir du text-size-adjust ou d'un polyfill JS ou bien d'autres choses encore.
Le seul contexte de bug que je me souvienne est celui où le site était ouvert à partir d'un iframe, à partir du site CodePen par exemple. Bon, ce n'est pas un retour intéressant dans la mesure où l'ouverture d'une fenêtre dans un iframe... en 2016...

J'avais d'autres bugs bien plus spécifiques pour lesquelles le layout pétait une fois sur deux, c'était ça le pire : ce n'était pas systématique. Mais là... no souvenance, juste de quoi entretenir le mystère (ou le troll c'est selon). Promis : si je mets la main dessus à l'occasion je te redonnerais le contexte. Mais pour cela il faudrait que je fouille parmi mes archives vieilles de deux ans au moins et surtout les remettre en service pour tester (en admettant que j'ai gardé le code en question), alors bon...

Raphael a écrit :
Dans ton cas, cela pourrait provenir du text-size-adjust ou d'un polyfill JS ou bien d'autres choses encore.

La piste d'un mic mac avec le js n'est effectivement pas à écarter... à l'époque j'utilisais pas mal Isotope dans mes templates. Cependant pas sur les pages concernées par les bugs il me semble...

Mais comme je le disais tantôt je ne me sens plus vraiment concerné par ce problème étant donné que pour moi cette pratique est révolue. En effet, reste le désagrément du "saut" de page : un recalcul de la page que j'ai pu constater assez fréquemment sur les réseaux à faible débit, sur un premier chargement de la feuille de style par le terminal. Et ça pour moi ce fut suffisamment rédhibitoire pour passer à autre chose.
Modifié par Olivier C (05 Jul 2016 - 18:29)
Administrateur
Merci pour ton retour.

J'ai en profité pour écrire un billet de blog : https://blog.goetter.fr/2016/07/05/lastuce-du-font-size-62-5-oui-non-ou-ca-depend/

Du coup, si tu veux poursuivre la discussion là bas plutôt que l'on parasite ce topic (désolé Smiley sweatdrop ), tu es le bienvenu !

Olivier C a écrit :
Et ça pour moi ce fut suffisant rédhibitoire pour passer à autre chose.

Et le "autre chose" m'intéresse aussi Smiley cligne
Modifié par Raphael (05 Jul 2016 - 17:03)
@Raphael et du coup tu es obligé de définir tout les styles avec la technique des 62.5% car la font par défaut est minuscule, non ? Pour moi c'est le gros défaut de cette technique qui n'est rien d'autre qu'un reset au final.

Après je ne fais jamais les calculs pour faire la conversion entre les tailles des typos et les css et par conséquent je ne pense pas du tout en taille de pixel mais uniquement en em.
Administrateur
bzh a écrit :
@Raphael et du coup tu es obligé de définir tout les styles avec la technique des 62.5% car la font par défaut est minuscule, non ? Pour moi c'est le gros défaut de cette technique qui n'est rien d'autre qu'un reset au final.

Non non justement, j'en parle dans mon billet (url ci-dessus)
Bonsoir,
Petite question :
Pourquoi pas partir d'un font-size:x-small, il semble être équivalent à 10px;
Sujet clos
Aller à