18043 sujets
Questions générales et questions de débutants
Bonjour,
Un bon reflexe est de consulter la spécification CSS 2: line-height
Modifié par Felipe (02 Jun 2008 - 13:44)
Un bon reflexe est de consulter la spécification CSS 2: line-height
Modifié par Felipe (02 Jun 2008 - 13:44)
Petit Scarabee a écrit :
le point, le pixel, le cm , le mm , le pica , le pourcentage ??????
Heu... pour quelle propriété, pour quel type d'élément, et pour quel média (screen, print)?
S'il s'agit de line-height, alors le média est indifférent et l'unité à utiliser est... pas d'unité. On utilise comme valeur un rapport de la taille du texte.
Petit exemple:
p {
line-height: 1.4;
}
li {
line-height: 1.25;
}
h1, h2, h3 {
line-height: 1.1;
}On peut faire strictement la même chose en utilisant l'unité em (mais je trouve ça contre-intuitif vu que le em ne correspondra pas à la même chose que pour une propriété font-size appliquée au même élément). On peut aussi utiliser les pourcentages si on préfère exprimer le rapport sous la forme d'un pourcentage (c'est mathématique: 1.25 = 125%, donc line-height: 1.25 et line-height: 125% sont équivalents).
On peut également «figer» la hauteur de ligne en utilisant les pixels, points, millimètres, centimètres, etc. Mais ça n'est pas une très bonne idée.
Petit Scarabee a écrit :
si je comprends bien, le pourcentage est plus intéressant que le point, le pica, le pixel ??
L'avantage d'utiliser un pourcentage (ex: line-height: 120%) ou un rapport sans unité (ex: line-height: 1.2), c'est que tu n'as pas besoin d'adapter la hauteur de ligne chaque fois que tu augmentes ou diminue la taille de texte. Pour une hauteur de ligne de 120% (ou de 1.2, ou éventuellement de 1.2em), un texte de 10px aura une hauteur de ligne de 12px, un texte de 13px une hauteur de ligne de 15.6px (sans doute arrondi à 16px), un texte de 16px une hauteur de ligne de 19.2px, etc.
Une bonne pratique est de donner une hauteur de ligne «standard» pour l'élément body:
body {
line-height: 1.25;
}Ensuite, on adapte quand c'est nécessaire, en réduisant ou augmentant la hauteur de ligne.
Quelques règles:
- sauf cas très particulier, ne pas descendre en dessous de 1 (100%)... on peut même garder 1.05 ou 1.1 comme limite;
- la hauteur de ligne la plus harmonieuse va en partie dépendre de la fonte utilisée;
- plus le texte petit, plus il est important d'avoir une hauteur de ligne pas trop serrée (1.2, 1.4, 1.6...);
- plus le texte est gros (titres), plus il est important d'éviter que les différentes lignes soient trop espacées (pour les titres, des hauteurs de ligne entre 1.0 et 1.2 sont souvent correctes);
- plus la ligne de texte est large, plus il faut augmenter la hauteur de ligne;
- plus la ligne de texte est courte, plus on peut réduire la hauteur de ligne;
- le choix d'une hauteur de ligne a un impact sur sa lisibilité;
- le choix d'une hauteur de ligne influe sur le style d'une page ou d'une section, et on peut faire certains choix stylistiques qui ne sont pas forcément dictés par des impératifs de lisibilité.
Serge a écrit :
Et comment supprimer les différences de hauteur de ligne entre FF et IE ?
Je n'ai jamais observé de différence de ce type, sauf peut-être lorsqu'on utilise les styles par défaut. Mais donner une hauteur de ligne «de base» (par exemple un line-height: 1.3 ou un line-height: 1.1) à l'élément BODY corrige ce problème.
À partir du moment où une hauteur de ligne de base est définie, je n'observe pas d'écarts, sauf parfois une différence d'un pixel due à une différence d'arrondi dans les calculs. Mais rien de plus important.
On peut éventuellement avoir, dans Internet Explorer, des écarts trop importants entre paragraphes, ou entre éléments LI. Mais dans ce cas ce ne sera pas lié à la hauteur de ligne; ce sera plutôt un problème de gestion des marges, padding, souvent avec un effet pervers du HasLayout ou un bug quelconque.