La conception Web a toujours emprunté principes et définitions au monde de la conception graphique et imprimée. Cela est particulièrement vrai en ce qui concerne la typographie Web et la manière dont les lettres sont imprimées sur nos pages Web. Ces parallèles ne sont pas toujours des traductions 1 à 1, mais vous pouvez certainement voir où une discipline a influencé l'autre. Cela est particulièrement évident lorsque vous examinez la relation entre le terme de "typographie" traditionnel et la propriété CSS appelée "hauteur de ligne".
Le but de diriger
Lorsque des personnes utilisaient manuellement des lettres métalliques ou en bois pour créer la typographie d'une page imprimée, de minces morceaux de plomb étaient placés entre des lignes de texte horizontales afin de créer un espacement entre ces lignes. Si vous vouliez un plus grand espace, vous inséreriez de plus gros morceaux de plomb. C'est ainsi que le terme "leader" a été inventé. Si vous cherchiez le terme "menant" dans un livre sur la conception typographique et les principes, cela lirait quelque chose donnant l'effet suivant: "la distance entre les lignes de base des lignes de type successives".
Chef de file en conception de sites Web
En conception numérique, le terme interligne est toujours utilisé pour désigner l'espacement entre les lignes de texte. De nombreux programmes utilisent ce terme exact, même s’ils n’utilisent manifestement pas de piste. C’est un excellent exemple de nouvelles formes de conception empruntant des idées aux idées traditionnelles, même si la mise en œuvre exacte de ce principe a changé.
En ce qui concerne la conception Web, il n'y a pas de propriété CSS pour "leader". Au lieu de cela, la propriété CSS qui gérera cet affichage visuel de texte s'appelle line-height. Si vous souhaitez que votre texte dispose d'un espace supplémentaire entre les lignes de texte horizontales, utilisez cette propriété. Par exemple, supposons que vous souhaitiez augmenter la hauteur de ligne pour tous les paragraphes du texte. p principal hauteur de ligne: 1,5;}
Cela correspondrait désormais à 1,5 fois la hauteur de ligne normale, en fonction de la taille de police par défaut de la page (qui est normalement de 16 pixels). Comme indiqué ci-dessus, line-height est approprié pour espacer les lignes de texte dans des paragraphes ou d'autres blocs de texte. S'il y a trop peu d'espace entre les lignes, le texte peut devenir confus et difficile à lire pour les visiteurs de votre site. De même, si les lignes sont trop espacées sur la page, le flux de lecture normal sera interrompu et les lecteurs auront des problèmes avec votre texte pour cette raison. C'est pourquoi vous souhaitez trouver la quantité appropriée d'espacement ligne-hauteur à utiliser. Vous pouvez également tester votre conception avec des utilisateurs réels pour obtenir leurs commentaires sur la lisibilité de la page. Ne confondez pas line-height avec le remplissage ou les marges que vous utiliseriez pour ajouter des espaces à la conception de votre page, y compris sous l'en-tête ou les paragraphes. Cet espacement n'est pas en avance et, par conséquent, il n'est pas géré par la hauteur de ligne. Si vous souhaitez ajouter de l'espace sous certains éléments de texte, utilisez des marges ou un remplissage. Pour revenir à l'exemple CSS précédent, nous pourrions ajouter ceci: p principal hauteur de ligne: 1,5; marge inférieure: 24px;}
Cela aurait toujours la hauteur de ligne de 1,5 entre les lignes de texte pour le paragraphe de notre page (ceux à l'intérieur du p principal hauteur de ligne: 1,5; rembourrage en bas: 24px;} Dans presque tous les cas, cela afficherait la même chose que le CSS précédent. Supposons que vous vouliez ajouter un espacement sous les éléments de la liste qui figuraient dans une liste avec une classe de "services-menu"; vous utiliseriez des marges ou un remplissage pour le faire, PAS la hauteur de ligne. Donc, ce serait approprié. .services-menu li {< rembourrage en bas: 30px;} Vous utiliseriez ici uniquement hauteur de ligne si vous vouliez définir l'espacement du texte à l'intérieur des éléments de liste eux-mêmes, en supposant que leur texte pouvait être long, pouvant aller jusqu'à plusieurs lignes pour chaque puce. Quand utiliser Line-Height
Quand ne pas utiliser Line-Height
