Typografie im Web – Die richtigen SchriftgrĂ¶ĂŸen definieren

Marco Fernandez im Portrait
Von Marco

In diesem Beitrag geht es darum, wie ich die richtigen SchriftgrĂ¶ĂŸen fĂŒr Webseiten festlege. Wie so oft zĂ€hlt auch hier: Viele Wege fĂŒhren nach Rom, und jeder Einzelne dieser AnsĂ€tze hat seine Daseinsberechtigung. Das Problem: Viele Vorgehensweisen zielen in erster Linie leider nur auf die typischen Desktop-Auflösungen ab, und folgen darĂŒber hinaus nicht immer einer stringenten Logik.

Eigentlich ist das Definieren sinnvoller SchriftgrĂ¶ĂŸen recht einfach. Im Folgenden beschreibe ich kurz unseren Prozess zur Definition von SchriftgrĂ¶ĂŸen. Diese Methode ist leicht nachvollziehbar und – bis auf wenige Ausnahmen – auf alle gĂ€ngigen GerĂ€tegrĂ¶ĂŸen anwendbar.

Der Paragraph

Der grĂ¶ĂŸte Textanteil auf einer Website ist im besten Fall der Paragraph, also Fließtext. Die SchriftgrĂ¶ĂŸe fĂŒr diese Textart sollte stets als erstes und so definiert werden, dass sie optimal auf dem jeweiligen EndgerĂ€t lesbar ist.

Hier beginne ich zumeist mit dem “normalen” Desktop, also einer Auflösung zwischen 1140 und maximal 1920 Pixel. Dazu nehme ich mir irgendeinen Text (der Inhalt spielt hierbei keine Rolle) und suche mir die gewĂŒnschte, oder gar die vom Corporate Design vorgegebene, Schriftart aus.

Essenziell ist es, bereits zu Beginn die Breite der Textblöcke festzulegen bzw. auf ein bestimmtes Maß zu begrenzen. Textblöcke sollten auf dem Desktop zwischen 400 und 600 Pixel breit sein, da zu schmale, wie auch zu breite Textblöcke die Lesbarkeit der Texte verschlechtern. Das liegt mitunter an der Art und Weise, wie das menschliche Auge die Texte “scannt”. Um zu vermeiden, dass der Leser zu schnell ermĂŒdet, sollte er auf keinen Fall gezwungen sein, aufgrund einer großen Laufweite den Kopf schwenken zu mĂŒssen, um den Inhalt eines Textblocks vollstĂ€ndig erfassen zu können.

Der angelegte Textblock mit der passenden Breite und der CD-konformen Schriftart wird anschließend soweit angepasst, dass die SchriftgrĂ¶ĂŸe und der Zeilenabstand ein gut lesbares und optisch harmonisches Gesamtbild ergeben. Die SchriftgrĂ¶ĂŸe ist dabei abhĂ€ngig von der gewĂ€hlten Schriftart, sollte aber generell zwischen 18 und 24 px liegen.

Exkurs: Als das Web noch ganz frisch war, wurde die Paragraph-GrĂ¶ĂŸe meist auf 9 bis 11 Pixel gesetzt, das war die unterste Grenze des Lesbaren bei einer Auflösung von 72 Dots per Inch (DPI; Punkte pro Zoll). Zu beachten ist bei dieser Information, dass Websites damals in 800 Ă— 600 Pixel gestaltet wurden. GlĂŒcklicherweise sind diese Zeiten inzwischen aber vorbei. 

Wie die SchriftgrĂ¶ĂŸe, ist auch der Zeilenabstand mit Bedacht zu wĂ€hlen und darf weder zu groß noch zu klein sein, da in beiden FĂ€llen eine deutlich schlechtere Lesbarkeit die Folge ist. Als Faustregel kann man den Zeilenabstand auf das 1,4 bis 1,6-fache der SchriftgrĂ¶ĂŸe setzen. Auch diese Entscheidung ist im Zusammenhang mit der gewĂ€hlten Schriftart zu treffen. Insgesamt muss ein harmonisches und gut lesbares Bild das Ergebnis sein. Kann man den Text schnell erfassen, passt alles. Hier kann gerne der Tischnachbar kurz herbeigerufen und befragt werden.

Nachdem die SchriftgrĂ¶ĂŸe fĂŒr Desktop festgelegt wurde, wird auf dieselbe Weise die SchriftgrĂ¶ĂŸe (Paragraph) fĂŒr weitere EndgerĂ€te definiert (Smartphone, Tablet, Wide-Desktop, ...).

Somit haben wir die Basis fĂŒr alle weiteren SchriftgrĂ¶ĂŸen geschaffen und können mit den Überschriften fortfahren.

Headlines

Auf Basis der definierten SchriftgrĂ¶ĂŸe des Paragraph-Textes definiere ich ein VerhĂ€ltnis, mit dem ich alle weiteren SchriftgrĂ¶ĂŸen festlegen kann. Am Beispiel Desktop zeige ich nun, wie ich hierzu vorgehe.

Ich definiere ein VerhĂ€ltnis von z. B.: 1 zu 1,3 und beginne die Skalierung der Headlines. Bei einer SchriftgrĂ¶ĂŸe von 20 Pixel wĂ€re somit die nĂ€chstgrĂ¶ĂŸere Schrift (in den meisten FĂ€llen eine H4) das 1,3-fache von 20, also 26 Pixel.

Die nĂ€chste SchriftgrĂ¶ĂŸe, also die H3, wĂ€re dann wiederum das 1,3-fache der H4, also 33,8 Pixel (gerundet auf 34 Pixel), die H2 wĂ€re 42,9 (gerundet 43) Pixel und die H1 55,9 Pixel (gerundet auf 56 Pixel).

Die verschiedenen SchriftgrĂ¶ĂŸen in unserem Beispiel lauten nun also wie folgt:

P: 20 px,
H4: 26 px,
H3: 34 px,
H2: 43 px,
H1: 56 px.

Das Praktische an dieser Methode ist, dass nach oben und unten immer das VerhĂ€ltnis beibehalten werden kann, und bei Bedarf jederzeit und schnell, kleinere und grĂ¶ĂŸere SchriftgrĂ¶ĂŸen definiert werden können. Beispielsweise könnte sich im Gestaltungsprozess herausstellen, dass ein Titel benötigt wird, der grĂ¶ĂŸer darzustellen ist als die normale H1. In diesem Fall kann ich einfach die H1 zur Hand nehmen, diese mit 1,3 multiplizieren und schon ist “automagisch” die nĂ€chstgrĂ¶ĂŸere SchriftgrĂ¶ĂŸe festgelegt, ohne lange herumprobiert zu haben. Das Ganze funktioniert natĂŒrlich auch analog fĂŒr den Fall, dass eine noch kleinere SchriftgrĂ¶ĂŸe als jene des Paragraphs benötigt wĂŒrde. Die nĂ€chstkleinere SchriftgrĂ¶ĂŸe als die des Paragraphs wĂ€re somit 15 px (20 px / 1,3) und so weiter.

Wenn ihr nun bemerkt, dass die H1 zu groß oder zu klein scheint, könnt ihr einfach ein grĂ¶ĂŸeres oder kleineres VerhĂ€ltnis wĂ€hlen und rechnet alle GrĂ¶ĂŸen, ausgehend vom Paragraph, neu durch. Im Nu habt ihr eine neue Skalierung.

Übrigens: Wem diese Rechnerei zu anstrengend sein sollte, der kann auch ganz einfach auf www.modularscale.com gehen, und sich dort verschiedene VerhĂ€ltnisse (Ratios) darstellen lassen. Ob em, rem oder px spielt dabei keine Rolle, es dreht sich einzig um das VerhĂ€ltnis zueinander.

Unser Angebot

Webtypografie perfektionieren: Gemeinsam zur ansprechenden und wirkungsvollen Website

In unserem Online-Workshop analysieren und optimieren wir gemeinsam den Umgang mit Schriftarten auf Ihrer Website. Unser Ziel ist es, die Texte harmonischer zueinander wirken zu lassen und sicherzustellen, dass sie von allen Besuchern gut lesbar sind. Alternativ können Sie uns auch einfach mit der Optimierung Ihrer SchriftgrĂ¶ĂŸen beauftragen.

Hinterlassen Sie uns eine Nachricht und wir melden uns bei Ihnen mit einem Terminvorschlag in dem die Details besprochen werden.

Adaption auf verschiedene EndgerÀte

Auf dieselbe Art und Weise können nun alle VerhĂ€ltnisse fĂŒr weitere EndgerĂ€te definiert werden. Am Beispiel vom Smartphone wĂŒrde das Ganze dann folgendermaßen ablaufen:

FĂŒr die Definition der optimalen SchriftgrĂ¶ĂŸe des Paragraphs, rate ich dringend dazu, das echte EndgerĂ€t zur Hand zu nehmen und die Lesbarkeit dort zu ĂŒberprĂŒfen. Die meisten Browser können inzwischen zwar auch die Darstellungen auf MobilgerĂ€ten simulieren, doch wie die nachfolgende Grafik zeigt, ist der Abstand vom Screen zum Auge des Betrachters bei MobilgerĂ€ten deutlich geringer, als etwa an einem durchschnittlichen Monitor, der vor euch auf dem Schreibtisch steht.

 

Auch bei der Definition der SchriftgrĂ¶ĂŸen fĂŒr die ĂŒbrigen Ausgabeformate gilt: Paragraph definieren und anschließend die SchriftgrĂ¶ĂŸen fĂŒr die verschiedenen Headlines ableiten.

Achtung: Da auf einem Smartphone die Breite des Bildschirms stark begrenzt ist, sollte hier ein kleineres VerhĂ€ltnis gewĂ€hlt werden, so entsteht zwischen dem Paragraph und der H1 ein geringerer GrĂ¶ĂŸenunterschied als beim Desktop.

Das war`s eigentlich schon. Wie bereits zu Beginn erwÀhnt, gibt es verschiedene Methoden, die durchaus ihre Daseinsberechtigung haben. Ich komme mit der vorgestellten Methode allerdings immer schnell zu sehr guten Ergebnissen.

Wie sind eure Erfahrungen? Setzt ihr auf andere Methoden?

Wir sind gespannt auf eure RĂŒckmeldungen!

Neue BeitrÀge