/timeline /Grafikdesign 5

Die technischen Grenzen der frühen 80er prägen bis heute den 8‑Bit‑Stil, der im Grafikdesign nach wie vor fasziniert. Das visuelle Interface des ersten Macintosh entstand in einem strengen 1‑Bit‑Raster: Schwarz oder Weiß, sonst nichts.

Susan Kare, Grafikdesignerin bei Apple, hat maßgeblich an dem GUI des ersten Betriebssystems mitgewirkt. Ihre Icons, Schriften und Symbole prägen den Mac bis heute.

In den ersten Mac-Schriften steckt Nerdtum, so wie auch in den Entwicklerinnen und Entwicklern, die ihre Unterschrift im Gehäuse hinterlassen durften. Die Schriften sollten ursprünglich nach Ideen des Grafikteams nach Haltestellen der Bahnlinie von Philadelphia nach Paoli benannt werden.Orte wie Overbrook, Merion oder Ardmore waren ein persönlicher Bezug zu Susan Kares Heimat. Doch als Steve Jobs die Namen im Menü sah, stoppte er die Idee. Nach seinem Kalligrafie-Kurs am Reed College hatte er eine tiefe Liebe zur Typografie entwickelt. Jobs wollte keine Vororte. Er wollte Weltstädte. So wurde Geneva zum digitalen Cousin der Helvetica, während New York die Eleganz von Times New Roman aufgriff. Die Städtenamen zeigten in gewisser Weise Metainformation, da sie die Vorbilder des Designs prägten.

Die Schriften im 1-Bit-Bitmap-Raster führten das proportionale Spacing ein. Bis dahin waren auf den meisten Systemen Buchstaben monospaced, also gleich breit, was auf dem Bildschirm einfach schlecht aussah. Eine technische Limitation früherer Pixel-Bitmap-Fonts. Man gab jedem Zeichen seine eigene Breite und revolutionierte so das Raster. Der Macintosh war damit einer der ersten Computer mit proportionalen Schriften, die proportional gestaltet waren, obwohl sie noch als Bitmaps existierten.

Die Geschichte des „Dogcow“ ist vielleicht ein außergewöhnliches Beispiel für das Design Susan Kares, das durch einen Zufall zur Legende wurde. Entstanden 1983 als Glyphe für das kleine „z“ in der Schrift Cairo, war eigentlich nur ein Zusatz ohne Auftrag. Und ohne Name. Weil es eher aussah wie ein Hund und Flecken hat wie eine Kuh, war der Arbeitstitel wohl Dogcow. Apple war damals in einer markenrechtlichen Auseinandersetzung mit einer Softwarefirma namens Clarus verwickelt. Mark „The Red“ Harlan entschied sich 1989 in einem Akt von „Corporate Humor“, das undefinierbare Pixel-Wesen genau nach dieser Firma zu benennen.
Als das Apple-Entwicklerteam für den Postscript-Druckertreiber nach einem asymmetrisches Symbol für die Transformationen (Spiegelung, Rotation) im Page-Setup-Dialog suchten, war Clarus mit ihrem Fleckenmuster und der klaren Ausrichtung (Kopf rechts, Schwanz links) die perfekte Lösung. Ihren offiziellen Status erhielt Clarus the Dogcow durch die legendäre Technote #31 des Apple Developer Technical Support. Harlan fasste darin alles zusammen, was man über die „neue Spezies“ wissen musste. Die Technote legte sogar ihren Laut fest: „Moof!“ eine Mischung aus „Moo“ und „Woof“. Sie warnt die Entwickler davor, Clarus jemals ohne ihre Flecken darzustellen, da sie sonst ihre Identität verlöre.

Nach der Legende saßen Steve Wozniak und Steve Jobs nach ihrem Auftritt beim Homebrew Computer Club, wo sie den Apple I vorgestellt hatten, im Auto. Sie suchten noch einen Firmennamen für den Verkauf. Jobs wollte, dass „Apple“ im Telefonbuch vor IBM kommt.So fiel die die Wahl wohl auf Apple.

Im weiteren erfolgreichen Verlauf von Apple kommt ein spannender Bezug zu den Beatles. Apple Corps, das Musiklabel der Band aus den 1960er Jahren, und Apple Computer teilten sich seit den 1970ern den gleichen Apfel-Namen. Das führte über Jahrzehnte zu heftigen Rechtsstreitigkeiten. Schon 1978 gab's die erste Klage, 1981 zahlte Apple 80.000 Dollar und versprach, vom Musikbusiness die Finger zu lassen. Apple Computer durfte den Namen behalten, solange es keine Musikprodukte herstellte; ein Commitment 1981 verbot explizit „musikalische“ Aktivitäten. Die Auseinandersetzung eskalierte immer wieder: 1989 wegen des MIDI-fähigen Macs, 2003 erneut um iTunes und 2006 vor dem High Court, wo Apple Computer letztlich gewann und Apple Inc. wurde. Trotz des Vergleichs dauerte es bis November 2010, bis die Beatles-Alben endlich in die iTunes-Bibliothek kamen. Während dieses Chaos bastelte Sound-Designer Jim Reekes Ende der 80er den ikonischen System-7-Alert-Ton: Ursprünglich „Xylophone“ oder „Chime“ genannt, musste dieser umbenannt werden, weil zu musikalisch. Reekes nannte es in „Sosumi“ um. Ein Wortspiel für „so sue me!“ (verklag mich doch!) udn trickste die Anwälte aus in dem er es als „japanisches Wort“ titulierte. Die Datei lag aber weiter hin als „Sosumi.aiff” im System.

Heute piepst es immer noch in macOS! Ein bleibender Insider-Witz auf Liverpools Kosten. Und auch „Dogcow“ ist als Hommage nativ in den Druckdialog der aktuellen Betriebssysteme integriert. Es ist wohl eine Anerkennung dafür, dass gutes Design oft dort entsteht, wo eine spielerische Idee eine technische Lücke füllt.

Weißraum in der Gestaltung – speziell in der Typografie – bezeichnet alle Flächen auf einer Seite, die nicht mit Schriftzeichen, Bildern oder anderen gestalterischen Elementen gefüllt sind.Er muss dabei nicht zwangsläufig weiß sein, sondern meint allgemein den „leeren“ oder unbedruckten Raum, der gezielt eingesetzt wird, um ein ausgewogenes, übersichtliches und lesbares Layout zu schaffen.

Weißraum ist ein aktives Gestaltungselement: Er sorgt für Struktur, Hierarchie und Klarheit, lenkt den Blick, verbessert die Lesbarkeit und gibt dem Inhalt Raum zum Wirken. In der Typografie unterscheidet man Makro-Weißraum (z.B. Seitenränder, Abstand zwischen Textblöcken) und Mikro-Weißraum (z.B. Abstand zwischen Buchstaben und Zeilen).

Informatik-Bezug: In der Informatik bezeichnet „Whitespace“ ebenfalls Leerzeichen, Tabulatoren und Zeilenumbrüche, die bei der Strukturierung von Quellcode und Datenformaten eine wichtige Rolle spielen und so – wie im Design – für Klarheit und Struktur sorgen

„Wissen’S was, wir kaufen a Zeichenmaschin. Aber wir kriegen ka Software. Machen Sie uns eine?“ Frieder Nake, Student der Mathematik, viertes Semester, sagt ja. Was soll er auch sonst sagen, man sagt zu so etwas erst mal ja und überlegt hinterher, wie das gehen soll. Einen wundervollen Zufall seines Lebens nennt Nake das im Rückblick.

Die Zeichenmaschin war ein Graphomat Z64 von Konrad Zuse, gebaut für Ingenieure und technische Zeichnungen. Neu war damals: Bei den üblichen Trommelplottern rollte das Papier hin und her, beim Graphomaten lag es flach auf dem Tisch, und der Stift fuhr selbst darüber, gesteuert per Lochstreifen. Genau und wiederholbar, Linie für Linie, Kurve für Kurve und irgendwann eben auch Buchstabe für Buchstabe.

Die Lochstreifen programmierte Nake blind und fuhr damit zu Zuse nach Bad Hersfeld, in der Hoffnung, dass sie fehlerfrei laufen. Klingt nach Maschinenraum. War es auch.

Die Kreis-Variationen vom 4. Mai 1965 zeigen Zufallspunkte auf 20 Strahlen vom Mittelpunkt, verteilt auf neun innere und fünf äußere Kreisringe, im zehnten Ring ein echter Kreis. Das Programm verbindet die Punkte, indem es jeweils zwischen drei Punkten interpoliert, und weil die Punkte zufällig liegen, werden die Linien unruhig, fast organisch, als hätten sie sich selbstständig gemacht. Daher kommt auch dieser eine Ausschlag, der wie eine Nadel aus dem Bild sticht. „Die bei den inneren Kurven auftretenden Zacken sind durch das Interpolationsverfahren verursacht.“

Das bekannteste Blatt aus der Zeit ist die Hommage à Paul Klee vom 13. September 1965. Vorlage war Klees Gemälde Hauptweg und Nebenwege von 1929, entstanden in seiner Zeit als Lehrer am Bauhaus in Dessau.

Frieder Nake hat daraus kein Abbild gemacht, sondern ein Programm. Ihn interessierten Klees Proportionen, das Verhältnis von Senkrechten und Waagerechten, und so zieht der Plotter waagerechte Bänder und füllt sie mit senkrechten Strichen. Und wo genau was landet, entscheidet der Zufall.

Zuse hat übrigens selbst gemalt, manches signiert mit Kuno See. Über Computer und Kunst hat er sich in einem Aufsatz, ganz modern in Kleinbuchstaben gesetzt, geäußert:

Nakes Leitsatz lautet: „Think the image, don’t make it.“ Das Machen übernimmt die Maschine, das Denken nicht.

Emphasis (Betonung)

In jedem Layout braucht’s einen Fixpunkt. Einen Hauptdarsteller, an dem man hängen bleibt. Ob durch fette Typo, krassen Farbkontrast oder clevere Platzierung: Betonung schafft Hierarchie. Ohne sie wirkt alles gleich wichtig. Der Haken: Es kann nur einen geben. Wer alles fett macht, betont am Ende gar nichts mehr. Oft reicht schon ein einziges Element, das aus der Reihe tanzt.

Kontrast

Gegensätze bringen Spannung: dick gegen dünn, hell gegen dunkel, groß gegen klein. In der Typo sorgt Kontrast für Lesbarkeit und Dynamik und verhindert Monotonie. Halbe Sachen funktionieren dabei schlecht. Zwei Schriftgrößen, die fast gleich sind, sehen eher nach Versehen aus als nach Absicht. Wenn schon Kontrast, dann deutlich. Das gilt auch beim Mischen von Schriften: lieber eine kräftige Grotesk zur zarten Serife als zwei Schriften, die sich fast gleichen.

Sichtachsen

Ausrichtung bringt Ordnung. Elemente richten sich an unsichtbaren Linien aus: Headlines, Absätze, Einzüge und Bildkanten beruhigen so das Layout. Das Auge merkt sofort, wenn etwas zwei Millimeter danebensteht, auch wenn es nicht sagen kann, was genau stört. Das gilt nicht nur senkrecht, sondern auch waagerecht. Eine gemeinsame Oberkante, an der Bilder und Textblöcke hängen, nennt man Wäscheleine. Und wenn Textspalten oben oder unten auf derselben Linie enden, also sich „fangen“, wirkt der Aufbau gleich aufgeräumter und ergibt den gewollten Rhythmus. So entstehen Wiederholungen und Flächen, die aufeinander abgestimmt sind. Ein Raster hilft, diese Linien nicht jedes Mal neu erfinden zu müssen. Eine bündige Bildkante oder ein sauber gesetzter Einzug bringt oft mehr als jede Verzierung.

Verhältnis

Balance hält ein Layout im Gleichgewicht. Ob symmetrisch oder asymmetrisch: Schwere Typoblöcke mit Leichtigkeit drumherum geben Ruhe und lenken den Blick. Symmetrie wirkt schnell feierlich und ein bisschen steif. Spannender ist oft die Asymmetrie, wie auf einer Wippe: Ein großes Element nah an der Mitte hält zwei kleine weit außen in der Waage.

Repetition

Wiederholung schafft Rhythmus und eine Klammer. Dieselbe Serife, derselbe Farbton, dieselben Abstände binden die Gestaltungselemente zu einem Ganzen. Wer auf Seite 12 die gleiche Bildunterschrift findet wie auf Seite 3, fühlt sich gleich zu Hause. Und erst wenn ein Muster steht, fällt der eine bewusste Bruch darin überhaupt auf. Gleiche Dinge sehen gleich aus: gleiche Abstände, gleiche Bildformate, gleiche Auszeichnungen.

Proportion

Proportionen gliedern das Layout: die Größe der Headline im Verhältnis zur Zeile, die Spalte im Verhältnis zur Seite. Zwei Werkzeuge helfen dabei. Der Goldene Schnitt teilt eine Strecke so, dass sich der kleinere Teil zum größeren verhält wie der größere zum Ganzen, ungefähr 1 : 1,618. Das Verhältnis steckt in Architektur und Buchgestaltung und wirkt ausgewogen, ohne langweilig symmetrisch zu sein. Das zweite Werkzeug ist das Gestaltungsraster: ein unsichtbares Netz aus Spalten, Zeilen und festen Abständen, an dem sich alle Elemente ausrichten. Die Schweizer Typografie hat es groß gemacht. Gute Proportionen machen die Typografie schlicht und lesbar. Typografische Größenreihen funktionieren übrigens genauso: Jede Stufe ist um einen festen Faktor größer als die vorige. So wirken auch sehr unterschiedliche Größen wie aus einer Familie.

Die Drittel-Regel (Rule of Thirds) kennt man aus der Kamera-App. Das Bild wird mit je zwei Linien waagerecht und senkrecht in neun gleiche Felder aufgeteilt. Wer im Motiv etwas in den Fokus rücken will, setzt es nicht in die Mitte. Das Hauptmotiv gehört auf einen der vier Schnittpunkte. So kommt man dem harmonischen Goldenen Schnitt ziemlich nahe, ganz ohne Taschenrechner: Die Teilung 1/3 zu 2/3, also 1 : 2, liegt nah am Goldenen Schnitt von etwa 1 : 1,6. Den kennt man auch aus der Zahlenreihe 1, 2, 3, 5, 8, 13, in der sich benachbarte Zahlen wie 5 : 8 immer weiter an ihn annähern. Dazu gehört auch die Blickrichtung. Schaut ein Mensch im Bild nach rechts, sollte vor ihm Platz sein, er blickt also ins offene Format hinein und nicht gegen den Rand. Und Linien, die von links unten nach rechts oben steigen, folgen unserer Leserichtung. Sie wirken nach vorn und nach oben, positiv eben, wie eine Kurve, die steigt. Eine absteigende Linie liest sich dagegen eher wie eine schlechte Nachricht.

Weißraum

Weißraum ist Teil der Gestaltung und kein leerer, vergessener Bereich. Die weiße Fläche ist nicht übrig geblieben, sie ist bewusst gestaltet, genauso wie Schrift und Bild daneben. Sie betont die Typografie, schafft Ruhe im Layout und gliedert Absätze. Nicht umsonst sind Anzeigen von Luxusmarken oft fast leer, während der Prospekt vom Discounter bis zum Rand vollgepackt ist. Leere zeigt, dass man auf Fläche verzichten kann, die man auch hätte füllen können.

Gruppieren

Gleiche Farben, Fonts und Abstände schaffen eine Einheit. Sie entsteht durch Wiederholung und das Zusammenziehen verwandter Elemente oder Bilder. Das spart Erklärungen und schafft Intuition. Ähnlich = verbunden, selbst über Distanzen. Was nah beieinandersteht, gehört zusammen. Wer eine Bildunterschrift näher ans falsche Bild rückt, hat schon verloren.

Die richtigen Anführungszeichen sind die kleinen Details, an denen man ziemlich gut erkennt, Ob man nur mit Wird sozialisiert wurde. :) Schon historisch markierten die Schreiber Zitate mit kleinen Häkchen am Rand; daraus entwickelte sich das signum citationis, das Zitatzeichen. In der europäischen Drucktradition wurden daraus die typografischen Anführungszeichen der Antiqua, zunächst vor allem, um fremdsprachige Passagen oder wörtliche Rede zu kennzeichnen. Den Spitznamen „Gänsefüßchen“ bekamen sie, weil ihre Form an den Abdruck eines Gänsefußes im Lehm erinnert.

Im Bleisatz war das einfach: Es gab explizt Sorten für öffnendes und schließendes Anführungszeichen. Im Fotosatz blieben die Formen erhalten, aber die Mechanik verschwand hinter Matrizen und Belichtern; richtig gesetzte Anführungen waren immer Teil des professionellen Handwerks. Schreibmaschinen hatten durch mechanische Einschränkungen eine begrenzte Anzahl an Tasten, um die Geräte kompakt und handhabbar zu halten. Da öffnende und schließende Anführungszeichen ähnlich wirken, wurde ein einziges Zeichen – das gerade doppelte Strichlein (") – als Alleskönner verwendet: für Anführungszeichen, Zoll, Sekunden und Bogensekunden. Diese Lösung, beeinflusst von englischen Modellen mit oberen geraden Anführungen, schwappte nach Deutschland über und prägte die Gewohnheit. Bei der Entwicklung der Computertastatur wurde das Layout – inklusive Shift-2 für das Zollzeichen – direkt übernommen, weshalb viele Schriften dort keine typografisch korrekten Varianten liefern. Erst Unicode und smarte Programme haben das gelöst, aber die Schreibmaschinen-Erbschaft sitzt tief. Sauber arbeitet nur, wer für öffnende und schließende Zeichen echte typografische Glyphen einsetzt – per Sonderzeichenmenü, manche Software berücksichtigen automatische „smart quotes“ oder bewusst gesetzte Unicode-Zeichen. Was dann eher eine Nerd-Nische wäre.

Im deutschsprachigen Satz (außer der Schweiz) gelten die deutschen Anführungszeichen „…“ als Standard; die Eselsbrücke dafür lautet: „99 unten, 66 oben“. Das öffnende Zeichen sitzt auf der Grundlinie und ähnelt einer tiefgestellten 99, das schließende steht oben wie eine hochgestellte 66.

Für Zitate im Zitat werden die einfachen Varianten ‚…‘ verwendet, formal ebenfalls nach dem 9/6‑Prinzip. Der Witz daran: Die berühmten 99 und 66 sind kein typografischer Code, sondern eine Kneipen-Merkregel, die sich in der Ausbildung erstaunlich hartnäckig hält – wer sie einmal verinnerlicht hat, erkennt falsche, „gerade“ Anführungszeichen fast so schnell wie einen doppelten Leerschritt.

Parallel dazu existiert die französische Tradition mit den sogenannten Guillemets: «…». In Frankreich stehen die Spitzen nach außen, und vor und nach den Guillemets wird ein geschützter kleiner Abstand gesetzt: « Bonjour cher visiteur ». In der Schweiz hat man diese Form übernommen, aber typografisch gestrafft: «Guillemets» ohne zusätzliche Leerzeichen, mit reduziertem Weißraum in der Schriftgestaltung. Für Binnensetzungen nutzt man einfache Guillemets ‹…›.

Technisch problematisch bleibt, dass das Zollzeichen gern als fauler Ersatz für typografische Anführungszeichen missbraucht wird, weil es bequem auf der Tastatur liegt. Saubere Schriftsatzumgebungen lösen das über automatische Ersetzung: aus "Text" werden je nach Spracheinstellung „Text“, »Text« oder «Text». Wer seine Texte ernst nimmt, muss sich heute weniger die Bleisatzschubladen merken als die Eselsbrücken – 99 unten, 66 oben.