Erfreuliche Websites durch gute Typographie

Artikel vom 26. September 2016. ISSN 1614-3124, #50. Schwerpunkt: Webdesign (RSS-Feed für alle Themen).

Ein verloren geglaubter Artikel aus dem letzten Jahrzehnt, liebevoll restauriert und vervollständigt. Typographieexperten: Korrekturen und Verbesserungsvorschläge werden dankbar angenommen.

Gute Typographie ist wichtig, aber immer mal wieder mangelhaft. Dieser Artikel beschreibt einfache typographische Regeln des Schriftgestalters und Sabon-Schöpfers Jan Tschichold († 1974), angelehnt an sein 1960 erschienenes Buch Erfreuliche Drucksachen durch gute Typographie. Er soll zum Nutzen sowohl Schreibender als auch Lesender einige knappe Grundsätze von sowohl Makro- als auch Mikrotypographie sowie ein besseres typographisches Verständnis vermitteln.

Wer meint, er verstehe etwas von Schrift, weil er ja lesen könne, der irrt gar sehr.

– Jan Tschichold.

Motivation für dieses nicht nur auf Webdesign bezogene Regelwerk ist, dass sich das Design von Websites wie das einiger Druckerzeugnisse immer noch mal durch »lärmende Orgien wildgewordener Buchstaben und selbstbewusst auftretende Wurstigkeit« auszeichnet, und Einschränkung durch auf Rechnern verfügbaren Schriften genauso wenig wie Überflutung durch Webfonts dafür als Ausrede herhalten können. Ebenso gilt hervorzuheben, dass »selbst wer nicht selbst setzt, nicht selbst Schriften malt, kann lernen, gute Schrift von schlechter zu unterscheiden«.

Inhalt

1. »Die Antiqua wirkt stets angenehmer als die kalte, leicht unfreundliche, unpersönlich wirkende Grotesk«
2. »Halbfette und gar Fette sollen nie ohne zwingenden Grund verwendet werden«
3. »Man unterstreicht nicht, sondern setzt […] aus einem größeren Grad oder der Kursiv«
4. »Gemeine dürfen niemals gesperrt werden, auch nicht ›in Ausnahmefällen‹«
5. »Großbuchstaben müssen immer leicht gesperrt werden und ihre Buchstabenzwischenräume ausgeglichen werden«
6. »Versalien sollten nur selten angewandt werden«
7. »Die Anzahl der verwendeten Schriften […] soll möglichst klein sein«
8. »Kräftiger Durchschuss […] trägt erheblich zur Leserlichkeit bei«
9. »[Eine] zweite Farbe soll nur sparsam gebraucht werden«

»Die Antiqua wirkt stets angenehmer als die kalte, leicht unfreundliche, unpersönlich wirkende Grotesk«

Was sind Antiqua und Grotesk? Eigentlich Schriftarten mit gerundeten Bögen umfassend, bezeichnet die Antiqua hier Serifenschriften, und Grotesk solche Schriften, »bei der die Strichstärke der Buchstaben (nahezu) gleichmäßig ist und die keine Serifen besitzt«.

Es gibt so einige Studien zum Thema Online-Schriften, und oft hat man unter Probanden nicht nur eine Präferenz eben für Antiqua-, genauer gesagt Serifenschriften, beobachten können, sondern auch, dass diese besser lesbar sind. (Abschließende authoritäre Studien sind dem Autor nicht bekannt.)

Die Grotesk oder Endstrichlose erachtet Tschichold als taugliche Auszeichnungsschrift, aber nicht gut als Textschrift – dafür sei die Antiqua eben »stets angenehmer«. Tschichold zieht einen strengen Vergleich: Für kleine Kinder, »die lieber Schokolade essen denn Brot, ist die Endstrichlose sehr gut geeignet«, denn »ihre grob vereinfachte Form entspricht genau dem noch unentwickelten optischen Differenzierungsvermögen des Kleinkindes und der Langsamkeit seines Lesens«.

»Halbfette und gar Fette sollen nie ohne zwingenden Grund verwendet werden«

Um Inhalte zu betonen, sei es nicht notwendig, den entsprechenden Text fett zu setzen, da laut Tschichold ein Richtungs- (Kursiv) oder Größenunterschied vielmals ausreicht. Zudem stießen Schriften an »natürliche Grenzen«, wenn alle Prominenz mit fortwährender Fettstellung (aber auch größeren Schriftgraden) erreicht werden soll.

»Man unterstreicht nicht, sondern setzt […] aus einem größeren Grad oder der Kursiv«

Was wir als eine der ältesten Webdesign-Konventionen kennen, sollten wir auch aus typographischer Sicht verinnerlichen – wir unterstreichen nicht. Online machen wir das deshalb nicht, weil nur Links unterstrichen sein dürfen (hier die Konvention), aber diese stellen natürlich dann auch die Ausnahme dar: Man unterstreicht nicht, es sei denn zur Kennzeichnung von Hyperlinks.

»Gemeine dürfen niemals gesperrt werden, auch nicht ›in Ausnahmefällen‹«

Geschichtlich am Ende des 19. Jahrhunderts verortet, ist das Sperren nach Tschichold eine »Unsitte und einer der Hauptursachen schlechter oder mangelhafter [typographischer] Arbeiten, weil es die Wortbilder zerstört« und ebenso der Leserlichkeit schadet: »Die Wörter flimmern.«

Das Hauptwerkzeug des Webentwicklers ist hier die letter-spacing-Eigenschaft (Interessierte mögen sich typographische Eigenschaften nochmal im verworfenen CSS-Typographie-Buch sowie im CSS-Index ansehen), ihr Einsatz sollte aber nicht bei den Gemeinen erfolgen.

»Großbuchstaben müssen immer leicht gesperrt werden und ihre Buchstabenzwischenräume ausgeglichen werden«

Eine andere Situation ergibt sich bei Großbuchstaben: Hier ist letter-spacing zwar nicht perfekt, weil die Eigenschaft keine Feinjustierung erlaubt, aber das naheliegende Werkzeug. Nach Tschichold gilt, dass sich ein bis anderthalb Punkt an Spatium am besten eignen, weites Sperren also vermieden werden sollte.

»Versalien sollten nur selten angewandt werden«

Glücklicherweise, will man nach der nicht zu empfehlenden Sperrung von Großbuchstaben nun meinen, sollen Versalien dann wenig eingesetzt werden. Auch wenn wir diese über text-transform pro forma einfach erzwingen können, sei das Sperren und Ausgleichen nach Tschichold (und vermutlich unserer eigenen Erfahrung) nämlich nicht nur arbeitsaufwendig, sondern Versalien »in größeren Mengen« einfach schwer lesbar. (Wir wissen dazu natürlich, dass dem liberalem Gebrauch von Großbuchstaben im digitalen Zeitalter auch gerne das Konnotat des Schreiens anhaftet.)

»Die Anzahl der verwendeten Schriften […] soll möglichst klein sein«

Zwei bis höchstens vier verschiedene Schriften sollen genügen, denn eine »übertrieben große Zahl« von Schriften sei ebenfalls eine Ursache der »geringen Qualität vieler Drucksachen«. Dies deckt sich mit Empfehlungen außerorts: Manch andere Designvorgaben, zum Beispiel bei Google, setzen das Maximum an erlaubten Schriftfamilien schon bei zwei an.

»Kräftiger Durchschuss […] trägt erheblich zur Leserlichkeit bei«

Durchschuss, der zwischen den Zeilen liegende und üblicherweise in Punkt gemessene Raum, ist maßgeblich für das Satzbild. Wenig Raum, also Satz ohne Durchschuss, wird als kompress bezeichnet und ist schwerer lesbar. Besser ist es, mit mehr Punkt »durchzuschießen«, wobei es in der Regel auf die Zeilenlänge ankommt, wie viel Punkt man genau gibt.

Bei anpassungsfähigem, »responsive« Design macht es entsprechend Sinn, bei schmaleren Viewports weniger Durchschuss vorzugeben als bei breiteren. In CSS wird Durchschuss, wie wir als Webentwickler und -designer wissen, über line-height gesteuert.

»[Eine] zweite Farbe soll nur sparsam gebraucht werden«

Zu Farben merkt Tschichold schließlich an, dass Farben intensiver wirkten, je seltener sie auftauchen, und dass man sie entsprechend sparsam – gezielt – einsetzen sollte. Übung mache hier, wie wir es alle auch in anderen Bereichen kennen, den Meister.

Gute Schrift, richtige Anordnung; das sind die beiden Pfeiler aller Schriftkunst.

– Jan Tschichold.

❧ Tschichold wies mit den aufgeführten Regeln und seinem großartigen Buch auf schriftgestalterische Missstände in Druckerzeugnissen hin; hier sollen sie die Brücke zu modernem Webdesign schlagen und Laien wie auch Experten Typographie etwas näher bringen. Das Schlusswort schenkt uns dann aber Robert Bringhurst, daran erinnernd, warum Typographie überhaupt so wichtig ist:

Typography exists to honor content.

– Robert Bringhurst: The Elements of Typographic Style (1992).

Mit freundlicher Genehmigung vom MaroVerlag Augsburg.

Über mich

Ich bin Jens, und ich bin ein Engineering Lead und Autor. Ich habe als technischer Leiter für Firmen wie Google und als Engineering Manager für Firmen wie Miro gearbeitet, bin W3C und WHATWG verbunden und schreibe und prüfe Fachbücher für O’Reilly und Frontend Dogma.

Mit meinem aktuellen Umzug nach Spanien bin ich offen für eine neue Remote-Führungsposition im Frontend-Bereich. Beachte und empfehle gerne meinen Lebenslauf oder mein LinkedIn-Profil.

Ich experimentiere gerne, nicht nur in der Webentwicklung, sondern auch in anderen Bereichen wie der Philosophie. Hier auf meiert.com teile ich einige meiner Ansichten und Erfahrungen.