From 7a16e57483ccd2a044309ef96eb2433716c55f8d Mon Sep 17 00:00:00 2001 From: David Maciejewski Date: Thu, 1 Aug 2024 14:20:43 +0200 Subject: [PATCH] feat: New Tutorial --- .../typografie/snippet-umbrueche.astro | 91 ++++++ .../grundlagen-der-mikrotypografie.mdx | 261 ++++++++++++++++++ src/images/tutorials/gutenberg-bibel.jpg | Bin 0 -> 278373 bytes src/images/tutorials/typo-workshop.png | Bin 0 -> 1784465 bytes src/pages/assets.mdx | 2 + src/pages/grundlagen.mdx | 3 + src/styles/base/_variables.scss | 5 +- 7 files changed, 361 insertions(+), 1 deletion(-) create mode 100644 src/content/snippets/typografie/snippet-umbrueche.astro create mode 100644 src/content/tutorials/grundlagen-der-mikrotypografie.mdx create mode 100644 src/images/tutorials/gutenberg-bibel.jpg create mode 100644 src/images/tutorials/typo-workshop.png diff --git a/src/content/snippets/typografie/snippet-umbrueche.astro b/src/content/snippets/typografie/snippet-umbrueche.astro new file mode 100644 index 0000000..7928edf --- /dev/null +++ b/src/content/snippets/typografie/snippet-umbrueche.astro @@ -0,0 +1,91 @@ +--- +import Snippet from '@components/Snippet.astro' +--- + + + +
+
+ + + + 100% + + + + + + + + + + +
+
+ + + +
+
+ Der + Donau­dampf­schiff­fahrts­gesell­schafts­kapitän + sticht mit seiner Mann­schaft wieder in See +
+
+ + + + + + diff --git a/src/content/tutorials/grundlagen-der-mikrotypografie.mdx b/src/content/tutorials/grundlagen-der-mikrotypografie.mdx new file mode 100644 index 0000000..cc123da --- /dev/null +++ b/src/content/tutorials/grundlagen-der-mikrotypografie.mdx @@ -0,0 +1,261 @@ +--- +title: 'Typografie im Web: Grundlagen der Mikrotypografie' +description: 'Im Bleisatz des Buchdrucks wurde einst jeder Buchstabe einzeln gesetzt. Mit der gleichen Sorgfalt und Liebe zum Detail können wir aus guten Websites großartige Werke machen.' +isDraft: false +pubDate: 2024-08-01T14:05:00+01:00 +author: david-maciejewski +cover: + path: '/src/images/tutorials/typo-workshop.png' + alt: 'Ein Schrifsetzer setzt Buchstaben in seiner Druckerei.' + caption: 'Beim Bleisatz werden sorgfältig Buchstaben gesetzt. Diese Sorgfalt und Liebe zum Detail können wir auch auf Websites übertragen.' +tags: ['html'] +--- + +import Figure from '@components/Figure.astro' +import Table from '@components/Table.astro' +import Codepen from '@components/Codepen.astro' +import Button from '@components/Button.astro' + +import SnippetUmbrueche from '@snippets/typografie/snippet-umbrueche.astro' + +## Grundlagen + +Die Typografie[^1], 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[^2] 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](https://www.youtube.com/watch?v=srQqHySRefY) gedruckt. Die Uni Mainz, bei der es noch heute eine [Lehrdruckerei](https://www.buchwissenschaft.uni-mainz.de/lehrdruckerei/) gibt, hat auf YouTube eine [Playlist zur Erklärung des Bleisatzes](https://www.youtube.com/playlist?list=PLmGfeHeU4DbFzvQ4eht3LXNtD8r52CMno) 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[^3] 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[^4] 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 | +
+ +
+Unter Windows wird die Zahlenreihe über den Ziffernblock eingegeben. +
+ +### 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[^5] 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: + +```html +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](https://www.duden.de/sprachwissen/sprachratgeber/Schreibung-von-Zahlen-0). 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: + +```html +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 | +| Quadrat­meter | 28 m² | 28` `m`²` | +| Kubik­meter | 28 m³ | 28` `m`³` | +| Brüche | ½, ⅓, ⅔ | `½`, `½`, `½` | + +
+
    +
  • Schmales Leerzeichen
    • +
  • Symbol
    • +
+
+ +### 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 Bindestrich[^6]: + + +| 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 Halbgeviertstrich[^7] 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 Geviertstrich[^8] 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 Soll­bruch­stelle 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. + +
+ ```html +

+ Der Donau­dampf­schiff­fahrts­gesell­schafts­kapitän sticht mit seiner Mann­schaft wieder in See +

+ ``` + + +
+ +### Auslassungszeichen + +Im weitesten Sinne sind Auslassungszeichen[^9] 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. + +{/* +