[bendar]

Hi,
hat schon jemand mal versucht ein Grundlinienraster auf ein CSS Stylesheet zu übertragen?
Ich versuche gerade mit 1.6em als Basiseinheit die Abstände so an zu passen, damit es passt. Also h1 padding-top: 1.6em, h3 padding-top: .8em usw.
Bin ich da wirklich der Erste? Mit Google finde ich nicht wirklich was brauchbares.

[Crizzo]

was für ein Grundlinienraster?

[bendar]

Bekannt aus dem Printbereich, wird eingesetzt um ein einheitliches typografisches Erscheinungsbild zu erzeugen.
Ich möchte ein Linienraster hinter die Seite legen und der Text, ob h1 oder ul soll dann darauf laufen. Machbar ist das und ich sitze gerade drann, aber die Frage ist, ob das nicht schon mal jemand gemacht hat?

Grundlinienraster

Wenn man eine Textseite gegen das Licht hält, fällt auf, daß die Schriftzeilen des Grundtextes auf der Vorderseite und die Schriftzeilen der Rückseite genau auf einander liegen.. Dies liegt daran, daß die Schriftzeilen an einem Grundlinienraster ausgerichtet sind. In der Fachsprache spricht man von einem Register oder einer Registerhaltigkeit eines Dokumentes. Diese sorgt für Ruhe und Harmonie in der Drucksache. Die Schrittweite des Grundlinienrasters orientiert sich am Zeilenabstands des Fließtextes.

In den meisten Publikationen befinden sich der Startpunkt des Grundlinienrasters und Oberkante des Satzspiegels auf der selben Höhe, wobei der Text erst in der zweiten Zeile beginnt.

Wenn sich in Satzspiegel Bilder befinden, die mit der Oberkante des Satzspiegels abschließen, ragen sie etwas aus dem Text heraus. Um dies zu vermeiden wird das Grundlinienraster um den Leerraum, der zwischen Satzspiegeloberkante und Mittellänge der Textzeilen gesteht nach oben versetzt.

Quelle

[fricca]

Es gab in letzter Zeit eine Menge Artikel zum Thema "Designing with Grids".
Eine Ansammlung vieler vieler Links dazu befindet sich beim Smashing Magazine.
Ich erinnere mich, vor einiger Zeit eine Seite gesehen zu haben, bei der man via JavaScript ein solches Grundlinienraster zum Gestalten ein und ausblenden konnte. Leider kann ich den Link nicht mehr finden. Vielleicht erinnert sich ja jemand?

[bendar]

Ich habe die ganze Zeit mit dem falschen Suchbegriff gesucht

http://alistapart.com/articles/settingtypeontheweb
http://csshowto.com/typography/css-the-baseline-grid/
http://www.locusfoc.us/typography/index.html

Beantwortet meine Frage ausführlichst! Vielen Dank für die Linkliste, so bin ich darauf gekommen.

[Geronimo]

Zitat von fricca

Ich erinnere mich, vor einiger Zeit eine Seite gesehen zu haben, bei der man via JavaScript ein solches Grundlinienraster zum Gestalten ein und ausblenden konnte. Leider kann ich den Link nicht mehr finden. Vielleicht erinnert sich ja jemand?

TypoGridder - a LGPL javascript to add baseline grids

[fricca]

Zitat von designfanatiker

TypoGridder - a LGPL javascript to add baseline grids

Ja genau, das war's.
Merci.

[Geronimo]

Hab' gerade das „Bookmarklet“ ausprobiert und bin leicht verwirrt: Die Linien sollten sich nach der Zeilenhöhe der Absätze richten. Warum kommt es zu der auf dem Bildschirmabzug deutlich sichtbaren Verschiebung?

[The Doc]

Designfanatiker:
Ich bin der Entwickler von dem Bookmarklet, und bei mir hats eigentlich immer geklappt. Wenn du's nochmal ausprobieren möchtest, es aber immernoch nicht geht, dann gib mir bitte auch ein Testlink (d.h. HTML + CSS, damit ich's selber ausprobieren kann).

Und so am Rande: Das nächste mal solltest du dich gleich mit dem Entwickler in Verbindung setzten, dazu hab ich schließlich unter Feedback meine Emailadresse hinterlegt.

[Geronimo]

Zitat von The Doc

Und so am Rande: Das nächste mal solltest du dich gleich mit dem Entwickler in Verbindung setzten, dazu hab ich schließlich unter Feedback meine Emailadresse hinterlegt.

Genau das habe ich damals gemacht.