{"id":739,"date":"2016-10-09T20:14:39","date_gmt":"2016-10-09T18:14:39","guid":{"rendered":"http:\/\/www.christoph-freyer.at\/blog\/?p=739"},"modified":"2016-12-26T02:08:41","modified_gmt":"2016-12-26T01:08:41","slug":"ueber-schriftgroesse-und-zeilenhoehe","status":"publish","type":"post","link":"https:\/\/christoph-freyer.at\/blog\/ueber-schriftgroesse-und-zeilenhoehe\/","title":{"rendered":"\u00dcber Schriftgr\u00f6\u00dfe und Zeilenh\u00f6he"},"content":{"rendered":"

\"Zeilenh\u00f6he<\/a><\/p>\n

Zusammenspiel von Schriftgr\u00f6\u00dfe, Zeilenh\u00f6he und Zeilenl\u00e4nge<\/h2>\n

Als ich vor Kurzem eine von mir erstellte und verwaltete Website aktualisierte, fiel mir ihr Alter auf. Da habe ich mich gefragt, was den optischen Unterschied ausmacht und ob sie den heutigen Lesegewohnheiten noch entspricht. Dabei musste ich feststellen: nicht nur wir, sondern auch Websites altern. Nach einigen kleinen \u00c4nderungen war alles wieder im gr\u00fcnen Bereich.<\/p>\n

Ja, es gibt ein \u201efacelifting\u201c f\u00fcr Websites! Wenn eine Website bereits einige J\u00e4hrchen auf dem Buckel hat, ben\u00f6tigt sie entweder ein Redesign oder zumindest einige Anpassungen. Mit optimierter Schriftgr\u00f6\u00dfe und Zeilenh\u00f6he erreicht man schon einige positive \u00c4nderungen. Man erh\u00e4lt damit oft nicht nur ein frischeres Aussehen, sondern erreicht auch meist im Bereich der Usability\u00a0\u2013 durch leichtere Lesbarkeit \u2013 wirkliche Verbesserungen.<\/p>\n

Was ist typisch f\u00fcr alte Websites?<\/h3>\n

Woran erkennt man eine Website, die vor oder bis Anfang der 2010er-Jahre entstanden ist? H\u00f6chstwahrscheinlich ist es die Schriftgr\u00f6\u00dfe. Seiten aus dieser Zeit weisen meist eine font-size von 12\u201314px auf. Das waren damals die g\u00e4ngigen Gr\u00f6\u00dfen. Wer Anfang der 2010er-Jahre auf gute Lesbarkeit geachtet hat und auch die Browserstandards respektierte, wird nun wahrscheinlich feststellen, dass der Flie\u00dftext im Vergleich zu heute \u00fcblichen Seiten kleiner ist \u2013 ich nehme 14px an. Das ist wahrlich nicht gut zu lesen.<\/p>\n

Warum hat sich die Gr\u00f6\u00dfe ge\u00e4ndert?<\/h3>\n

Auf modernen Ger\u00e4ten werden die damals gestalteten Seiten immer schwerer lesbar. Das liegt nicht nur an unseren von der Bildschirmarbeit maltr\u00e4tierten Augen und unserer vom Alter beeintr\u00e4chtigten Sehsch\u00e4rfe.
\nIm Laufe der Zeit wurden die Bildschirme gl\u00fccklicherweise immer besser. Sonst h\u00e4tten wir noch immer diese Dinger mit gr\u00fcner oder bernsteinfarbener Schrift. In den letzten Jahren sind auch noch Smartphones und Tablets mit ihren hochaufl\u00f6senden Displays, die eine doppelt bzw. dreifach so hohe Pixeldichte aufweisen, hinzugekommen, die alles noch einmal kleiner erscheinen lassen.<\/p>\n

Nicht umsonst passen sich die Browserstandards der Hardware an. Die Basisschriftgr\u00f6\u00dfe lag noch vor einigen Jahren bei 14px \u2013 heute verzeichnen wir 16px. Auch Frameworks wie Bootstrap reagierten bereits darauf und haben diese in der neusten Version (Bootstrap 4) auch auf 16px angehoben.<\/p>\n

Bildschirmaufl\u00f6sungen im Vergleich<\/h3>\n

Um diese Entwicklung zu veranschaulichen m\u00f6chte ich kurz einige Phasen der Desktopbildschirme aufzeigen:
\nDer Macintosh Plus, das kleine All-in-one-Kultger\u00e4t aus der zweiten H\u00e4lfte der 1980er-Jahre,\u00a0 hatte bei 9\u2033 Bildschirmdiagonale eine Aufl\u00f6sung von 512 \u2715 342px. Im Laufe der Zeit wurden die Bildschirme immer gr\u00f6\u00dfer und besser und \u00fcber viele Jahre hat sich dann die Aufl\u00f6sung von 1024 \u2715 768px gehalten. Nach dem urspr\u00fcnglichen Umrechnungswirrwarr zwischen Printbereich und Bildschirm setzte sich letztendlich eine Standardfontgr\u00f6\u00dfe f\u00fcr Browser von 14px durch, die eigentlich noch von schlechteren Aufl\u00f6sungen herr\u00fchrt. Erst 2012 wurde die g\u00e4ngigste Aufl\u00f6sung von der heute noch immer (!) h\u00e4ufigsten Gr\u00f6\u00dfe 1366 \u2715 768px abgel\u00f6st. Auch ich habe, bis ich die untenstehende Statistik gesehen habe, das selbst nicht glauben k\u00f6nnen. (Quelle: http:\/\/gs.statcounter.com\/<\/a>)<\/p>\n

\"Weltweite<\/a>
Weltweite Verteilung der Bildschirmaufl\u00f6sung 2010\u20132016 \u00a9 StatCounter<\/figcaption><\/figure>\n

Diese Statistik ergibt sich aus der weltweiten Betrachtung, wir Technikaffine in einem Wohlstandsland verwenden hingegen bereits viel bessere Bildschirme. Das Gros der derzeit bei uns angebotenen Displays weist 1600\u20131900px Breite bei 14\u201324\u2033 Bildschirmdiagonale auf (hier sind auch Laptops, aber keine Retinadisplays mitgez\u00e4hlt).<\/p>\n

Was macht nun einen Text lesbarer?<\/h3>\n

Derzeit widmen sich immer mehr Designer der \u201eguten\u201c Schriftgestaltung. Mit der immer h\u00f6heren Anzahl von Stunden, die wir vor dem Bildschirm verbringen und digitale Inhalte konsumieren, finden es immer mehr Webdesigner notwendig, Texte auch entsprechend zu gestalten. Es ist jetzt eine nicht gerade unangenehme Modeerscheinung, dass Websites typografisch anspruchsvoll gestaltet werden.<\/p>\n

Das moderne Design beginnt vor allem bei gr\u00f6\u00dferen Schriften: Wie bereits erw\u00e4hnt wird dies durch die besseren Bildschirme notwendig. Der Grundtenor ist heute eine Mindestgr\u00f6\u00dfe von 16px.<\/p>\n

Zeilenh\u00f6he (line-height)<\/h3>\n

Aber es z\u00e4hlt nicht alleine die Schriftgr\u00f6\u00dfe (font-size), ein wichtiger Faktor ist dabei auch die Zeilenh\u00f6he (line-height). Diese gibt die Textzeilenh\u00f6he an. Mit ihr kann man Texte leserlich, aber auch g\u00e4nzlich unleserlich machen. Im Idealfall wird das Auge durch Auswahl der richtigen Zeilenh\u00f6he unterst\u00fctzt und im Text gef\u00fchrt.<\/p>\n

Ist der Abstand zu gering, verliert man die Zeile und muss sie unweigerlich wiederholen. Ist der Zeilenabstand hingegen zu gro\u00df, driftet alles optisch auseinander und man verliert den Eindruck eines geschlossenen Textes. Mit der richtigen Zeilenh\u00f6he kann man das Springen und Abschweifen minimieren und Leser somit auf der Seite behalten.<\/p>\n

Sicherlich hilft hier bereits die Erfahrung aus dem Printbereich: Es gilt die Faustregel: 150%. Also ein Verh\u00e4ltnis Text zu Zeilenh\u00f6he von 1:1,5.
\nWie die Zeilenh\u00f6he im Stylesheet notiert wird, ist den beiden unteren Code-Beispielen zu entnehmen.<\/p>\n

p {\r\n    font-size: 16px; \r\n    line-height: 1.5; \r\n}<\/code><\/pre>\n
In der einzeiligen Kurzschreibweise sieht das dann folgenderma\u00dfen aus:<\/p>\n
p { font: 16px\/1.5 arial,sans-serif; }<\/code><\/pre>\n
Hat man, wie in diesem Beispiel, eine Schriftgr\u00f6\u00dfe von 16px und eine Zeilenh\u00f6he von 1,5 so besagt dies, dass die Schriftgr\u00f6\u00dfe mit dem Faktor 1,5 multipliziert wird (16\u00a0\u00d7 1,5 = 24). Da die Schrift innerhalb der Zeile immer vertikalzentriert ist, ergibt das \u00fcber und unter der Schrift jeweils einen Abstand von 4px (4px + 16px + 4px = 24px).<\/p>\n
Die line-height l\u00e4sst sich nicht nur numerisch, sondern auch prozentuell (%) oder als L\u00e4nge (em, rem oder px) angeben:<\/p>\n
p {\r\n    line-height: 150%; \r\n    line-height: 1.5em; \r\n    line-height: 1.5rem; \r\n    line-height: 24px; \r\n}<\/code><\/pre>\n
Die rein numerische Schreibweise hat den Vorteil, dass sich der Wert immer auf die Schrift selbst bezieht, w\u00e4hrend die anderen Notationen sich auch auf das Elternelement beziehen k\u00f6nnen und so wie das untenstehende Beispiel zeigt, es dabei zu unliebsamen \u00dcberraschungen f\u00fchren kann. Diese von mir hier \u00fcbersetzte und leicht adaptierte Veranschaulichung stammt aus dem MDN (Mozilla Developer Network). https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/line-height<\/cite><\/p>\n
See the Pen line-height<\/a> by Christoph Freyer (@christophfreyer<\/a>) on CodePen<\/a>.<\/p>\n