Responsive Typografie – Schriftgröße ans Endgerät anpassen

Web­sei­ten die­nen der Ver­mitt­lung von Inhal­ten, die­se Inhal­te bestehen zu einem sehr hohen Anteil aus rei­nem Text. Die­ser Umstand hat zur Fol­ge, dass die Typo­gra­fie ins­be­son­de­re für ver­schie­de­ne End­ge­rä­te eine ent­schei­den­de Rol­le spielt und bei der Gestal­tung nach dem Ansatz des Respon­si­ve Web­de­signs beach­tet wer­den sollte.

Schriftgröße in Abhängigkeit zur Distanz des Nutzers

Ver­schie­de­ne End­ge­rä­te und deren unter­schied­li­che Nut­zung füh­ren dazu, dass es einen gro­ßen Unter­schied macht, ob zum Lesen der Inhal­te einer Web­sei­te ein Smart­phone, Tablet oder ein nor­ma­ler Rech­ner genutzt wird. Bei einem Tablet ist die Ent­fer­nung zwi­schen dem Anwen­der und dem End­ge­rät in der Regel höher als bei einem Smart­phone. Daher ist auf einem Tablet eine grö­ße­re Schrift für die opti­ma­le Les­bar­keit von Vor­teil. Beim Smart­phone hin­ge­gen kann eine etwas klei­ne­re Schrift­grö­ße zum Ein­satz kom­men, da bei die­sen End­ge­rä­ten die Distanz bei der Betrach­tung gerin­ger ist. Die höchs­te Distanz zwi­schen dem Anwen­der und dem zu betrach­ten­den Inhalt liegt am nor­ma­len Rech­ner oder Note­book vor.

Bessere Lesbarkeit durch angepassten Zeilenabstand

Auf den Zei­len­ab­stand trifft das glei­che wie auf die Schrift­grö­ße zu. Die­ser kann auf klei­nen Dis­plays von Smart­phones gerin­ger aus­fal­len als auf Tablets oder nor­ma­len Rech­nern und soll­te immer rela­tiv zur genutz­ten Schrift­grö­ße sein. Als opti­ma­ler Wert wird auf Desk­top-Rech­nern ein Zei­len­ab­stand von 140 % bei einer Schrift­grö­ße von 16px ange­ge­ben. Dies ent­spricht den Stan­dard­wer­ten zur Dar­stel­lung von Tex­ten in den meis­ten aktu­el­len Webbrowsern.

Einfache Umsetzung von Responsive Typografie mit CSS3 Media Queries

Damit die Anpas­sung der Schrift­grö­ßen für die ver­schie­de­nen End­ge­rä­te ein­fach per Media Queries vor­ge­nom­men wer­den kann, wird statt fes­ter Pixel­an­ga­ben die Maß­ein­heit em ver­wen­det. Die­se bie­tet den Vor­teil, dass die Schrift­grö­ßen von­ein­an­der abhän­gig sind und nur ein Wert im gesam­ten Style­sheet geän­dert wer­den muss um alle Schrif­ten auf ein­mal zu ver­grö­ßern oder zu ver­klei­nern. Das Ver­hält­nis der Schrift­grö­ßen zuein­an­der bleibt dabei erhalten.

body { font-size: 100%; }
h1 { font-size: 2em; }
p { font-size: 1em; }
  @media screen and (min-width: 960px){
    body{ font-size: 125%; }
}

Eine Über­schrift h1, die dop­pelt so groß wie der eigent­li­che Text im Absatz p ist, erhält den Wert font-size: 2em. Dem Text wird die Grö­ße font-size: 1em zuge­wie­sen. Sofern dem body Ele­ment nun eine font-size von 100% gege­ben wird, erfolgt die Dar­stel­lung der Über­schrift im Web­brow­ser mit einer Schrift­grö­ße von 32px und der Text im Absatz wird mit 16px dar­ge­stellt. Ver­än­dert sich nun die zur Ver­fü­gung ste­hen­de Pixel­brei­te auf min­des­tens 960px oder mehr wird die font-size für das body Ele­ment auf 125% erhöht. Dies hat eine Schrift­ver­grö­ße­rung der Über­schrift auf 40px und des Tex­tes auf 20px zur Fol­ge. Glei­ches kann auch für den Zei­len­ab­stand fest­ge­legt werden.

Verschiedene Endgeräte stellen unterschiedliche Anforderungen an die Typografie

Beim Respon­si­ve Web­de­sign spielt die Typo­gra­fie durch die Eigen­hei­ten der Nut­zung ver­schie­de­ner End­ge­rä­te eine wich­ti­ge Rol­le und soll­te daher bei der Gestal­tung und Umset­zung von reak­ti­ons­fä­hi­gen Web­sei­ten Berück­sich­ti­gung fin­den. Durch Respon­si­ve Typo­gra­fie erhält jede Nut­zer­grup­pe die Inhal­te auf dem End­ge­rät in der opti­ma­len Schrift­grö­ße und mit dem jeweils dazu pas­sen­den Zei­len­ab­stand dargestellt.