Typografie im Web: Grundlagen der Mikrotypografie

Grundlagen

Die Typografie¹, auch „Typo“ genannt, ist die Kunst des Schriftsatzes und dient der optimalen Leserlichkeit von Texten sowie ihrer Gestaltung. Sie teilt sich in die Bereiche Mikrotypografie und Makrotypografie. Die Mikrotyografie befasst sich mit der Detailgestaltung von Schrift im Schriftsatz, während die Makrotypografie sich mit Layout und Gesamterscheinung beschäftigt.

Eine gute Typo zeichnet sich durch eine klare Struktur, eine gute Lesbarkeit und eine ansprechende Ästhetik aus. Doch woran orientieren wir uns? Dazu lohnt ein kurzer Blick in die Geschichte des Buchdrucks, ins 15. Jahrhundert.

Hinweis: In diesem Tutorial beschäftigen wir uns mit der Textauszeichnung der Mikrotypografie. Im zweiten Teil der Serie werden wir uns der Gestaltung des Textes widmen. Das Tutorial erscheint demnächst.

Entwicklung der Typografie

Johannes Gutenberg und der Bleisatz

Johannes Gutenberg² entwickelte um 1440 ein Verfahrunen, um einzelne Buchstaben aus Metall zu gießen, die dann zu Wörtern, Sätzen und ganzen Seiten zusammengesetzt werden konnten. Diese Methode wird als Bleisatz bezeichnet. Der Name leitet sich von dem Material ab, aus dem die Buchstaben gegossen wurden: einer Blei-Zinn-Antimon-Legierung.

Die Seiten werden anschließend in eine Druckpresse eingespannt und mit Druckfarbe eingefärbt. Durch das Anwenden von Druck wird die Farbe von der Druckform auf das Papier übertragen, wodurch der Text oder das Bild gedruckt wird.

Wurden Bücher zuvor stets per Hand geschrieben, konnten diese mit Gutenbergs Methode schneller und günstiger hergestellt werden, was zu einer Demokratisierung des Wissens führte. Seine bedeutende Erfindung markierte einen Wendepunkt in der Geschichte und ermöglichte die Massenproduktion von Büchern. Insbesondere sein Hauptwerk, die Gutenberg-Bibel, zwischen 1452 und 1454 entstanden, wird allgemein für ihre hohe ästhetische und technische Qualität gerühmt.

Ästhetische und technische Qualität

Auch wenn der Buchdruck dank Gutenberg für damalige Verhältnisse enorme Zeitersparnisse brachte, war das Setzen der Lettern im Bleisatz immer noch zeitaufwendig. Das erforderte nicht nur handwerkliches Geschick, sondern auch ein großes Maß an Sorgfalt und Liebe zum Detail. Die Schriftsetzer mussten darauf achten, dass die Buchstaben korrekt gesetzt wurden, die Zeilenabstände stimmten und die Seiten harmonisch wirkten.

Durch diese Arbeit und Hingabe entstanden typografische Regeln und Prinzipen, die auch heute noch gelten. Vorrausgesetzt, man möchte sich von der Masse absetzen und eine gute Lesbarkeit und Ästhetik erreichen.

Hintergrund: Im Rahmen meiner Lehre zum Schriftsetzer im Jahr 1993, habe ich als einer der letzten Schüler im Bleisatz gearbeitet und an der Original Heidelberger Tiegel gedruckt. Die Uni Mainz, bei der es noch heute eine Lehrdruckerei gibt, hat auf YouTube eine Playlist zur Erklärung des Bleisatzes veröffentlicht, bei der du dich in die Materie einarbeiten kannst.

Mikrotypografie

Die Basis eines schönen Schriftbildes ist ein guter Text, der sich nicht nur an die Rechtschreibung³ hält, sondern auch an die traditionellen typografischen Regeln. Daher ist die Textauszeichnung ein wesentlicher Teil der Mikrotypografie, ohne den die Gestaltung nicht funktionieren wird. Worauf du achten solltest, erfährst du in den folgenden Abschnitten.

Anführungszeichen

Auf den heutigen Tastaturen, dessen Ursprung der Schreibmaschinensatz⁴ ist, gibt es für öffnende und schließende Anführungszeichen nur ein Zeichen ("), das zugleich als Ersatzzeichen für Zoll oder Sekunden verwendet wird.

In der Mikrotypografie werden typografischen Anführungszeichen („”) verwendet, im Buchdruck auch gern die Guillemets («»). Während Microsoft Word „Zollzeichen“ automatisch umwandelt, müssen Anführungszeichen für das Web händisch gesetzt werden. In der folgenden Tabelle findest du die Tastenkombinationen, um diese Zeichen zu schreiben.

Leerzeichen

In der Mikrotypografie gibt es mehrere Varianten von Leerzeichen, mit denen wir das Schriftbild erheblich aufwerten können. Es gibt sie in unterschiedlichen Breiten — wichtig bei Zahlen (mehr dazu später) und in geschützter und ungeschützter Form.

Im Fließtext führt ein Leerzeichen am Ende einer Zeile immer zu einem Umbruch, es ist also nicht geschützt vor einem Umbruch. Ein geschützes Leerzeichen zwischen zwei Wörtern hingegen verhindert diesen. Das ergibt am Ende eines Absatzes zwischen den letzten beiden Wörtern Sinn.

Das geschütze Leerzeichen⁵ wird als Unicode oder als HTML-Code eingefügt, hier in der normalen und schmalen Variante:

Das sieht in HTML dann so aus:

Am Ende eines Absatzes.

Das schmale Leerzeichen spielt bei Zahlen eine besondere Rolle. Mehr dazu im nächsten Abschnitt.

Zahlen und Werte

Wann schreibt man denn bei Zahlen nun Ziffern und wann Buchstaben? Der Duden hat das schön aufgeschlüsselt. Ich war lange der Meinung, dass man Zahlen bis 12 grundsätzlich ausschreibt, das gilt heute nicht mehr. Heute schreibt man sie aus, wenn sie in erzählerischen Texten verwendet werden. So schreibst du statt „über 100 Zeilen Code“ eben „über einhundert Zeilen Code“.

Und wie sieht das bei Werten aus, bei denen wir mit Maßen und Gewichten arbeiten? Dort verwenden wir Ziffern, ergänzen sie aber je nach Rechtschreibung mit einem Leerzeichen. In der Mikrotypografie allerdings mit einem schmalen Leerzeichen, das darüber hinaus auch noch geschützt ist, damit Ziffer und Wert nicht voneinander getrennt werden. 28 % werden dann so geschrieben:

28 %

In der folgenden Tabelle habe ich dir die gebräuchlichsten Sonderzeichen aufgelistet und auch Fälle gelistet, wo du ein Leerzeichen setzt und wo nicht.

Abkürzungen

Das schmale geschütze Leerzeichen spielt auch bei Abkürzungen eine Rolle. Zwischen den beiden Anfangsbuchstaben und dem Punkt sollte ein schmales Leerzeichen verwendet werden:

Bindestrich

Der Bindestrich wird in der Regel zur Zusammensetzung von Wortgruppen verwendet. Dann also, wenn es der Leserlichkeit oder der Vermeidung von Missverständnissen dient. In allen anderen Fällen sollte auf ihn verzichtet werden. Denn: Der Bindestrich tennt manchmal mehr, als er verbinden sollte. Hier sind ein paar Beispiele:

Genauso wie ein ungeschütztes Leerzeichen, erzeugen auch Bindestriche am Zeilenende einen Umbruch. Das kann in manchen Fällen unerwünscht sein. Abhilfe schafft hier ein geschützter Bindestrich⁶:

Mit der folgenden Tastenkombination kannst du den geschützten Bindestrich auch direkt eingeben:

Gedankenstrich

Einschübe und Gedanken werden durch einen Halbgeviertstrich⁷ gekennzeichnet, umgangssprachlich daher Gedankenstrich genannt. Der Halbgeviertstrich findet auch als Bis-Strich bei der Notation von Intervallen wie „37–39“, bei Öffnungezeiten wie „07:00–22:00 Uhr”, sowie bei Geldbeträgen als Nullersatzstrich wie „28,– EUR“ Verwendung. So schreibst du ihn:

In der englischen Typgrafie, sowie in Tabellen wird statt dem Halbgeviertstrich der Geviertstrich⁸ verwendet. Dieser noch einmal länger. So schreibst du ihn:

So sehen Binde- und Gedankenstriche im Vergleich aus:

Umbrüche und Trennstriche

In den vorherigen drei Abschnitten sprach ich davon, Umbrüche zu verhindern. Es gibt aber auch Situationen, bei denen wir Umbrüche explizit ermöglichen möchten. Zum Beispiel, wenn lange Wörter, E-Mail-Adressen oder URLs nicht mehr in die Zeile passen. Dafür können wir mit einem bedingten Trennstrich eine Soll­bruch­stelle setzen, bei der der Browser je nach Platz entscheiden kann, ob er das Wort trennt oder nicht.

Hier findest du das ganze noch einmal als Demo, bei der du die Fenstergröße verändern kannst, um zu sehen, wie die Wörter umgebrochen werden.

<h1>
  Der Donau&#xAD;dampf&#xAD;schiff&#xAD;fahrts&#xAD;gesell&#xAD;schafts&#xAD;kapitän sticht mit seiner Mann&#xAD;schaft wieder in&#xA0;See
</h1>

Auslassungszeichen

Im weitesten Sinne sind Auslassungszeichen⁹ Schriftzeichen, die in einem Text anstelle von ausgelassenen Wörtern oder Sätzen stehen. Folgende zwei Auslassungszeichen sind in der Mikrotypografie von Bedeutung:

Apostroph (’ )

Das Apostroph — von der Form her ähnlich einer 9 — kennzeichnet das Auslassungszeichen in Wörtern, die verkürzt werden. Zum Beispiel: „Das ist ’ne gute Idee“, oder „Geht’s dir gut?“. Beim Genitiv wird das Apostroph hingegen nicht verwendet: „Davids Seminar“.

Auslassungspunkte (…)

Die Auslassungspunkte werden verwendet, wenn in einem Text Wörter oder Sätze ausgelassen werden. Sie bestehen aus drei Punkten, die in der Regel ohne Leerzeichen geschrieben werden.

Und so schreibst du sie:

Einfacher geht‘s mit der Tastenkombination:

Schriftsatz gestalten

In einem nachfolgenden Tutorial werden wir uns mit der Gestaltung des Textes beschäftigen. Dabei gehen wir der Frage nach, wie wir den Browser dazu bringen können, Ligaturen zu verwenden, und wie wir die Schriftart, Schriftgröße und Zeilenhöhe optimieren können.

Das Tutorial erscheint demnächst. Bis dahin kannst du dich mit den hier vorgestellten Techniken beschäftigen und sie in deinen Projekten anwenden.

• Verwendete Tags:
• historie
• html
• typografie
• zeichen