Dies ist kein „Framework“ oder Ähnliches, ich habe nur mit Typografie herumgespielt und versucht, Dinge nach einem strengen horizontalen und vertikalen Raster auszurichten. Es ist inspiriert von dem Artikel Compose to a Vertical Rhythm von Richard Rutter vor ein paar Jahren, verwendet aber zeilenhöhenlose Zeilenhöhe.
Demo ansehen Dateien herunterladen
font: 10px/2 "Lucida Grande", Helvetica, Sans-Serif;Ich fand die Ergebnisse sehr ansprechend. Wenn Sie eine Website haben, die viele Textinhalte enthält, halte ich es für wichtig, dem zugrunde liegenden Raster feingranulare Aufmerksamkeit zu schenken.
Immer interessant, die Ansichten anderer Leute darüber zu sehen, wie man ein CSS-Raster erstellt.
Danke!
Interessante Sache, Chris. Ich habe mich kürzlich mit den verschiedenen Raster-Hypes da draußen beschäftigt und die typografischen Teile davon sind, gelinde gesagt, faszinierend. Ich mag dein kleines Demo-Layout!
Hey, das ist erstaunlich. Typografisches Raster, das muss ich twittern :)
Ich verstehe das Argument für das vertikale Raster, aber ich konnte es noch nie auf zufriedenstellende Weise in die Praxis umsetzen.
Wirklich schön, Chris. Der schwierigste Teil für mich war schon immer die Zeilenhöhe, nun ja, die richtige Abstimmung aller Überschriften und Absätze. Ich habe gerade die Dateien heruntergeladen, um sie genauer zu untersuchen. Danke.
Schön, aber es richtet sich bei mir nicht horizontal aus..
Sieht nach einem guten Anfang aus. Das sollte Leuten, die ihrem Website ein „Notizbuch“-Gefühl geben wollen, sehr helfen.
Der Text und die Linien sind in meinem Chrome-Browser etwas daneben, aber immer noch sehr nah dran.
Sieht in meinem Browser gut aus.. Ich mag es, ich sehe, dass das bei vielen Projekten nützlich sein wird. Tolle Arbeit.
Obwohl ich KEIN Fan von CSS-Rastern bin (siehe Umfrage), liebe ich typografische Raster absolut. Sie geben mir ein warmes und kuscheliges Gefühl im Inneren.
Schön, der Teufel steckt im Detail, wie man sagt. Ich habe 2 typografische Stylesheets, eines mit einer Standard-Schriftgröße von 16px und das andere mit 12px. 16px? Das probiere ich für die Neugestaltung meiner Website aus.
Es gibt heutzutage einige Werkzeuge, die bei der Mathematik helfen, wie den Baseline Rhythm Calculator, den Adobe Air EM-Rechner von James Whittaker und das sehr nützliche Grid Bookmarklet.
Sie können jederzeit EM-basiertes CSS über http://pxtoem.com erhalten.
Schön, Chris.
@Karl Ich liebe den Baseline-Rhythmus-Rechner, ein so nützliches Werkzeug, ich benutze ihn für die meisten Dinge, an denen ich arbeite.
A List Apart hat vor ein paar Jahren einen großartigen Artikel zu diesem Thema geschrieben.
Vielleicht habe ich es falsch gelesen, aber Sie sagten, Sie verwenden zeilenhöhenlose Zeilenhöhen, aber Ihre Demo hat die Zeilenhöhe in Pixeln. :?
Ich bin mir nicht sicher, wo Sie nachschauen? Die Zeilenhöhe ist an nur einer Stelle in der Demo eingestellt, im Body, und sie ist auf „2“ gesetzt.
blockquote {
font: italic 15px/**20px** Georgia, Serif;
width: 180px;
}
Sieht großartig aus!
Ich würde gerne sehen, wie Sie einen Grundlinienrhythmus/Raster mit allen HTML-Elementen zum Laufen bringen, die jemand in einem Design verwenden könnte – insbesondere: Tabellen, Formulare und Elemente mit oberen/unteren Rändern usw. In meinen eigenen Experimenten habe ich festgestellt, dass diese oft jeglichen Rhythmus in den meisten Browsern brechen.
Letztendlich ist ein Grundlinienraster nicht möglich, wenn der Website-Inhalt komplexer wird als einfache typografische Elemente, aufgrund von leichten Unterschieden in der Browserdarstellung.
Danke. Sehr interessanter Beitrag.
Interessanter Gedanke. Ralph