Vertikaler Rhythmus/Grundlinienraster im Webdesign

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

960er Raster

Ich finde es sehr schwierig, alles innerhalb des Rasters richtig auszurichten. Ich habe es geschafft, alles innerhalb des vertikalen Rasters in der Standardtextgröße (16 Pixel) zu erhalten, 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 vertikalen Rhythmen verbessern kann. Hat jemand irgendwelche Tipps oder Techniken, die ich anwenden sollte?

Antworten (3)

Das Grundlinienraster im Webdesign ist ein notwendiges akademisches Puzzle, aber aus fest programmierter mathematischer Sicht meist unpraktisch. Da CSS kein Konzept einer Baseline für den Typ hat, ist es technisch unmöglich, passende Baselines zu bekommen.

Sie können sich dem Abstand nähern, aber Sie landen schließlich bei etwas, das beim Betrachten der Zahlen Sinn machen kann, aber wahrscheinlich visuell 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 Bauchgefühl auf, nicht aus irgendwelchen Gleichungen, die Sie nur in den Wahnsinn treiben, wenn Sie ihn richtig im Web implementieren.

Beachten Sie nebenbei, dass das Konzept eines Grundlinienrasters aus der Welt des Druckdesigns stammt ... insbesondere mehrspaltige Layouts wie in einer Zeitung, bei denen der Typ vorzugsweise von Spalte zu Spalte ausgerichtet werden soll. Um den Satz einer solchen Veröffentlichung zu vereinfachen, ist ein Grundlinienraster sinnvoll und in der Welt der DTP-Anwendungen relativ einfach zu implementieren.

Genau – Sie mischen Äpfel und Orang-Utans. Es ist, als würde man versuchen, das Cover eines Taschenbuchs zu bekommen, um ein Flash-Video abzuspielen. Wenn Sie nicht alles als Bild machen und Ihre gesamte Website ein JPG mit Imagemaps ist, wird es einfach nicht passieren.
Es ist nicht so schwer, Ihr CSS und HTML an das 960-Raster anzupassen. Schließlich ist Programmieren einfach Mathematik. Abgesehen davon verwenden es im Grunde alle Designer auf (zB) themeforest.net. Es ist nicht so schwer, wie du sagst. Und ja .... das Grid-Konzept stammt aus der Druckwelt. Allerdings wird das 960er Rastersystem für das Web auf eine Mindestauflösung von 1024x768 umgestellt.
Das 960-Raster dient hauptsächlich zum Erstellen horizontaler Raster und ist etwas, das ich selbst für Websites mit moderater Größe sehr empfehle. Es ist ein sehr nützliches Werkzeug. Wir sprechen jedoch von einer Grundlinie mit vertikalem Typ. Ja, Programmieren ist Mathematik. Leider haben Browser und die CSS-Spezifikation keine besonderen Vorkehrungen getroffen, um Grundlinien von Buchstabenformen herauszufinden. Sie können es mit Ihrer Mathematik einschätzen, aber Sie sind den einzelnen Browsern, Betriebssystemen, installierten Schriftarten und Benutzereinstellungen ausgeliefert, daher ist es überhaupt keine „einfache Mathematik“, den Aspekt des Basistyprasters zum Laufen zu bringen.
Außerdem ist Design nicht immer reine Mathematik. Tatsächlich ist es selten reine Mathematik. Mathe bringt uns zu einem Punkt, aber darüber hinaus muss das ästhetische Urteil des Auges Platz finden. Ich habe sowohl für mich selbst als auch für andere Designer Websites mit einem Grundlinienrastersystem erstellt, und meistens müssen wir das Grundlinienraster am Ende verwerfen, damit es sich richtig anfühlt. Ich habe entschieden, dass es aus diesem Grund normalerweise eine verschwendete Anstrengung ist, das Grundlinienraster zum Laufen zu bringen, da es normalerweise eine willkürliche Sache ist.
Hmm, mein Lesemangel ;) Mir ist nicht aufgefallen, dass es nur um den vertikalen Rhythmus geht. Ich muss zugeben, dass ich die 960gs auch nicht wirklich für vertikale Rhythmen verwende. Nur für horizontal. Das einzige, was ich vertikal verwende, ist "the fold". Den Rest richte ich (wieder vertikal) nach "dem Auge" aus.
Seien Sie aber vorsichtig, denn „the fold“ ist auch ein bisschen Mythos. ;)

Der vertikale Rhythmus ist nicht schwer zu implementieren, besonders wenn Sie mit einem CSS-Reset beginnen . Ich bin vor einiger Zeit über diesen Link http://24ways.org/2006/compose-to-a-vertical-rhythm gestolpert und habe seitdem die Technik in all meinen Entwürfen verwendet.

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

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

Geben Sie hier die Bildbeschreibung ein

Es ist vielleicht schwer zu erkennen, 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 auf denen, 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 die Beachtung der Gesamtzeilenhöhe (z. B. 18 Pixel für eine 12-Pixel-Schriftbasis) das Festlegen von Rändern und Auffüllen um Bilder, grafische Kopfzeilen und dergleichen ziemlich einfach macht (18 Pixel). Auch ... der Drang, alles zu berechnen, verschwindet ... Sie werden anfangen, einen "vertikalen Rhythmus" über das Layout zu bemerken, und in der Lage sein, die richtige Polsterung / Rand / Zeilenhöhe aus einer sehr kurzen Liste von Werten zu ziehen in deinem Kopf.

Dieser sehr schöne Artikel im Smashing Magazine über Grundlinie und vertikalen Rhythmus gibt Ihnen einen Einblick in die Bedeutung von Grundlinien im Webdesign und wie Sie sie in Ihrem CSS implementieren. Es verwendet Schriftgröße, Zeilenhöhe, Polsterung und Rand für Standard-HTML-Elemente, damit alles mit Ihrem Grundlinienraster übereinstimmt.

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

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

Vertikaler Rhythmus/Grundlinienraster im Webdesign
AntwortenHierDatenschutz-Bestimmungen1y, 2v