Share
Es ist gut, alles über die Besonderheiten der technischen Seite der Typografie zu erfahren. Sie erhalten eine solide Grundlage für die Suche nach Schriftarten und Schriftarten und helfen Ihnen, ein wenig mehr über die Kunst der Typografie selbst zu erfahren. Sie werden schnell feststellen, wie viel harte Arbeit erforderlich ist, um den richtigen Text zu erhalten, nicht nur im Web.
Einer der wichtigsten Aspekte der Typografie im Internet ist der vertikale Rhythmus. Dies kann auch schwieriger werden, da er oft sehr viel Zeit und Experimente erfordert. Es gibt viele Möglichkeiten, um einen guten vertikalen Rhythmus auf einer Seite zu erzielen, obwohl einige davon einfach auf das reduziert werden, was sich auf dem Bildschirm anfühlt und aussieht.
Rhythmus ist…
ein starkes, regelmäßiges, wiederholtes Bewegungs- oder Klangmuster
und je konstanter und vertrauter ein Rhythmus ist, desto besser und stärker wird er.
Wir können dies mit dem Begriff „vertikaler Rhythmus“ auf das Web anwenden. In der westlichen Kultur wollen wir, wie wir von links nach rechts und von oben nach unten lesen, versuchen, einen konsistenten visuellen Rhythmus mit dem Inhalt unserer Seite beizubehalten. Wenn wir unseren vertikalen Rhythmus konstant halten, können wir ein visuell entspannenderes Erlebnis schaffen, das den Benutzern ein Gefühl der Vertrautheit vermittelt, visuelle Barrieren beseitigt und den Inhalt lesbarer macht.
Das Erstellen eines guten vertikalen Rhythmus für das Design einer Website kann schwierig sein. Ziel ist es, eine harmonische Beziehung zwischen allen Inhalten (einschließlich Bildern) herzustellen und Text) auf Ihrer Website.
Wie sieht zum Beispiel der Abstand zwischen den Absätzen aus (ist er zu groß oder zu klein?), Wie leicht finden Sie es selbst, ihn zu lesen? Es gibt viele Fragen, die Sie stellen müssen, und die meisten davon werden sich darauf beschränken, wie einfach es ist, den Inhalt Ihrer Website zu lesen (selbst zu scannen). Schon die geringsten Änderungen, die für ein besseres Leseerlebnis auf Ihrer Website sorgen, wird für Ihre Benutzer einen großen Unterschied bewirken.
Jetzt wissen wir, was vertikaler Rhythmus ist. Wir müssen ein wenig mehr darüber lernen, was einen guten vertikalen Rhythmus ausmacht. Der Schlüssel hier ist Lesbarkeit.
Wenn Sie mit der Typografie im Web arbeiten, sollten Sie vor allem die Schriftgrößen und Zeilenhöhen beachten. Obwohl es so viele andere Dinge gibt, die mit diesen beiden Dingen einhergehen, sind dies Ihre beiden Schlüsselkomponenten, um einen besseren vertikalen Rhythmus in Ihrem Seitendesign zu schaffen. Wenn Ihre Schriftgrößen nicht gut zusammenpassen (z. B. durch massive Überschriftengrößen und lächerlich winzige Textgrößen für Textkörperabschnitte), wird der Inhalt dadurch wesentlich schwieriger zu lesen und zu scannen. Wenn Ihr Inhalt eine Zeilenhöhe aufweist, die den Text unbequem zu lesen macht - entweder durch zu engen Abstand oder zu weit voneinander entfernt -, werden Ihre Benutzer ausgeschaltet, wenn Sie mit ihnen in Kontakt treten möchten.
Das Erstellen eines guten vertikalen Rhythmus in Ihren Entwürfen erfordert viel Übung, aber auch viel Theorie und manchmal auch Mathematik.
Zunächst müssen Sie eine Grundlinie (auch Grundlinienraster genannt) betrachten. Eine Basislinie ist die Standardhöhe, auf der Sie Ihren vertikalen Rhythmus aufstellen. Von dort aus können Sie diese Basislinie verwenden, um Sie bei der Zeilenhöhe für alle anderen Schriftarten und Inhalte Ihres Designs zu unterstützen.
Die Website von Trent Walton ist ein hervorragendes Beispiel für einen guten vertikalen Rhythmus im Design. Wenn Sie mit einer Grundlinie arbeiten, ist es ratsam, die Zeilenhöhe der am häufigsten verwendeten oder primären Schriftgröße in Ihrem Design zu verwenden. Das einfachste Beispiel, an das ich denken kann, ist, an die Schriftgröße Ihrer Hauptbasis von 100% zu denken (was in den meisten Browsern 16px entspricht). Wenn Sie eine Zeilenhöhe von 1 haben, wird Ihre Zeilenhöhe ebenfalls 16 Pixel betragen. Zeilenhöhen sind jedoch normalerweise am besten zwischen 1,4-1,6-mal so groß wie Ihre Schrift (visuell scheint dies bei den meisten Schriftarten zu funktionieren - nehmen Sie dies aber in der Regel nicht, spielen Sie einfach damit herum). Wenn wir uns dann eine Linienstärke in der Mitte von 1,5 ansehen, beträgt die Linienstärke 24px - und das ist unsere Basislinie. Von hier aus möchten wir sicherstellen, dass alle inhaltlichen und typografischen Elemente unseres Designs zu dieser 24px-Figur passen oder diese addieren.
Ein weiteres wichtiges Maß sind unsere Margen. Ein wirklich einfacher Weg, um unseren Rhythmus in Schach zu halten, ist die Verwendung dieser magischen Zahl (24px) für unsere Margen.
Ich bin ein großer Fan von Margen in eine Richtung, seit Harry Roberts dies Mitte 2012 in einem Artikel vorgeschlagen hat, in dem die Margen, die wir für alle Block-Level-Elemente anwenden, in eine Richtung (dh am unteren Rand der Elemente) platziert werden ). Dasselbe kann man sagen, wenn wir auch entwerfen. Da 24px unsere "magische Zahl" ist - und die Zahl, von der alles Vielfache sein sollte oder zumindest sich darauf beziehen sollte - können wir allen unseren Blockebenen einen unteren Rand hinzufügen Elemente von 24px (oder 1.5rem, wenn Sie es vorziehen - jedoch möchten Sie diesen Code in Ihr CSS einfügen, ist in Ordnung!). Dies hilft uns dabei, unseren vertikalen Rhythmus gut fließen zu lassen, und alle unsere Elemente halten sich an der Basislinie, die wir erstellt haben.
Ein kleiner Tipp, den ich beim Arbeiten mit Bildern in meinem Design finde - und sicherstellen, dass sie unsere Grundlinie und den vertikalen Rhythmus nicht völlig aus dem Gleichgewicht bringen - ist sicherzustellen, dass die Bildhöhen einem Vielfachen unserer magischen Zahl entsprechen. So kann beispielsweise ein Bild eine Höhe von 240px (10 x 24px, unsere magische Zahl) mit einem unteren Rand von 24px haben. Oder wir könnten sogar eine Höhe von 252 Pixeln mit einem unteren Rand von 12 Pixeln haben - solange sich das Vielfache von 24 Pixeln ergibt, sollten wir in Ordnung sein.
Es ist wichtig, sich an Ihre magische Zahl zu erinnern, aber Sie können immer noch etwas davon abbrechen - wenn sich bei der von Ihnen festgelegten 1,5 Zeilenhöhe nicht alles richtig anfühlt, versuchen Sie etwas anderes - solange Sie das andere ausrichten können Werte, so dass es in die Grundlinie zurückfällt und somit Ihren vertikalen Rhythmus in Schach hält.
Wenn Sie sich beispielsweise für eine etwas höhere Zeilenhöhe von 26 Pixeln entscheiden (was etwa das 1,625-fache der ursprünglichen Schriftgröße von 16px ausmacht), sollten Ihre Ränder dann Ihren vertikalen Rhythmus widerspiegeln wird in Ordnung sein. Da wir der Zeilenhöhe zwei zusätzliche Pixel hinzugefügt haben, müssen wir diese zwei Pixel vom unteren Rand des Elements nehmen. Natürlich können Sie, wenn möglich, nach Mustern in Ihrem Design suchen, wo dies geschehen könnte, und Ihr CSS so strukturieren, dass es diesem Muster entspricht. Erstellen Sie also eine modulare CSS-Klasse für Elemente mit diesem Designmuster, wie Sie dies bei jedem Projekt tun würden du entwickelst.
Es kann schwierig sein, einen guten vertikalen Rhythmus zu schaffen. Glücklicherweise gibt es jedoch, wie bei den meisten Konstruktions- und Entwicklungstechniken, einige gute Hilfsmittel, die uns helfen. Ich finde diese Werkzeuge besonders gut, um mehr über Typografie auf einer Seite zu lernen und visuell zu verstehen.
Typecast ist ein erstaunliches Werkzeug für Designer - es ermöglicht Ihnen nicht nur, mit Tausenden verschiedener Schriftarten oder Schriftkombinationen herumzuspielen, sondern hilft uns auch beim Setzen und Erstellen einer geeigneten Grundlinie. Ich stelle fest, dass ich immer vor allem anderen darauf einsteige, wenn ich in meinem Design die Typografie betrachte.
Die modulare Skala ist eine weitere kleine Technik, die beim Design mit Typografie genutzt werden kann - wie in A List Apart beschrieben
Eine modulare Skala ist eine Folge von Zahlen, die sich sinnvoll miteinander verbinden.
Tim Brown
Diese Zahlen können (durch viel Experimentieren und Austauschen und Ändern) in Ihren Entwürfen verwendet werden, wenn Sie dies wünschen. Es ist zumindest einen Blick und ein Spiel wert - und kann Ihnen helfen, fundiertere Entscheidungen zu treffen, beispielsweise über die Breite von Containern und darüber, wie diese anderen Zahlen auch in Ihrem vertikalen Rhythmus eine Rolle spielen können.
Wenn Sie ein Fan des Designs im Browser sind oder einfach nur sicherstellen möchten, dass die an anderer Stelle entworfenen Baselines beim Programmieren durchlaufen werden, können Sie mithilfe eines dieser beiden JavaScript-Plugins überprüfen, wie Ihre Baseline ist in Ihrem Code ausführen. Das erste (Basehold.it) von Dan Eden und Michael Wright bietet Ihnen eine JavaScript-Überlagerung auf Ihrer Website, während Baseline.js von Dan Eden Ihnen die Möglichkeit bietet, Bilder auf Ihrer Seite zu verwalten, falls diese benötigt werden.
Für diese Aufgabe möchte ich, dass Sie einfach mit einem Grundlinienraster herumspielen. Ob dies durch eine Testversion in Typecast, mithilfe eines der oben genannten JavaScript-Plugins oder einfach durch das Erstellen einer Grundlinienrasterlinie in Photoshop oder einer anderen Grafik-App geschieht, ist völlig überlassen Sie. Sobald Sie ein Grundlinienraster erstellt haben, beginnen Sie damit, die Prinzipien dieses Artikels in das Grundlinienraster zu integrieren. Platzieren Sie einige Ihrer Inhalte und beginnen Sie damit, die Skalen und Schriftgrößen zu ermitteln, die Sie verwenden möchten.
Wenn Sie diese bereits installiert haben, schauen Sie sich an, wie diese alle mit Ihrem Grundlinienraster verknüpft sind. Wenn Sie das noch nie getan haben, kann es ziemlich anstrengend sein, sich zu bewegen - aber es lohnt sich, sich die Zeit zu nehmen, um genau zu verstehen, wie sie funktionieren. Danach können Sie einen guten vertikalen Rhythmus viel einfacher in Ihre Website-Designs integrieren - und Ihre Benutzer werden es Ihnen danken!
Accentsconagua