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

Dieser Blogpost ist in zwei Teile aufgeteilt:

In diesem ersten Teil geht es um absolute und relative CSS Einheiten, Schriftgrössen, und die line-height Eigenschaft in CSS.

Im zweiten Teil werden im Detail typographische Abstände und Höhen erklärt und in Relation zu verschiedenen CSS Befehlen gesetzt. Abschliessend wird die Browserumsetzung der Zeilenhöhen-Eigenschaft (line-height) erklärt und mit Beispielen veranschaulicht.

Was sind absolute Grössen?

px oder Pixel:

Ein CSS Pixel ist definiert als der 96ste Teil eines Zolls (inch), was bedeutet, dass 96 CSS px genau ein Zoll lang sind (2.54 cm). Die CSS Pixel-Einheit ist nicht mit den physischen Pixeln eines Monitors zu verwechseln, also den Bildpunkten der Anzeigegeräts.

Das Pixel ist als absolute Grösse definiert, ist aber dadurch eigentlich relativ zum Anzeigegerät: Es ist egal, ob das Anzeigegerät nun 320 * 480 oder 1920 * 1080 physische Pixel / Bildpunkte hat. 96 pixel müssten ein Zoll ergeben. Ein 23 Zoll Full HD Bildschirm (1920*1080 Pixel) hat eine Auflösung von 95,78 DPI also ~96 DPI, ein CSS Pixel auf einem solchen Bildschirm entspricht also ziemlich genau einem physischen Pixel. Im Test entsprach auch auf meinem Laptop Bildschirm, der eine Auflösung von 113.2 DPI hat, ein CSS Pixel etwa einem physischen Pixel. Relevant wird die Flexibilität des CSS Pixels erst bei höheren Auflösungen: Ein 4K UHD Bildschirm (3840*2160 Pixel) der gleichen Grösse (23 Zoll) hat eine Auflösung von 191,56 DPI, hier machen theoretisch 2 physische Pixel ein CSS Pixel aus. Es wird nun noch komplizierter, da das CSS Referenzpixel eigentlich ein Winkelmass ist und den Abstand zum Bildschirm auch noch miteinberechnet: Also die genaue Definition eines CSS Pixels sind 0.0213 Grad visueller Winkel. Dies ermöglicht es auch den erwarteten Abstand zum Anzeigegerät einzuberechnen, so dass ein 100*100 px grosses Rechteck sich immer ähnlich gross anfühlt, ob man jetzt das Smartphone recht nah an den Augen hat, oder etwas weiter weg vom Desktop Bildschirm sitzt.

So schreibt als Beispiel Apple zum iPhone 6, dass es eine Auflösung von 750*1334 Pixel bei einer Bildschirmdiagonalen von 4.7" hat, was einer Auflösung von 325,6 DPI entspricht. Das Browser Fenster beim iPhone 6 ist dann aber mit 559*375 px definiert, was dazu führt, dass ein CSS Pixel der Länge von 2,3 physischen Pixeln entspricht.

Die Auflösung von Anzeigegeräten wird in DPI (dots per inch) oder PPI (pixel per inch) angegeben. Heute ist DPI üblich, obwohl diese Einheit eigentlich aus der Drucktechnik stammt und die “dots” Druckpunkte und Pixel die physischen Pixel des Anzeigegeräts repräsentieren. Bei heutigen Bildschirmen können auch Subpixel gerendert werden, das heisst der rote, blaue oder grüne Teil eines Pixels, kann einzeln angesteuert werden um z.B. schräge Linien genauer darzustellen (Antialiasing).

in: Inch: ein Zoll

Ein Zoll entspricht 2.54 cm im metrischen System.

pt: Point: ein Punkt

Ein Punkt (pt) entspricht dem 72sten Teil eines Zolls, also 72 pt ergeben einen Zoll (2.54 cm). Ausserdem ergeben 4 px 3 pt, was bedeutet, dass ein Punkt ¾ oder 0.75px gross ist.

pc: ein Pica

Ein Pica entspricht dem 6ten Teil eines Zolls, 12 pt, oder 16 px. Im europäischen Masssystem der Typographie nennt man ein Pica ein Cicero. Ein pc entspricht einer mittleren Schriftgrösse und ist auch die Standardschriftgrösse vieler Browser.

cm, mm: Centimeter, Millimeter

In Ländern, die das metrische System benutzen sehr bekannt, entsprechen diese Einheiten auch als CSS Einheiten den bekannten Grössen. Diese Einheiten sind v.a. praktisch um ein Stylesheet für einen Ausdruck zu erstellen, da ein Rechteck das 10 mm hoch sein soll ausgedruckt genau 10 mm entsprechen sollte. Auf dem Bildschirm kommt es jedoch sehr auf die Auflösung an, wie gross dieses Rechteck dann wirklich dargestellt wird.

Die W3C School empfiehlt den Gebrauch von absoluten Masseinheiten für die Darstellung auf Bildschirmen wegen der vielen unterschiedlichen Bildschirmgrössen und Auflösungen nicht, sondern sollten eher verwendet werden, wenn das Output Medium bekannt ist, z.B. für ein Drucklayout.

Welches sind relative Grössen?

Relative Grössen werden in Abhängigkeit von anderen Masseinheiten angegeben und passen sich dadurch besser verschiedenen Ausgabemedien und Benutzereinstellungen an. Relative Einheiten sind v.a. wichtig, wenn Webseiten responsive designt werden, sich also dem Browserfenster oder der Bildschirmgrösse anpassen. Eine Box deren Grösse relativ definiert ist wird dann zum Beispiel grösser, wenn die Schriftart grösser ist und mehr Platz braucht.

percent, Prozent %

Prozent bezieht sich auf die Grösse des Beinhaltenden Blocks/Elements/Containers. Wenn die Schriftgrösse in Prozent angegeben wird, bezieht sich die Einheit auf die Schriftgrösse des Elternelements, bzw. die aktuelle Schriftgrösse, welche 100% entspricht. 

em

Die Einheit em stammt aus der Typographie und bezeichnet bei Blei-Lettern ungefähr die Breite (die Dickte) des Letters des Grossbuchstabens M, daher der Name. Der Grund ist, dass das M, beziehungsweise der Blei-Block mit dem Buchstaben M normalerweise gleich Breit wie hoch war und damit die Breite der Punktgrösse oder der Kegelgrösse entsprach. Ausserdem entspricht ein solches Quadrat (1 em x 1 em) einem Geviert, welches als Masseinheit für Abstände zwischen Buchstaben gebraucht wird und den Mindestabstand zwischen zwei Zeilen definiert.

Heute ist em als die Punktgrösse/Schriftgrösse des aktuellen Elements definiert, da der Grossbuchstabe M i.d.R etwas schmaler als hoch ist. Die Einheit em in CSS entspricht also der aktuellen Schriftgrösse des Elements auf das eine Grösse in em angewendet wird. Eine Ausnahme ist, wenn die Schriftgrösse selbst in em festgelegt wird: Dann bezieht sich die Einheit auf die Schriftgrösse des Elternelements. Auch interessant wird es, wenn man die Schriftgrösse des HTML Elements in em angibt: Wenn man dort als Wert 1.5 em angibt, wird die Root-Schriftgrösse 1.5 mal so gross sein wie die Browserstandardeinstellung (16px bei vielen Browsern, wenn nichts anderes eingestellt ist).

Gedankenstriche: Es gibt verschiedene Gedankenstriche mit Unterschiedlichen Bedeutungen oder Funktionen. Einer davon ist der “em-dash” “—” (—), und wird so genannt, weil er so breit wie 1 em ist. Der en dash “–” (–) entspricht traditionell 0.5 em und ist somit halb so breit wie die Punktgrösse der aktuellen Schriftart. In modernen Schriftarten ist der en dash jedoch nicht standardisiert und oft länger als 0.5 em.

Vererbung: Wenn die Einheit em in CSS gebraucht wird, ist es wichtig auf die Vererbung zu achten. Die Schriftgrösse ist eine vererbende Eigenschaft, was heisst, dass alle Kinderelemente die Schriftgrösse der Elternelemente übernehmen, wenn nichts anderes spezifiziert wird. Dies kann v.a. bei verschachtelten Elemten wie Listen mit Unterpunkten zu Problemen führen: Ist die Schriftgrösse eines Listenelements z.B. mit 0.5 em angebeben und es werden Unterpunkte erstellt (eigentlich eine Liste in einer Liste), dann ist die Schriftgrösse bei jedem tieferen Listenlevel noch halb so gross wie beim übergeordneten Listenlevel. Bei verschachtelten Elementen, bei denen die Schriftart in em definiert ist, wird die Schriftgrösse immer kleiner wenn em < 1 und immer grösser wenn em > 1.

Beispiel:

Für dieses Beispiel wird eine Schriftgrösse von 16px für das HTML- und das Body-Element angenommen:

parent-div = 1.125 em (16 px * 1.125 = 18 px) → child div = 1.125 em (18 px * 1.125 = 20.25 px)
→ beim Kinderelement wird von der Grösse des Elternelements aus gerechnet:
Wenn ein Elternelement die Schriftgrösse 1.125 em (18px) hat, entspricht beim Kinderelement 1 em 18 Pixeln, was in diesem Beispiel 1.125 rem entspricht.

ex

Diese Einheit funktioniert ähnlich wie em, ist jedoch durch die x-Höhe und nicht durch die Punktgrösse einer Schriftart bestimmt. Wird aber relativ selten verwendet.

ch

Genau wie ex ist auch ch von der Schriftart abhängig: ch bezeichnet die Breite der Zahl "0".

rem

Auch rem ist eine relative Masseinheit und ist verwandt mit em: rem bedeutet root em und entspricht der Schriftgrösse des html Elements (nicht des Body Elements). Diese Schriftgrösse entspricht in den meisten Browsern 12 pt oder 16 px, wenn der Benutzer keine andere Standardschriftgrösse im Browser eingestellt hat. Das Vererbungsproblem und die Berechnungen der Schriftgrössen mit em können so umgangen werden, aber es wird trotzdem noch Rücksicht auf Benutzerpräferenzen und -einschränkungen genommen.

Gründe für die Umstellung der Standardschriftart gibt es mehrere;

• z.B. Sehbeeinträchtigung
• weil man etwas anderes präferiert
• bessere Anzeige auf dem Anzeigegerät usw.

Es wird jedoch heiss diskutiert wie sinnvoll dies noch ist und bei vielen Browsern ist diese Funktion heutzutage eher versteckt und wird wahrscheinlich nur selten verwendet. Aus User Experience Sicht sollte man Nutzern die Möglichkeit lassen die Standardschriftgrösse umzustellen wenn sie das wollen, und Ihnen nicht diese Möglichkeit wegnehmen, indem man die Standardschriftgrösse überschreibt. Ein Gegenargumet ist, dass es sehr schwierig wird eine Webseite zu designen, bei der das gesamte Designlayout von einem Grundwert abhängt, der nicht bekannt ist.

Rem Einheiten können auch für media queries verwendet werden, da es nötig sein kann z.B. von einem zweispaltigen Layout in ein einspaltiges zu wechseln, wenn ein User in seinem Browser eine sehr grosse Standardschrift eingestellt hat: Ab einer gewissen Schriftgrösse ist es angenehmer zum Lesen wenn man nur eine Spalte hat. Wenn man die Standardschriftgrösse jedoch überschreibt (z.B. mit "html {font-size: 16px;}), macht dies nicht in jedem Fall Sinn.

Beim Einsatz von rem ist etwas Vorsicht geboten, da dies nicht von allen Browsern vollständig untersützt wird. Wenn z.B. die abgekürzte Font Eigenschaft verwendet wird, wird dieser Wert von IE9 & IE10 ignoriert.

Ein weiterer Grund für die Diskussion, ob em, rem oder doch px für die Schriftgrösse gebraucht werden sollen, ist, dass mit heutigen Browsern auch in px definierte Schriftgrössen veränderbar sind. In Firefox kann man in den Zoom Einstellungen sogar die Option “nur Text zoomen” wählen, was dazu führt, dass sich beim Zoomen nur die Textgrösse ändert. Dies ist auch bei absolut definierten Schriftgrössen möglich. Trotzdem kann man dagegenhalten dass es mühsamer ist auf jeder Seite den Zoom anzupassen, als einmal in den Einstellungen die Standardschriftgrösse zu ändern.

Unten ist ein JSFiddle Beispiel angefügt das zeigt, wie das mit der Vererbung bei verschachtelten Elementen funktioniert, bei denen die Schriftgrösse in em angegeben ist und wie sich die rem Einheit auswirkt.

Viewport: vh, vw, vmin, vmax

Eine weitere Möglichkeit, die jedoch mit etwas Vorsicht zu geniessen ist, ist die Angabe einer Schriftgrösse oder einer Boxgrösse mit einem Quotienten des Viewports der aktuellen Grösse des Browserfensters:

• vh: 1% der Browserfensterhöhe
• vw: 1% der Broswerfensterbreite
• vmin: 1% der kürzeren Viewportachse (z.B. bei mobile portrait die horizontale Achse)
  • Entspricht also je nach dem einem vh, oder einem vw
• vmax: 1% der längeren Viewportachse (z.B. bei mobile portrait die vertikale Achse)
  • Entspricht also je nach dem einem vh, oder einem vw

Diese Werte werden aber nicht von allen Browsern gleich gut unterstützt und sollten daher vorsichtig, oder mit einem Fallback Befehl gebraucht werden: Das Fallback Prinzip beruht darauf, dass etwas in CSS definiert wird, und dann gleich überschrieben wird. Wenn man zB eine Boxbreite mit 20vw angibt, und gleich danach mit 20vmax überschreibt, wird die Box mit dem vmax Wert berechnet, wenn der Browser die Einheit kennt. Wenn nicht werden einfach die 20vw verwendet.

#myBox { width: 20vw; /*fallback for IE9*/ width: 20vmax; }

Es gibt also ganz unterschiedliche Möglichkeiten, die Grösse von Text oder anderen Elementen anzugeben. doch was macht die Schriftgrösse überhaupt aus? Warum kann ein Text in gleicher Grösse mit verschiedenen Schriftarten völlig unterschiedlich aussehen? 

Einschub: Punktgrösse und Wahrnehmung der Schriftgrösse

Verschiedene Schriftarten mit der gleichen Punktgrösse sehen nicht gleich gross aus. Auch dieses Phänomen hat seinen Ursprung in den Blei-Lettern. Letter, Drucktypen bzw. Typen sind Bestandteile einer Satzschrift aus Blei. Bei einer Letter bezeichnet die Punktgrösse oder Kegelstärke genau die Höhe des Bleiblocks auf dem der Buchstabe ist, egal wieviel Freiraum (Fleisch) es noch rundherum hat. Dieser Platz wird unter Umständen auch benötigt, zum Beispiel beim accent circonflexe auf dem Buchstaben Â.

Schriften und Texte werden heute nicht mehr vorwiegend mit Bleiblöcken erstellt, aber das Konzept existiert auch im digitalen Zeitalter noch: Digitale Schriften werden ebenfalls in einem Rechteck (dem em) gerendert. Das Rechteck wird vom Computer so skaliert, dass das em genau der gewählten Punktgrösse entspricht. Zwei Schriftarten mit gleicher pt oder em Grösse können also sehr unterschiedlich gross wirken, wenn die Buchstaben der einen Schriftart weniger Platz in einem em einnimmt. Um es sich einfacher vorzustellen: Wenn es viel Leerraum auf einer Letter hat (Fleisch). Dies kann auch zu interessanten Geschichten führen, wenn ein amtliches Dokument mit einer Schriftgrösse von 12 pt geschrieben werden muss, aber die Schriftart nicht spezifiziert wird. Nur durch Abmessen ist es also nicht möglich die Schriftgrösse herauszufinden.

Line-Height: Zeilenhöhe auf Webseiten per CSS definieren

Die Zeilenhöhe (line-height) Eigenschaft in CSS kann mit verschiedenen Werten definiert werden. Line-height ist eine vererbende Eigenschaft, was bedeutet, dass der Wert für alle Kinderelemente übernommen wird, ausser es wird in einem Kinderelement etwas anderes spezifiziert. Die Zeilenhöhe wird vom Browser in Pixel umgerechnet, damit diese dargestellt werden kann.

inherit

Das Element erbt die Zeilenhöhe des Elternelements.

percent, Prozent, %

Mit einer Prozentzahl wird die Zeilenhöhe als Prozentsatz der Schriftgrösse des aktuellen Elements angegeben. Dieser Wert wird berechnet und der berechnete Wert wird an die Kinderelemente übergeben: Wird im Body die Standardschriftgrösse (16 px) übernommen und die Zeilenhöhe als 150% definiert resultiert dies in einem Zeilenabstand von 24 px. Dieser berechnete Wert wird an alle Kinderelemente weitervererbt, egal wie gross dort die Schriftart ist.

Bsp.:
body { font-size: 16px; line-height: 120%; }

h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }

elementfont-sizeline-heightberechnete line-height

body16 px120%19.2 px

h132 pxerbt berechneten Wert - 19.2 px19.2 px

p16 pxerbt berechneten Wert - 19.2 px19.2 px

footer12 pxerbt berechneten Wert - 19.2 px19.2 px

length value, ein Längenwert: px, em, rem

px, Pixel:

Angabe der Zeilenhöhe in Pixel. Alle Kinderelemente erhalten genau die gleiche Zeilenhöhe.

em, rem:

Zeilenhöhe in Abhängigkeit der aktuellen Schriftgrösse. Auch hier wird der berechnete Wert weitervererbt und nicht das Verhältnis: Wenn ein Element eine Zeilenhöhe von 1.5 em hat, ist die Zeilenhöhe des Kinderelements 1.5 mal so gross wie die Schriftgrösse des Elternelements und nicht 1.5 mal so gross wie die Schriftgrösse des aktuellen Kinder-elements.

Bsp.:
body { font-size: 16px; line-height: 1.2em; }

h1 { font-size: 32px; } p { font-size: 16px; } #footer { font-size: 12px; }

elementfont-sizeline-heightberechnete line-height

body16 px1.2em19.2 px

h132 pxerbt berechneten Wert - 19.2 px19.2 px

p16 pxerbt berechneten Wert - 19.2 px19.2 px

footer12 pxerbt berechneten Wert - 19.2 px19.2 px

normal

“Normal” ist der Standardwert für den Zeilenabstand, solange kein Elternelement etwas anderes spezifiziert hat. “Normal” wird nicht von allen Browsern gleich interpretiert und liegt irgendwo zwische 1.0 und 1.2 mal der aktuellen Schriftgrösse des Elements. Alle Kinderelemente erhalten eine Zeilenhöhe relativ zu ihrer Schriftgrösse.

number value (unitless)

Eine einfache Zahl ohne Einheit, z.B. 1.2 kann auch gebraucht werden um die Zeilenhöhe zu definieren. Der Zahlenwert funktioniert bei der Vererbung genau gleich wie normal, aber man kann den genauen Faktor angeben, mit welchem die Schriftgrösse multipliziert werden soll um die Zeilenhöhe zu berechnen. Es wird der Faktor weitervererbt: Alle Kinder eines Elements mit 1.2 Zeilenhöhe haben eine Zeilenhöhe, die 1.2 mal so gross ist wie deren Schriftgrösse.

elementfont-sizeline-heightberechnete line-height

body16 px1.219.2 px

h132 px1.238.4 px

p16 px1.219.2 px

footer12 px1.214.4 px

Welche Einheit soll man brauchen?

Oft ist es am Besten, ein Zahlenwert ohne Einheit zu verwenden, da sich so die Zeilenhöhe immer der Schriftgrösse anpasst und man den Faktor angeben kann.

Überschriften können in der Regel eine kleinere Zeilenhöhe als der Body Text haben. Im CSS Code kann z.B. die Body Zeilenhöhe auf 1.5 gesetzt werden und bei H1 einfach mit 1.2 überschrieben werden.

Wieso relative Grössen? Wann ist em/rem nützlich?

Relative Einheiten wie rem oder em sind praktisch für responsive Designs, da Abstände und Boxgrössen von der Schriftgrösse abhängig gemacht werden können, bei rem hat man zusätzlich noch den Vorteil, dass die Vererbung nicht zu Problemen führt. Zum Beispiel kann sich die Navigation vergrössern oder verkleinern, je nach dem wie gross die Schriftart ist. Wenn die Standardschriftgrösse nicht durch die Spezifikation einer Schriftgrösse beim HTML Element überschrieben wird, lässt man den Benutzern die Freiheit ihre Schriftgrösse selber zu wählen und ermöglicht ihnen eine bessere User Experience durch die Beachtung der Accessibility, einem wichtigen Aspekt der User Experience. Wie bereits vorher erwähnt, herrscht hier kein klarer Konsens darüber, da die Standardschriftgrösse wohl nur von wenigen Benutzern im Browser geändert wird. Ausserdem ist es schwierig ein Layout zu erstellen, das auf einer Grundgrösse basiert, die unter Umständen nicht bekannt ist. Da kann man darüber philosophieren, was nun besser für die User Experience ist: Ob ein (wahrscheinlich kleiner) Teil der Benutzer die Standardschriftgrösse mit einem Effekt ändern kann oder wenn nur die restlichen Grössen voneinander abhängen und das Layout gut geplant werden kann.

Wenn die Zeilenhöhe durch die Angabe eines Faktors ohne Einheiten relativ definiert wird, kann auch diese Grösse von der Schriftgrösse abhängig gemacht werden, so dass ein kohärentes Design möglich ist, ohne dass ein Abschnitt plötzlich verdrückt oder langgezogen wirkt.

Ein weiterer Vorteil von relativ definierten Schriftgrössen, Zeilenabständen und Boxgrössen ist dass man ein Design sehr einfach skalieren kann indem man an einem Ort die Schriftgrösse ändert, ohne dass man an 50 verschiedenen Stellen dies manuell anpassen muss.

Die Einheiten em und rem für die Schriftgrösse zu verwenden erfordert ein Umdenken: Man muss die Vererbung beachten und ein bisschen rechnen, z.B. mithilfe dieser Seite: http://pxtoem.com/.

Basierend auf dem Guide von K. Bracey sind Angaben in em vor allem nützlich um Grössen zu definieren, die nicht von der Schriftgrösse des HTML Elements abhängen sollen. Darum ist die em Einheit am besten für die Gewährleistung der Skalierbarkeit im Kontext eines spezifischen Design Elements geeignet. Zum Beispiel padding, margin & line-height der Navigation in em anzugeben, macht die Grösse der Navigationsleiste abhängig von der Schriftgrösse der Navigation, die durchaus auch kleiner oder grösser sein kann als die Standardschriftgrösse. Weitere Anwendungsgebiete beinhalten z.B. Buttons, Headings und Menü-Items.

Rem Einheiten sollten nach diesem Guide verwendet werden, um die Skalierbarkeit des Layouts beizubehalten, aber ohne die Schwierigkeiten der Vererbung bei der em Einheit.

Ausserdem wird nicht empfohlen die em Einheit für die Schriftgrösse zu benutzen, da es meistens wenig Gründe gibt, die Schriftgrösse relativ zu einer anderen Grösse als der Standardschriftgrösse zu setzen. Fälle in denen das aber nützlich sein kann sind z.B Dropdown Menüs, bei dem die Schriftgrössen immer kleiner werden sollen pro tieferes Level, oder ein Schrift-Icon, das in einem Button eingesetzt wird, wobei das Icon abhängig von der Schriftgrösse des Buttons sein soll.

Weiter sollte nach diesem Guide weder em noch rem Einheiten gebraucht werden um Mehrspalten-Layouts zu definieren: Hier eignet sich die Prozentangabe, oder ein Viewportanteil besser, um unvorhersehbare Browserfenstergrössen abzudecken. Einzelne Spalten können aber durchaus rem Werte beinhalten um die maximale Breite (max-width) zu definieren um zu verhindern, dass die Spalte zu breit wird und um den Text noch angenehm lesen zu können.

Soviel zu den CSS Einheiten, Schriftgrösse und der Zeilenhöhe in CSS.

Im zweiten Teil geht es dann um typographische Abstände, und wie diese genau mit den CSS Befehlen zusammenhängen. Ausserdem wird erklärt, wie die Zeilenhöhe vom Browser umgesetzt wird. Schauen Sie also bald wieder vorbei um den zweiten Teil zu lesen.

Zum zweiten Teil