Polices de caractères responsives

bonjour,

sur les design en RWD, on se heurte souvent sur le fait de la taille des polices de caractère (notamment pour les titres) qui ne s'adapte pas en fonction de la taille du fluid-design.

J'ai trouvé cet outil http://fittextjs.com/ sur le net, mais je suis pas convaincu.

Je pensais expérimenter un jeu de media queries supplémentaires et parallèles dans ma feuille de style, uniquement pour les tailles de caractères.

par exemple ma feuille de style a 2 points de rupture (3 zones) pour le design et elle pourrait avoir 5 ou 6 points de rupture pour le texte afin de mieux gérer les changement de taille des titres.

est ce que cela vous parait idiot?

merci

Je pense que c'est un peu dangeureux et avec trop de point de changements tu risque de donner le mal de mer à tes visiteurs Trop de responsive tue le responsive

Il vaut mieux que tu joues sur des valeurs relatives telles que "em" pour déterminer tes tailles de polices de caractères et en suite avec les média queries et tes deux break-points tu fais varier leur taille.

exemple:

body {
    font-size: 100%; /* start with a flexible baseline, more on this in the next section */
}
 
h1 {
    font-size: 2.5em;
}
 
@media screen and (max-width: 50em) {
    h1 {
        font-size:2em;
    }
}
 
@media screen and (max-width: 40em) {
    h1 {
        font-size:1.5em;
    }
}
 
@media screen and (max-width: 30em) {
    h1 {
        font-size:1.2em;
    }
}

j'ai lu un billet il y a deux jours sur ce sujet je te mets le lien en dessous, il te donne toutes les possibilités pour un texte responsive :

Clique ici pour voir l'article

voilà j'espère que j'ai pu t'éclairer

merci peter, j'irai lire le post que tu cites.

Par contre j'ai fait un essai, ça marche très bien..

la partie générale de mon css a 2 points de rupture (600 et 1000px) et à la fin du fichier j'ai rajouté des media queries pour les textes de mon header avec 4 points de rupture (430, 600, 800 et 1000: les 2 premières tranches coupées en deux parties et la dernière tranche inchangée) et ça marche très bien.

Le problème c'est que par exemple dans un contexte smartphone 320x480px, en position verticale dans ton header si tu mets une image à coté d'un texte, ça va. Mais dès que tu retourne le smartphone en position horizontale, le texte devient tout petit, noyé dans le fond et c'est horrible.
En faisant comme j'ai fait, je peux donner plus de taille à la police de mon titre en position horizontale. Idem pour les tablettes.

Les valeurs relatives em n'y changeront rien, elles sont définies en fonction de la taille de base de la police. Elles ne feront pas varier la taille de la police dans le cas d'un design fluide...

salut,
il n'y a pas énormément d'alternatives pour ce que tu veux faire. Il existe toutes fois les viewport units qui ne sont pas encore très bien implémentés mais tu feras profiter ceux qui les comprennent.

mais comme j'ai fait ça va extrêmement bien.

j'ai juste rajouté ça en plus à la fin de mon CSS, c'est pas la mort!

/* --------------------------------- */
/* Zones de texte de l'entête  */
/* --------------------------------- */
@media only screen and (max-width:430px) {  
 /* mobile vertical  */
	header hgroup h1	{ font-size:23px; }
	header hgroup h2	{ font-size:14px; }
	header p.sub-title	{  clear:both; font-size:14px; text-align:right; margin-right:6%; }
}

@media only screen and (min-width:431px) and (max-width:599px) { 
 /* mobile horizontal  */
	header hgroup h1	{ font-size:34px; }
	header hgroup h2	{ font-size:18px;  }
	header p.sub-title	{ clear:none; float:right; margin-right:6%; font-size:16px;  }
}

@media only screen and (min-width:600px) and (max-width:799px) { 
 /* tablette start  */
	header hgroup h1	{ font-size:34px; }
	header hgroup h2	{ font-size:18px;  }
	header p.sub-title	{ clear:none; font-size:14px;  }
}

@media only screen and (min-width:800px) and (max-width:999px) { 
 /* tablette  end */
	header hgroup h1	{ font-size:44px; }
	header hgroup h2	{ font-size:28px;  }
	header p.sub-title	{ clear:none; font-size:20px;  }
}

Bonsoir,

n'est-il pas plus simple de changer le font-size de body ?

quand au multiple point de rupture, à moins que le visiteur joue avec sa fenêtre , il y a peu de chance qu'il se rende comptent que la taille de police peut varier.

D'un autre coté , petit écran ne veut pas forcement dire police plus petite au risque de ne plus pouvoir lire les textes sur un smartphone ou ne pas pouvoir cliquer sur le un lien parmi d'autres
++.

Bonjour

@peter

Merci pour ton lien.... très interessant article

Cordialement