Typografie im Web: Grundlagen der Mikrotypografie
Grundlagen
Die Typografie1, 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 Gutenberg2 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 Rechtschreibung3 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 Schreibmaschinensatz4 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.
Zeichen | Windows* | Mac |
---|---|---|
„“ | Alt + 0171 Alt + 0187 | ⌥ Option + ^ ⇧ Shift + ⌥ Option + 2 |
«» | Alt + 0171 Alt + 0187 | ⌥ Option + ^ ⇧ Shift + ⌥ Option + 2 |
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 Leerzeichen5 wird als Unicode oder als HTML-Code eingefügt, hier in der normalen und schmalen Variante:
Name | Named | Dezimal | Hexadezimal |
---|---|---|---|
Non-breaking space | |   |   |
Narrow No-Break Space | - |   |   |
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.
Zeichen | HTML-Code | |
---|---|---|
Prozent | 28 % | 28  % |
Grad | 28° | 28° |
Grad Celsius | 28 °C | 28  °C |
Promille | 28 ‰ | 28    |
Wurzel | √28 | √ 28 |
Quadratmeter | 28 m² | 28  m² |
Kubikmeter | 28 m³ | 28  m³ |
Brüche | ½, ⅓, ⅔ | ½ , ½ , ½ |
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:
Zeichen | HTML-Code | |
---|---|---|
Zum Beispiel | z. B. | z.  B. |
Unter anderem | u. a. | u.  a. |
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:
❌ Falsch oder Misverständlich | ✅ Richtig |
---|---|
Binde-Strich | Fünfprozenthürde |
Straßenbahn-Fahrer | Hand-Augen-Koordination |
Online-Retailworkshop vs. Onlineretail-Workshop | Ober- und Unterkante |
Frisör-Meister-Betrieb | E-Mail-Adresse |
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 Bindestrich6:
Name | Dezimal | Hexadezimal |
---|---|---|
Non-breaking Hyphen | ‑ | ‑ |
Mit der folgenden Tastenkombination kannst du den geschützten Bindestrich auch direkt eingeben:
Windows | Mac |
---|---|
Alt + 8209 | ⌘ Command + ⇧ Shift + - |
Gedankenstrich
Einschübe und Gedanken werden durch einen Halbgeviertstrich7 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:
Named | Windows | Mac |
---|---|---|
– | Alt + 0150 Strg + num + - | ⌥ Option + - |
In der englischen Typgrafie, sowie in Tabellen wird statt dem Halbgeviertstrich der Geviertstrich8 verwendet. Dieser noch einmal länger. So schreibst du ihn:
HTML-Code | Windows | Mac |
---|---|---|
— | Alt + 0151 | ⌥ Option + ⇧ Shift + - |
So sehen Binde- und Gedankenstriche im Vergleich aus:
Name | Darstellung | Verwendung |
---|---|---|
Bindestrich | - | Wortgruppen |
Halbgeviertstrich | – | Gedanken |
Geviertstrich | — | In Tabellen |
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 Sollbruchstelle setzen, bei der der Browser je nach Platz entscheiden kann, ob er das Wort trennt oder nicht.
Named | Dezimal | Hexadezimal |
---|---|---|
­ | ­ | ­ |
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.
Auslassungszeichen
Im weitesten Sinne sind Auslassungszeichen9 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:
Zeichen | Named | Dezimal | Hexadezimal |
---|---|---|---|
’ | ’ | ’ | ’ |
… | … | … | … |
Einfacher geht‘s mit der Tastenkombination:
Zeichen | Windows | Mac |
---|---|---|
’ | Alt + 0146 | ⌥ Option + # |
… | Alt + 0133 | ⌥ Option + . |
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.
Fußnoten
-
Der Begriff Typografie umfasst im engeren Sinn alle Aspekte der Gestaltung und Anordnung von Schriftzeichen, insbesondere im Druck und auf Screens. Quelle: Wikipedia ↩
-
Johannes Gutenberg (* um 1400 in Mainz; † 3. Februar 1468 ebenda) war ein deutscher Erfinder, Drucker und Verleger. Er gilt als Erfinder des Buchdrucks mit beweglichen Metalllettern. Quelle: Wikipedia ↩
-
Die Rechtschreibung ist die Festlegung der korrekten Schreibweise von Wörtern und Zeichen in einer Sprache. Quelle: Duden ↩
-
Eine Schreibmaschine ist ein mechanisches oder elektromechanisches Gerät, das zur Eingabe von Texten dient auf Papier dient. Quelle: Wikipedia ↩
-
Ein geschütztes Leerzeichen (englisch no-break space, auch non-breaking space, abgekürzt NBSP, manchmal auch als Dauerleerzeichen bezeichnet) verhindert einen automatischen Zeilenumbruch. Quelle: Wikipedia ↩
-
Der geschütze Bindestrich ist ein Interpunktionszeichen. Quelle: Wikipedia ↩
-
Der Halbgeviertstrich ist ein Interpunktionszeichen und wird in der Typografie durch einen Halbgeviertstrich realisiert. Quelle: Wikipedia ↩
-
Der Geviertstrich ist ein Interpunktionszeichen und wird in der Typografie durch einen Geviertstrich realisiert. Quelle: Wikipedia ↩
-
In der Typografie gibt es mehrere Zeichen, die Auslassungen von Textteilen repräsentieren. Quelle: Wikipedia ↩