Eine Schlüsselkomponente für jedes Website-Design ist der Typ. Die Auswahl von Schriftarten, -größen und -farben kann ein großer Teil der Gestaltung Ihrer Website sein. Genauso wichtig wie die Buchstabenform selbst ist der Abstand um diese Buchstaben herum und insbesondere der Zeilenabstand, der in Textblöcken verwendet wird.

Je mehr Typ Sie verwenden, desto wichtiger wird das Führen. Hinter Schriftart und -größe ist dies einer der Schlüsselfaktoren, die berücksichtigt werden müssen, wenn Sie sich die Lesbarkeit des Typs ansehen.

Die führenden Spezifikationen, die Sie für ein Logo oder Begrüßungsbildschirm verwenden, unterscheiden sich möglicherweise erheblich von denen, die für den Typ in einem Blogpost verwendet werden.

Andere Designelemente haben auch einen Einfluss darauf, wie Sie den Leading verwenden sollten. Die Größe des Typs, die Breite der Spalten und sogar die Hintergrundfarbe können Ihnen dabei helfen, weise führende Entscheidungen zu treffen.

Wie Sie das führende Element verwenden, kommt bei großen Textblöcken ins Spiel.

Was führt?

Leading - ausgesprochen ledding - ist der Abstand zwischen den Zeilen des Typs. Leading wurde traditionell in Punkten gemessen (genau wie Fonts). Der Begriff entstand mit alten Briefdrücken, wenn der Typ von Hand gesetzt wurde. Bleistreifen wurden zwischen den Linien des Typs platziert, um alles in perfekter Ausrichtung zu halten.

Seit dem Aufkommen des digitalen Publizierens wurde das Führen häufig mit der Zeilenhöhe verwechselt. Die Zeilenhöhe ist der gesamte Abstand von einer Basislinie - der imaginären Ebene, auf der Buchstaben wie "a", "x" und "n" sitzen - bis zur nächsten. Im Gegensatz dazu ist der Abstand vom unteren Ende eines Buchstabens auf einer Zeile bis zum Anfang eines Buchstabens auf der nächsten Seite: es ist buchstäblich die Zeilenhöhe minus der Texthöhe.

In der digitalen Typografie, insbesondere der Webtypographie, werden die Begriffe "Führung" und "Zeilenhöhe" häufig synonym verwendet. In CSS zum Beispiel gibt es keinen führenden Wert, stattdessen verwenden wir Zeilenhöhe.

Während das Führen früher einmal ein physikalischer, messbarer Wert war, wird es heute am häufigsten als Konzept verwendet: der visuelle Eindruck des Raums zwischen zwei Linien.

Die Verwendung von Leading in einem Textblock kann sich auf die Lesbarkeit auswirken. Es gibt eine feine Linie zwischen Typen, die zu nahe beieinander liegen und zu weit voneinander entfernt sind. Jedes Extrem kann für die Augen eines Lesers schwierig sein. Führen bedeutet, die Dichte des Typs zu ändern. Der Schlüssel besteht darin, zu verstehen, welche Nachricht Sie für Ihren Typ übermitteln und die Führung entsprechend anpassen möchten.

Keine perfekte Lösung

Facebook

Es gibt keine perfekte magische Formel, um zu bestimmen, wie viel Führung Sie benötigen. Eine Kombination von Faktoren ist beteiligt - Schriftgröße, Farbe, gewünschter Effekt und vor allem Lesbarkeit.

In der Regel ist der Anfangspunkt für das Voranstellen derselbe wie die Punktgröße der verwendeten Schriftart. Einige Software, vor allem Webbrowser, nehmen es ein bisschen weiter und legen die Standardeinstellung etwas höher als die Punktgröße fest, die normalerweise einen Standardwert von 120 Prozent verwendet. Blöcke mit 10-Punkt-Text hätten also eine 12-Punkt-Marke.

Diese Philosophie eignet sich hervorragend für große Textblöcke, wie zum Beispiel Blogposts, die gängige Schriften ohne extravagante Oberlängen, Unterlängen oder Ligaturen auf blassen, neutral gefärbten Hintergründen verwenden (denken Sie an schwarzen Typ auf Weiß oder Beige). Sie behalten das Gefühl, dass alle Textzeilen zusammenpassen, während Sie gerade genug Platz für die Augen hinzufügen.

Textblöcke sind am einfachsten zu lesen, wenn der Zeilenabstand größer als der Wortabstand ist. Dieser Anteil hilft dem Auge, sich über die Seite und dann nach unten zu bewegen, indem es dem natürlichen Fluss des Abstands von dunkel nach hell folgt.

Diese "normale" Zeilenhöhe wird sich auch für Dinge eignen, die viel Lesen erfordern. Es ist der Standard, der von vielen Websites und gedruckten Publikationen verwendet wird.

Halte es fest

Branch

Tight oder negative Leading tritt auf, wenn Zeilen des Typs näher als die Punktgröße des Typs sind. Wenn Ihr Typ zum Beispiel eine Größe von 14 Punkten hat, wird jede führende Stelle unter 14 Punkten als eng angesehen, auch wenn sie nicht zu eng auf dem Bildschirm erscheint.

Enge Führung kann ein Gefühl der Einschränkung erzeugen. Es kann auch verwendet werden, um Chaos zu schaffen. Auf der anderen Seite kann strikteres Führen als eine Methode verwendet werden, um Bits des Typs zusammenzubringen oder ein eindeutiges Gefühl der Organisation zu erzeugen. Seit vielen Jahren im Print- und Online-Bereich haben Nachrichtenagenturen einige der strengsten führenden Spezifikationen für Körpertypen verwendet. Im Druck sollte dies Platz sparen; online ist es, um das Gefühl der Glaubwürdigkeit und das Aussehen der Organisationen und ihrer Print-Partner zu erhalten.

Regenerate Music co

Denken Sie beim Einstellen der Zeilenhöhenspezifikationen an Buchstaben und Buchstaben, die über und unter der x-Höhe liegen. Wenn Sie in Großbuchstaben arbeiten, gibt es keine Oberlängen oder Unterlängen, daher müssen Sie möglicherweise den Zeilenabstand verringern, z. B. die von Regenerate Music Co. verwendete Technik. Dasselbe gilt für Schriftarten mit kürzeren Ober- und Unterlängen.

Schriftarten, die in größeren Formaten wie Überschriften oder Logos verwendet werden, können manchmal auch von einer strafferen Schriftführung profitieren.

Lockern

Onst Creative

Loose oder positive Leading fügt Leerzeichen hinzu, so dass das Leading größer ist als die für den Typ verwendete Punktgröße. Wenn Ihr Typ beispielsweise eine Größe von 14 Punkten hat, wird jeder Bereich mit 15 oder mehr Punkten als lose betrachtet. Bei einigen Schriftarten sieht der Abstand möglicherweise nicht auf dem Bildschirm aus, obwohl er so klassifiziert ist.

Loose Leading kann eine Seite leicht und luftig wirken lassen. Es ist ein lang erprobter Trick für Designer, einfach nur "Leading" hinzuzufügen, wenn sich der Typ auf der Seite zu klobig oder schwer anfühlt. Führen, das zu locker ist, kann jedoch schwierig zu lesen und zu folgen sein, wenn viel Text verwendet wird; Es ist am besten für wenige Wörter reserviert.

Alistapart

Die meisten Designer neigen dazu, in Blogs und anderen großen Textblöcken loseres Führen für den Haupttexttyp zu verwenden. Lose, aber nicht zu locker, führen kann leicht zu lesen und zu folgen. Es kann kleineren Text etwas größer erscheinen lassen und extrem lange Textzeilen ausgleichen. Beachten Sie, dass bei der Verwendung des A List Apart-Blogs die größere Schriftart für den Text eine Spezifikation verwendet, während die kleinere Schriftart in der rechten Seitenleiste viel lockerer ist, sodass der kleinere Text einfacher zu folgen und mit den anderen Elementen auf der Seite auszubalancieren ist .

Viele Designer entscheiden sich auch für eine lockerere Führung, wenn sie serifenlose Schriften verwenden. Dies kann besonders bei Schriften mit übertriebenen Schnörkeln oder Ligaturen hilfreich sein. Der zusätzliche Platz erlaubt den Buchstaben Raum zu atmen, ohne sich zu überlappen.

The Bloggess

Loose Leading ist auch eine wichtige Überlegung, wenn Sie viele fett, farbige Schriftarten oder Schriftarten mit schweren Gewichten verwenden möchten. Der Bloggess-Blog verwendet eine Kombination aus Farbe, Fettdruck und Großbuchstaben auf der gesamten Website, wodurch ein notwendiges Lesbarkeitstool positiv wird. In diesem Fall hilft loose leading auch, die wichtigen Teile des Textes zu erkennen, die farbig und fett sind.

Hintergrundfarben und führen

Bei der Auswahl einer Zeilenhöhe sind Farbe und Kontrast besonders wichtig.

Auf dunklen Hintergründen möchten Sie möglicherweise etwas mehr Führung als auf einem helleren Hintergrund verwenden, um ein Gefühl von Masse zu lindern. Dunkle Farben können Ihrem Design mehr Gewicht verleihen, ebenso wie eine straffe Führung, aber wenn Sie nur das eine oder das andere verwenden, können Sie mehr Balance schaffen.

Das gleiche gilt, wenn Sie den Typ einer Farbe verwenden. Farben, die nicht schwarz oder dunkelgrau sind, können Ihrem Design ein unterschiedliches Gewicht verleihen. Je nach Hintergrundfarbe kann ein Text sogar den Anschein von Blutungen auf den Hintergrund bekommen - dies passiert bei manchen Menschen vor allem beim Lesen roter Schrift auf weißem Hintergrund. Das Hinzufügen von "Leading" kann dazu beitragen, dass diese Textarten besser lesbar sind.

Ändern der Breite und des Verlaufs

HappyCog

Responsive Design macht das Führen (und Tippen im Allgemeinen) noch wichtiger.

Bei unterschiedlichen Bildschirmauflösungen und -formen müssen die Typspezifikationen entsprechend angepasst werden, um sicherzustellen, dass eine Website lesbar bleibt. Wenn der Text auf dem Bildschirm schrumpft (oder wächst), muss der Leading entsprechend angepasst werden.

Denken Sie daran, die Höhe der Zeilenhöhe zu berücksichtigen, wenn Sie diese Anpassungen vornehmen. Da der Typ für mobile Geräte und andere Geräte mit kleinem Bildschirm kleiner ist. Ziehen Sie in Erwägung, die Zeilenhöhe um 20 Prozent gegenüber dem für das vollständige Design zu erhöhen. Der erhöhte Vorsprung sollte die Lesbarkeit verbessern, wenn er mit einem kleineren Typ gepaart wird.

Wenn Sie also die wichtigsten Spezifikationen für Ihre Website festlegen, benötigen Sie mehrere Schwellenwerte: eine für das grundlegende Website-Design, eine für mittelgroße Geräte wie das iPad und andere Tablets und eine für Mobiltelefone. Jeder kann einen anderen Satz von Proportionen haben, die für die Höhe von Text zu Zeile verwendet werden.

Fazit

Jetzt wo Sie mit einer Vielzahl von führenden Tipps und Tools bewaffnet sind, wo fangen Sie an?

Es gibt keine Checkliste. Am besten ist es, einen Blick auf den Typ zu werfen und zu sehen, wie es sich anfühlt (verwende den guten altmodischen Sehtest). Lass es eine Weile sitzen und komm später wieder dazu. Fühlst du den Text immer noch genauso? Ist das Gefühl, das Sie bekommen, dem Gefühl, das Sie für Ihr Website-Design haben, gewachsen?

Beachten Sie, dass dies am effektivsten ist, wenn der Textblock eine tatsächliche Kopie und keinen Platzhaltertext enthält. Sie möchten eine realistische Ansicht erhalten und Platzhalteroptionen enthalten manchmal ungerade Zahlen von Buchstaben, die in Echtkopien nicht oft verwendet werden.

Spiel damit. Zeigen Sie Ihren Textentwurf jemand anderen für zusätzliche Meinungen. Fragen Sie sie, wie sie darüber denken.

Stellen Sie außerdem sicher, dass Sie Ihren Textblock mit den übrigen Elementen im Design paaren. Dies ist vielleicht nicht der erste Schritt, aber manchmal kann es zu unbeabsichtigten Effekten kommen. Stellen Sie sicher, dass es den Sehtest erneut besteht.