Vertikaler Rhythmus leicht gemacht
Will man die Zeilenhöhe aller Elemente in einem Layout wie auf einem linierten Blatt Papier per CSS einheitlich festlegen, werden die Elemente mit dem so genannten Vertikalen Rhythmus ausgerichtet. Richard Rutter hat in 24 ways: Compose to a Vertical Rhythm wunderbar erklärt, wie das geht. Nun hat James Whittaker mit dem Vertical rhythm calculator eine Adobe AIR Applikation vorgestellt, die die Rechnerei übernimmt. Eingegeben werden zunächst eine Basisschriftgröße und der zugehörige Zeilenabstand. Danach lassen sich neue Elemente anlegen und dann als für das eigene Stylesheet kopieren.
Werbeunterbrechung
Kommentare und Feedback (4)
Vorheriger Artikel: xScope 2: Exakt ausmessen am Mac, nächster Artikel: Umgeräumt und frisch gestrichen
30.01.2008, 08:55
Ohne eigene Applikation geht’s auch – Michael Preidel hat diese Funktionalität seit langer Zeit in sein Art-Director’s-Toolbox eingebaut, das es als OS-X-Widget gibt! http://www.qxm.de/widget/20071213-161355/designers-toolbox-2-0-1
30.01.2008, 09:35
Wenn ich mich nicht irre, berechnet das Widget, die Zeilenhöhe aber nicht mit, oder?
30.01.2008, 11:23
Nun ja… da bin ich wohl völlig Oldschool – Casio MS-88 TER – Taschenrechner ;o). Aber dass Tool von James Whittaker ist schon bequem.
Schade nur das man die Standardseinstellungen wie Zeilenhöhe nicht ändern kann und bei jedem Aufruf des Programms 21px voreingestellt ist – analog dazu Basisschriftgröße. Hat auf jedenfall noch Potentzial zum verbessern.
26.03.2008, 17:23
Sorry für den sehr späten Kommentar ( ;-) ), aber die Zeilenhöhe für alle dem BODY nachgeordneten Elemente ist unnötig, wie auch Richard Rutter feststellen mußte und dieses Erkenntnis in Version 2 seines Beispiels verarbeitete:
http://webtypography.net/24ways2006/24ways-v2.html
Wenn man so weit wie möglich die Font-Größen für beliebige Elemente erst auf DOM-technisch sehr tiefer Ebene angibt, kann man für den BODY die Standardgröße 16px = 1em belassen und braucht in der Folge fast nur noch die Regel:
1 / 16 * gesuchte Höhe
anzuwenden. Das erleichtert die mathematischen Herausforderungen enorm. ;-)
(Vgl. Jon Tan. Hilfreich dazu seine Px -> Em Konvertierungstabelle.)