Das Webdesign hat immer Prinzipale und Definitionen aus der Welt des Grafik- und Druckdesigns übernommen. Dies gilt insbesondere für Webtypografie und die Art und Weise, wie wir auf unseren Webseiten Letterforms erhalten. Diese Parallelen sind nicht immer 1: 1-Übersetzungen, aber man kann durchaus erkennen, wo eine Disziplin die andere beeinflusst hat. Dies wird besonders deutlich, wenn Sie die Beziehung zwischen dem traditionellen Typografiebegriff "führende" und der als "Zeilenhöhe" bekannten CSS-Eigenschaft betrachten.
Der Zweck des Führens
Wenn man früher manuell Metall- oder Holzbuchstaben anfertigte, um die Typografie für eine gedruckte Seite zu erstellen, wurden dünne Bleimaterialien zwischen horizontalen Textzeilen platziert, um einen Abstand zwischen diesen Zeilen zu schaffen. Wenn Sie ein größeres Feld wünschen, würden Sie größere Bleigruppen einlegen. So wurde der Begriff "Führen" geprägt. Wenn Sie in einem Buch über typografische Gestaltung und Prinzipien den Begriff "führend" nachgeschlagen haben, würde dies etwas bedeuten: "Abstand zwischen den Grundlinien aufeinanderfolgender Schriftlinien".
Führend im Webdesign
Im digitalen Design wird der Begriff "Leading" immer noch verwendet, um den Abstand zwischen Textzeilen zu bezeichnen. Viele Programme verwenden diesen exakten Begriff, auch wenn der tatsächliche Lead in diesen Programmen offensichtlich nicht verwendet wird. Dies ist ein hervorragendes Beispiel für neue Formen der Gestaltung, bei denen Ideen von traditionellen übernommen werden, obwohl sich die genaue Umsetzung dieses Prinzips geändert hat.
Beim Webdesign gibt es keine CSS-Eigenschaft für "Führen". Stattdessen wird die CSS-Eigenschaft, die diese visuelle Anzeige von Text behandeln würde, Zeilenhöhe genannt. Wenn der Text zwischen horizontalen Textzeilen zusätzlichen Abstand haben soll, verwenden Sie diese Eigenschaft. Angenommen, Sie möchten die Zeilenhöhe für alle Absätze innerhalb der erhöhen main p { Zeilenhöhe: 1,5;}
Dies wäre jetzt das 1,5-fache der normalen Zeilenhöhe, basierend auf der Standardschriftgröße der Seite (normalerweise 16px). Wie oben beschrieben, eignet sich die Zeilenhöhe zum Platzieren der Textzeilen in Absätzen oder anderen Textblöcken. Wenn zwischen den Zeilen zu wenig Platz ist, kann der Text für die Besucher Ihrer Site durcheinander und schwer lesbar sein. Wenn die Zeilen auf der Seite zu weit voneinander entfernt sind, wird der normale Lesefluss unterbrochen, und die Leser haben aus diesem Grund Probleme mit Ihrem Text. Aus diesem Grund möchten Sie den geeigneten Abstand zwischen den Zeilenhöhen ermitteln. Sie können Ihr Design auch mit tatsächlichen Benutzern testen, um Feedback zur Lesbarkeit der Seite zu erhalten. Verwechseln Sie die Zeilenhöhe nicht mit der Auffüllung oder den Rändern, die Sie verwenden würden, um dem Design Ihrer Seite Leerraum hinzuzufügen, einschließlich unter Überschrift oder Absätzen. Dieser Abstand ist nicht voreilend und wird daher nicht nach der Zeilenhöhe behandelt. Wenn Sie unter bestimmten Textelementen Platz hinzufügen möchten, verwenden Sie Ränder oder Füllungen. Zurück zum vorherigen CSS-Beispiel, das wir verwendet haben, könnten wir Folgendes hinzufügen: main p { Zeilenhöhe: 1,5; Rand unten: 24px;}
Dies hätte immer noch die 1,5 Zeilenhöhe zwischen den Textzeilen unserer Seitenabsätze (die innerhalb der main p { Zeilenhöhe: 1,5; Polsterung unten: 24px;} In fast allen Fällen würde dies das gleiche wie das vorherige CSS darstellen. Angenommen, Sie möchten Abstand unter Listenelementen hinzufügen, die sich in einer Liste mit einer Klasse von "Services-Menü" befanden, würden Sie dazu Ränder oder Füllungen verwenden, NICHT die Zeilenhöhe. Das wäre also angebracht. .services-menu li {< Polsterung unten: 30px;} Sie würden hier nur die Zeilenhöhe verwenden, wenn Sie den Abstand des Texts innerhalb der Listenelemente selbst festlegen möchten, vorausgesetzt, sie hatten lange Textläufe, die für jeden Aufzählungspunkt mehrere Zeilen umfassen könnten. Wann wird die Zeilenhöhe verwendet?
Wenn keine Zeilenhöhe verwendet werden soll
