Vous avez un .PSD que vous devez convertir en HTML / CSS et vous avez du mal à calculer la hauteur de ligne en CSS à partir du fichier PSD.
Comment puis-je calculer le line-height ?
Photoshop mesure le line-height avec l’interlignage qui est différent du CSS line-height.
L’interlignage est la distance entre le bas d’une ligne de texte et le haut de la ligne de texte en dessous.
Le Line-height est la distance entre la moitié de l’interlignage de la ligne en dessus d’une et la moitié de l’interlignage de la ligne en dessous.
Par conséquent, il est possible de convertir mathématiquement l’interlignage en line-height en appliquant la formule suivante :
la taille de la police + interlignage / 2 = line-height.
Ainsi, par exemple si la taille de la police dans Photoshop est 10px et l’interlignage est 18px alors le line-height est 19px
Si il n’y a pas d‘interlignage défini dans photoshop, il est de 120% de la taille de police
En outre, pour calculer la CSS letter-spacing appropriée comme indiqué dans un PSD.
Diviser la valeur letter-spacing par 1000. Par exemple, si la valeur est de 20 la formule sera 20/1000 = 0,02
Ce qui nous donne un interlettrage de 0.02em