Knacss et ses tailles de police

Bonjour messieurs,

de deux choses l'une :

1 - ce forum n'est pas le lieu ou a été conçu Knacss. Vous devez ce super outil a Raphaël Goetter, qui s'est donné la peine de créer un site dédié et publie dans son blog la moindre modification. Un commentaire sur cet outil serait donc bien plus approprié s'il était destiné à son auteur, qui aurait ainsi une chance de l'améliorer ou de vous expliquer.

2 - Il serait judicieux de lire le code en entier. Parce que vous avez ceci au tout début :

/* base font-size corresponds to 10px and is adapted to rem unit */
html {
	font-size: 62.5%;
}
body {
	background-color: #fff;
	color: #000;
	font-family: "Century Gothic", helvetica, arial, sans-serif;
	font-size: 1.4em; /* equiv 14px */
	line-height: 1.5; /* adapt to your design */
}

Le body est donc à 1.4em, et tous les calculs de contexte en em suivants se font donc d'après cette valeur.

C'est expliqué très clairement : le html à 62.5% est là en prévision du support de l'unité rem, dont le fonctionnement diffère des em. Les em sont calculés d'après le contexte hérité de la cascade, tandis que les rem seront systématiquement calculés d'après la racine html. Et dans la visite guidée de Knacss, il y a même un lien pour que tout le monde comprenne ce que sont les rem.

Et en bonus, le 3 - tu as mis le lien vers l'outil utilisé dans ta demande : http://soqr.fr/vertical-rhythm/
C'est ironique, non ?

Un peu de lecture sérieuse ne ferait pas de mal.
Modifié par Ten (23 Oct 2012 - 09:12)

Bonjour,

Merci de vos réponses, @Ten je sais que c'est Raphaël Goetter qui a développé Knacss et je le remercie.

Je pose cette question car j'étais perdu.

Ten a écrit :
tandis que les rem seront systématiquement calculés d'après la racine html

Justement là où j'étais perdu, c'est qu'il calcul d'après la racine html qui est à 62.5% = 10 px donc il ne prends pas racine sur le body qui lui est à 14px. Enfin je l'avais compris dans ce sens.

En tout cas merci beaucoup de m'avoir éclairci.

Hello,

J'ai une explication détaillée sur ce point dans cette page de tutoriel : http://knacss.com/demos/tutoriel.html

(voir partie "typographie")

Bonne journée

Bonjour,

pour ce qui est de la division de 10 par 14, tu peux t'arrêter à 3, 4 ou 5 chiffres significatifs Je te laisse calculer combien de millièmes de pixels représente le 6e chiffre après la virgule...

Pour ce qui est des éléments où l'on place 1.4em pour avoir 14px, c'est le choix de Raphael de le placer sur body, il a toujours préféré placer cela sur les éléments structurants (#footer, #sidebar, #header il y a quelques années ; body maintenant).

Perso, après avoir travaillé pendant des mois sur un projet où la base était 14px et avoir, à force, appris par coeur toutes les fractions entre 7/14e et 18/14e ... je ne jure que par 62.5% puis une cascade d'em réduite à RIEN avec p, li { font-size: 1.4em; } li li { font-size: 1em } et cie. Reste à gérer les label et input dans un p par exemple quand ils ne font pas 14 px mais ce ne sont que quelques cas, toujours les mêmes et tout le reste est simple... Perso ça me va
En LESS, je précise html { font-size: 100%; } puis j'ai une fonction pour n'avoir à calculer AUCUNE taille d'éléments qu'il soit bloc ... ou inline n'ayant pas la taille de leur parent de type block... J'indique la taille de police voulue en px, optionnellement la taille du parent si ce n'est pas 16px/1em :
- cas général : pour avoir un p de 14px , je tape juste .px(14) puisque le parent div a une taille de police de 16px et l'instruction CSS sera "font-size: 0.875em;"
- cas particulier (assez rare) : pour un label de 13px dans un p de 14px, je tape .px(13, 14) et plop mon instruction CSS sera "font-size: 0.9286em;".
Modifié par Felipe (23 Feb 2013 - 10:17)

Je te remercie pour ta réponse, oui effectivement 4 chiffres significatifs semblent suffisant.

Felipe a écrit :

Pour ce qui est des éléments où l'on place 1.4em pour avoir 14px, c'est le choix de Raphael de le placer sur body, il a toujours préféré placer cela sur les éléments structurants (#footer, #sidebar, #header il y a quelques années ; body maintenant).

Cependant ça ne me dit tjs pas pourquoi est ce qu'il a fait ce choix et qu'il préfère cela. Quel est l'avantage de cette technique par rapport à un body à 1em et les éléments de bas niveau (p, li, etc) à 1.4em ?

Pour l'instant, je ne vois que l’inconvénient de calculs compliqués pour pouvoir appliquer la bonne taille de typos, mais il doit y avoir une raison ?

Gyzm0 a écrit :
Quel est l'avantage de cette technique par rapport à un body à 1em et les éléments de bas niveau (p, li, etc) à 1.4em ?

Hello,

L'avantage est que tu n'as qu'un seul élément à gérer (body) et non plusieurs. Le problème des "plusieurs" est que tu ne connais pas toujours exactement quels sont les éléments de plus bas niveau, tandis que body tu le connais et tu le maîtrises.

Gyzm0 a écrit :
Pour l'instant, je ne vois que l’inconvénient de calculs compliqués pour pouvoir appliquer la bonne taille de typos, mais il doit y avoir une raison ?

Dans la pratique, cet inconvénient devrait être limité puisque ces calculs compliqués ne concernent que "les anomalies" par rapport à la norme.

C'est certain que si tu dois gérer 10 tailles de polices de paragraphes différentes, cela complique un peu les choses.. mais dans ce cas, la faute est plutôt du côté de la charte graphique qui est incohérente.

Salut,

Merci d'avoir ouvert ce débat fort intéressant on continu donc cette discussion directement sur KNACSS.