Vertikales Rhythmus- / Grundlinienraster im Webdesign

Ich habe kürzlich einige Artikel über die Bedeutung eines guten vertikalen Rhythmus / die Verwendung eines Grundlinienrasters für eine gute Typografie im Webdesign gelesen. Ich habe mich entschlossen, ein Grundlinienraster wie das unten abgebildete 960-Raster als Hintergrundbild für ein Webdesign- / WordPress-Thema zu verwenden, an dem ich gerade arbeite.

960 Gitter

Ich finde es sehr schwierig, alles richtig in die Startaufstellung zu bringen. Ich habe es geschafft, alles innerhalb des vertikalen Rasters auf die Standardtextgröße (16 Pixel) zu bringen, aber wenn ich anfange, mit der Größe von Überschriften herumzuspielen, Bilder hinzuzufügen usw., bleiben Elemente nicht immer richtig im Raster ausgerichtet.

Ich würde gerne wissen, wie ich meine Typografie mit vertikalem Rhythmus verbessern kann. Hat jemand irgendwelche Tipps oder Techniken, die ich verwenden sollte?

— Santaji
quelle

Antworten:

Das Grundraster im Webdesign ist ein akademisches Rätsel, das jedoch vom hartcodierten mathematischen Standpunkt aus meist unpraktisch ist. Da CSS kein Konzept für eine Baseline für den Typ hat, ist es technisch unmöglich, die Baselines anzupassen.

Sie können sich dem Abstand von Dingen nähern, aber am Ende haben Sie etwas, das beim Betrachten der Zahlen möglicherweise Sinn macht, aber wahrscheinlich optisch nicht stimmt, und Sie weichen am Ende von der Formel ab, um sicherzustellen, dass die Dinge richtig aussehen.

Zusammenfassend ist also ein visueller Rhythmus wichtig, aber bauen Sie ihn aus Ihrem Bauch heraus auf, nicht aus Gleichungen, die Sie nur verrückt machen, wenn Sie ihn richtig im Web implementieren.

Beachten Sie nebenbei, dass das Konzept eines Grundlinienrasters aus der Welt des Druckdesigns stammt ... insbesondere aus mehrspaltigen Layouts, z. B. in einer Zeitung, in der der Typ bevorzugt von Spalte zu Spalte ausgerichtet werden soll. Um das Setzen dieser Art von Veröffentlichung zu vereinfachen, ist ein Baseline-Raster sinnvoll und in der Welt der DTP-Anwendungen relativ einfach zu implementieren.

— DA01
quelle

Genau - Sie mischen Äpfel und Orang-Utans. Es ist, als würde man versuchen, das Cover eines Taschenbuchs dazu zu bringen, ein Flash-Video abzuspielen. Wenn Sie nicht alles als Bild ausführen und Ihre gesamte Website ein JPG mit Imagemaps ist, wird dies einfach nicht passieren.

— Lauren-Clear-Monica-Ipsum

Es ist nicht so schwer, CSS und HTML an das 960-Raster anzupassen. Schließlich ist Codierung einfach Mathe. Außerdem verwenden es grundsätzlich alle Designer auf (zB) themeforest.net. Es ist nicht so schwer, wie du sagst. Und ja ... das Rasterkonzept stammt aus der Druckwelt. Das 960-Rastersystem wird jedoch für das Web so konvertiert, dass es einer Mindestauflösung von 1024 x 768 entspricht.

— Luuk

Das 960-Raster ist in erster Linie für die Erstellung horizontaler Raster gedacht. Ich kann es nur an Standorten mit mäßiger Größe empfehlen. Es ist ein sehr nützliches Werkzeug. Es handelt sich jedoch um eine vertikale Grundlinie. Ja, Codierung ist Mathe. Leider haben Browser und die CSS-Spezifikation keine besonderen Vorkehrungen getroffen, um die Basislinien von Briefformen herauszufinden. Sie können es mit Ihrer Mathematik zusammenfassen, aber Sie sind den einzelnen Browsern, Betriebssystemen, installierten Schriftarten und Benutzereinstellungen ausgeliefert, sodass es überhaupt nicht einfach ist, den Rasteraspekt des Basistyps zum Laufen zu bringen.

— DA01

Darüber hinaus ist Design nicht immer reine Mathematik. Tatsächlich ist es selten reine Mathematik. Die Mathematik bringt uns zu einem Punkt, aber darüber hinaus muss das ästhetische Urteil des Auges getroffen werden. Ich habe Websites mit einem Baseline-Rastersystem sowohl für mich als auch für andere Designer erstellt. In den meisten Fällen müssen wir das Baseline-Raster am Ende verschrotten, damit es sich richtig anfühlt. Ich habe beschlossen, dass es aus diesem Grund normalerweise eine vergebliche Anstrengung ist, das Grundlinienraster zum Laufen zu bringen, da es normalerweise eine willkürliche Sache ist.

— DA01

Hmm, mein Mangel an Lesen;) Ich habe nicht bemerkt, dass es nur um den vertikalen Rhythmus geht. Ich muss zustimmen, dass auch ich die 960gs nicht wirklich für vertikales Rhythmus benutze. Nur für horizontale. Das einzige, was ich vertikal benutze, ist "die Falte". Den Rest richte ich (noch einmal vertikal) am "Auge" aus.

— Luuk

Der vertikale Rhythmus ist nicht schwer zu implementieren, insbesondere wenn Sie mit einem CSS-Reset beginnen . Ich bin vor einiger Zeit auf diesen Link http://24ways.org/2006/compose-to-a-vertical-rhythm gestoßen und habe die Technik seitdem in allen meinen Designs verwendet.

Was ich festgestellt habe, ist, dass es nach der Arbeit mit einem "vordefinierten" Satz von Typdeklarationen in meiner CSS-Datei (h1 - h6, p usw. - insbesondere Größe, Zeilenhöhe, untere Ränder) sehr einfach bereitzustellen ist.

Hier ist ein Hintergrundbild, das mir geholfen hat, die Dinge etwas klarer zu sehen ... besonders als ich zum ersten Mal den Vert-Rhythmus verwendete.

Geben Sie hier die Bildbeschreibung ein

Es mag schwer zu sehen sein, aber wenn es als Hintergrundbild wiederholt wird, sehen Sie ein 20x20-Raster.

HTH

Hinweis: Ich mag die Typografie auf den Websites, die diese Technik verwendet haben, besser als diejenigen, die dies nicht getan haben. In beiden Fällen scheint es jedoch immer ein oder zwei Elemente zu geben, die das System "betrügen" müssen, um "richtig" auszusehen. Ich habe auch festgestellt, dass das Festlegen der gesamten Zeilenhöhe (z. B. 18 Pixel für eine 12 Pixel große Schriftbasis) das Festlegen von Rändern und das Auffüllen von Bildern, grafischen Überschriften und dergleichen ziemlich einfach macht (18 Pixel). Außerdem ... verschwindet der Drang, alles zu berechnen ... Sie werden einen "vertikalen Rhythmus" über das Layout bemerken und in der Lage sein, die richtige Polsterung / den richtigen Rand / die richtige Zeilenhöhe aus einer sehr kurzen Liste von Werten zu ziehen in deinem Kopf.

— Dawson
quelle

Dieser sehr schöne Artikel im Smashing Magazine über Baseline und vertikalen Rhythmus gibt Ihnen einen Einblick in die Bedeutung von Baselines im Webdesign und wie Sie sie in Ihrem CSS implementieren können. Bei Standard-HTML-Elementen werden Schriftgröße, Zeilenhöhe, Abstand und Rand verwendet, damit alle Linien mit Ihrem Grundlinienraster übereinstimmen.

Wie Dawson vorschlägt, ist ein Hintergrundbild sehr nützlich, um alles an das Raster anzupassen.

Ich habe diese Technik für meine neuesten Entwürfe befolgt und ich denke, es zahlt sich wirklich aus.

— Vincent
quelle