Masseinheiten und Kenngrössen für die Typographie im Web - Teil 2

Im ersten Teil ging es um absolute und relative CSS Einheiten, Schriftgrösse, und die line-height Eigenschaft in CSS.

Typographische Abstände: CSS vs Typographie

In der Grafik sind links die wichtigsten Kennlinien, Abstände und Grössen mit den dazugehörigen Begriffen auf Deutsch und wo möglich auf Englisch markiert.

Rechts wird der Unterschied zwischen Durchschuss und Zeilenabstand erklärt und welche Kennlinien mit welchen CSS Befehlen angesprochen werden können.

Besonderheiten

Overshoot, berhang

Runde Buchstaben wie “o”, “s” usw. ragen über die x-Höhe hinaus und gehen unter die Grundlinie. Der Grund ist, dass Buchstaben mit flachen Endungen, wie “x” oder “v” optisch grösser wirken würden als die mit runden Endungen. Um diesen optischen Effekt zu kompensieren und die Buchstaben gleich gross erscheinen zu lassen, wird ein Überhang, oder Overshoot eingesetzt.

Leading

Leading auf Englisch bezeichnet den Durchschuss und nicht den Zeilenabstand, wie fälschlicherweise häufig angenommen. Der Zeilenabstand wird korrekterweise line spacing genannt. Die Bezeichnung Leading (ausgesprochen wie “wedding”) stammt aus der dem Gebiet des Drucks mit Blei-Lettern: Um den Durchschuss zu erhöhen, also der Abstand zwischen zwei Reihen von Bleibuchstaben, werden dünne Bleistreifen dazwischen gelegt.

Verwirrung herrscht heute, da teilweise Leading eben mit Zeilenabstand gleichgesetzt wird. Auch in Grafikprogrammen wie Photoshop oder InDesign wird mit “Leading” der Zeilenabstand und nicht der Durchschuss angepasst.

Weitere Abstände

Spationieren

Beim Spationieren wird die Laufweite zwischen Buchstaben und Wörtern vergrössert.

Unterschneiden

Beim Unterschneiden wird die Laufweite zwischen Buchstaben verringert.

Sperren

Beim Sperren wird die Schriftlaufweite gleichmässig vergrössert.

Kerning

Kerning bezeichnet den Abstand zwischen bestimmten Buchstabenpaaren, oder zwischen zwei Glyphen (Buchstaben). In digitalen Fonts sind Kernpaare fest eingebaut, da das Kerning ein wichtiger Bestandteil von einem zusammenhängenden ästhetischen Schriftbild ist.

Das Kerning ist ein Spezialfall der Unterschneidung, bei dem nur zwischen kritischen Buchstabenpaaren die Laufweite verringert wird, um ein harmonisches Schriftbild zu erreichen.

Wie man im Bild oben erkennen kann, ist beim zweiten Beispiel ohne Kerning (Unterschneidung) der Abstand zwischen dem A und dem V viel zu gross und “AVE” sieht fast aus wie zwei Wörter. Beim Druck mit Bleilettern musste man wirklich bei den einzelnen Bleiblöcken Teile wegschleifen, damit der Abstand kleiner gemacht werden konnte.

Das Kerning kann auch mittels CSS Befehlen aktiviert oder deaktiviert werden, jedoch muss auch hier auf die Browserkompatibilität geachtet werden: In gewissen Browsern muss das Kerning mit anderen Befehlen aufgerufen werden. Ausserdem kommt es auf den Font an, ob die Kerningeinstellungen angepasst werden können. Dabei kann das Kerning nicht individuell angepasst werden, sondern nur ein-, ausgeschalten oder auf automatisch gesetzt werden. Der Kerning Befehl ist jedoch noch kein Standard, sondern erst eine Empfehlung.

Tracking, (Schrift)Laufweite

Mit Tracking oder letter-spacing, auf deutsch Laufweite, wird der Abstand in einem ganzen Wort, Satz oder Textblock geregelt. Das Tracking entspricht dabei dem Ausdruck Sperren, der vorhin bereits erwähnt wurde und die gleichmässige Laufweitenerweiterung beschreibt. Der CSS Befehl dafür heisst ebenfalls letter-spacing. Diese Eigenschaft ist nicht zu verwechseln mit der word-spacing Eigenschaft in CSS, die den Abstand zwischen zwei Wörtern in einem Text regelt. Der Abstand zwischen Buchstaben und Wörtern wird in Geviert (engl. quad) gemessen, wobei ein Geviert einem em, oder der Schriftgrösse/Kegelgrösse/-stärke entspricht.

Browser Umsetzung der line-height Eigenschaft

Es gibt vier unterschiedliche Boxen:

• Containing Box: Der ganze Paragraph/Abschnitt/Absatz, das ganze Element.
  • z.B. ein <p>-Element
• Inline Box: Alle in diesem Absatz verschachtelten Elemente, z.B. wenn ein Element durch <em></em> kursiv gemacht wird.
  • die Höhe der Inline Box entspricht der line-height
  • im Beispiel unten sind noch Rahmen in verschiedenen Farben eingefügt, die die Boxen sichtbar machen.

Bsp:

<p>Dies ist ein <em>neuer</em> Absatz,<br />
der zwei Zeilen lang ist.
<p>

Dies ist ein 

neuer 

Absatz,

der zwei Zeilen lang ist.

Dies ergibt eine Containing Box (grüner Rahmen) mit dem ganzen Satz. Diese Box enthält drei Inline Boxen (schwarzer Rahmen) in der ersten Zeile: “dies ist ein”, “neuer”, und “Absatz” und eine Inline Box in der zweiten Zeile. Ausserdem gibt es zwei Line-boxen (roter Rahmen): Die erste Zeile und die zweite Zeile.

• Line box: Diese Box entspricht allen Inline Boxen, die auf einer Zeile Platz in der Breite haben, die durch die Containing Box definiert ist.

Die Höhe der Line Boxen wird durch das höchste Element darin definiert: Also entweder die höchste Inline-Box, oder einem anderen Element, das in der Line-Box ist. Inline-Boxen können z.B. unterschiedliche Grössen durch die Definition einer anderen line-height, einer grösseren Schriftart, Hoch- oder Tiefstellen von Text, kursiv setzen von Text, usw. haben. Im Beispiel oben ist die Schriftgrösse des Wortes "Absatz" etwas grösser eingestellt, was dazu führt, dass die gesamte obere Line Box höher ist, als die untere.

Um die Vergrösserung der line-height beim Hoch- oder Tiefstellen zu verhindern, kann die line-height dieser Inline-Boxen auf 0 gesetzt werden, wodurch der halbe Durchschuss oben und unten vollständig entfernt wird.
Die Line-Boxen werden innerhalb der Breite der Containing-Box aufeinander gestapelt, und bilden so die Höhe der Containing-Box.

• Content Area: Dieser Bereich entspricht der Schriftgrösse vom Inhalt einer Inline-Box

Inline Box

Die Inline Box besteht aus der Content Area und dem halben Durchschuss oben und unten, die line-height (Zeilenhöhe).

Wenn die Zeilenhöhe (line-height) kleiner als die Schriftart definiert wird, entspricht die Höhe der Line Box der line-height: Der Inhalt kann also über die Inline-Box hinauslaufen und z.B. in die nächste Zeile rutschen.

Unten ist noch ein JSFiddle, bei dem die verschiedenen vorher erwähnten CSS Befehle gebraucht werden.

Die Schriftgrösse des Texts "ÄÂMofixj" ist mit 6rem (96px, da HTML font-size mit 16px definiert ist) definiert. Die grünen Balken rechts und links, die mit LH beschriftet sind, haben genau die Höhe der line-height Eigenschaft, die hier mit 10rem (160 px) definiert wurde.

Zum Herumspielen auch noch spannend: Wenn man die Schriftgrösse des HTML Elements ändert, wird alles mitskaliert, da die anderen Grössen in rem angegeben sind.

Nochmal zur eingangs bereits erwähnten komplizierten Geschichte des CSS-Pixels: die grösseren roten Rechtecke im Beispiel unten haben eine Grösse von 96px. Mein Laptop-Bildschirm (1440*900 px, 15'') hat eine Auflösung von 113.2 DPI. Diese 96px grossen Rechtecke sind 21.6 mm hoch, wenn ich diese nachmesse, was bedeutet, dass die 96px den physischen Pixeln entsprechen, da 96/113*2.54=2.157. Dies ist so bei eher tief auflösenden Geräten. Das CSS Pixel kommt vor allem bei höheren Auflösungen zum Tragen, z.B. bei einem Retina Screen, der bei 15" 2880*1800 Pixel hat, was 220 DPI entspricht.

weitere Quellen für die Erstellung der Grafik zu den typographischen Abständen:

https://www.yumpu.com/de/document/view/17945855/typografie-i/5
https://designschool.canva.com/blog/typography-terms/
https://de.wikipedia.org/wiki/Liniensystem_(Typografie)
https://de.wikipedia.org/wiki/Zeilendurchschuss
https://www.flickr.com/photos/nicksherman/5640736164
https://schriftgestaltung.com/schriftgestaltung/schriftanatomie.html
http://www.dbnl.org/tekst/voet004gold01_01/voet004gold01_01_0030.php
http://www.sksatz.com/Lettern2-040620.GIF
http://www.sksatz.com/Glossar.html
https://de.wikipedia.org/wiki/Letter
http://stackoverflow.com/questions/25520410/when-setting-a-font-size-in-css-what-is-the-real-height-of-the-letters
https://openclassrooms.com/courses/centrer-en-css
http://www.edv-lehrgang.de/css-vertical-align/
http://jaketrent.com/post/css-text-vertical-height/
http://christopheraue.net/2014/03/05/vertical-align/
http://www.thinkingwithtype.com/contents/letter/
http://www.creativebloq.com/typography/what-is-typography-123652/2
http://s24.photobucket.com/user/Nordenx/media/misc/anatomy_of_typography.jpg.html

Zurück zum ersten Teil