Springe zum Inhalt der Seite
zeroseven design studios
04.02.2021

Satzarten in digitalen Medien

Typografie und Satzgestaltung

Im Umgang mit Typografie und der Satzgestaltung erleben wir gerade im Bereich der Webentwicklung auf Grundlage von Webfonts und Rastersystemen eine wahrhaftige Renaissance. Modernes und zeitgemäßes Webdesign erkennt man ganz schnell am Einsatz und Umgang mit der Typografie. Schriften werden mutig, großzügiger und mit dem notwendigen Freiraum eingesetzt und gestaltet. Die Akzidenz Grotesk, die durch die Neuen Haas oder auch der Helvetica als Meilensteine in der Typografie stehen, erlebt gerade eine Wiedergeburt. Viele tolle alternative Schriften zur Helvetica entstehen gerade und verleihen dadurch der Akzidenz Grotesk einen wahrhaften Hype. Vor allem die Qualität dieser neuen und modernen Schriften ist erstaunlich hoch. Es ist einfach auch die Zeit, sich wieder auf gute und ästhetische Typografie zu konzentrieren. Vor allem bietet uns die heutige Technik im Webdesign die notwendigen Vorraussetzungen hierfür.

Darüber hinaus gehört die Schrift zu einem unserer wertvollsten Güter. Typografie ist und bleibt eine der wichtigsten Säulen im gesamten Brandingprozess. Gerade typografische Aspekte verankern sich nachhaltig im Unterbewusstsein des Betrachters.

In meinem aktuellen Blog-Beitrag finden Sie überwiegend Beispiele von Apple. Nicht weil ich hier Apple als das Maß der Dinge sehe, sondern einfach daher, da Apple für gutes Design steht und in vielerlei Hinsicht Design und Typografie in Perfektion vereint.
Lassen Sie sich von diesen Beispielen einfach inspirieren. Auch das Interactiondesign der Beispiele ist in vielerlei Hinsicht inspirierend und bewundernswert.

Die vier Satzarten

In der Satzgestaltung wird zwischen vier gängigen Satzarten unterschieden, die aus der Buchtypografie in die digitalen Medien übernommen wurden. Hier ist allerdings zu berücksichtigen, dass die digitalen Ausgabemedien wie zum Beispiel ein Browser nicht die Microtypografie unterstützt, die für einen guten Satzausgleich notwendig ist.
Daher sollte bei der Wahl der Satzart darauf geachtet werden, auf welchem Ausgabemedium ihre digitalen Inhalte dargestellt werden sollen.

Linksbündiger Satz

Ein linksbündiger Satz ist heute "quasi" Standard. Aufgrund unserer Leserichtung und Lesegewohnheit findet das Auge schnell den Anfangspunkt einer Zeile durch den einheitlichen Zeilenbeginn. Der Zeilenbeginn dient quasi als Anker und Orientierung für das Auge. Bei mehrspaltigem Text ist die linksbündige Ausrichtung fast die einzige Möglichkeit, ein sauberes und ruhiges Schriftbild zu gestalten. Hier ist es natürlich von Vorteil, dass eine annähernd ähnliche Zeilenanzahl ein optisches Gleichgewicht erzeugt.
Dass heute Schriften größer und mutiger eingesetzt werden, macht das Webdesign in vielerlei Hinsicht ansprechender und individueller. Diese Form der Gestaltung unterstützt das Branding eines Unternehmens nachhaltig. Wird dieses Gestaltungselement zielgerichtet eingesetzt, kann es ein Differenziator in der visuellen Gestaltung sein. Hier darf gerne mit mehr Mut agiert werden. Sicherlich bedarf es hier auch viel Überzeugungsarbeit von uns Designern am Kunden.

Linksbündig

Der linksbündige Satz weist auf der linken Seite eine senkrechte Anordnung des Zeilenanfangs auf. Hier fängt der Zeilenanfang untereinander an. Auf der rechten Seite läuft die Zeile frei aus. Das freie Auslaufen der Zeilen wird auch als Flattersatz bezeichnet. Zum linksbündigen Satz werden entsprechend auch Bilder oder Grafiken linksbündig positioniert.

Rechtsbündiger Satz

Im Internet finden sich wenige Beispiele für rechtsbündigen Satz. Es gibt auch wenig Einsatzbereiche, wo sich der rechtsbündige Satz anbietet. In der klassischen Buchgestaltung findet sich der rechtsbündige Satz häufiger in Marginalspalten. Im Umgang mit rechtsbündigem Satz sollte man immer ein Auge auf die Zeilenanzahl haben. Diese ist verantwortlich dafür, ob ein Text schwer oder weniger schwer zu erfassen ist. Ein Nachteil beim Einsatz von rechtsbündigem Text ist, dass sich im Bereich der Webtechnologie bei unterschiedlichen Auflösungen (Devices = Displayauflösungen) das Raster entsprechend der Displaygröße verändert und die Spaltenbreite dadurch auch variiert. Das hätte zur Konsequenz, dass der Zeilenanfang bei einem rechtsbündigen Satz sehr unruhig und flatterartig wirkt. Eine automatische Silbentrennung, was für eine saubere und ruhige Darstellung eines rechtsbündigen Satzes hilfreich wäre, gibt es in diesem Ausmaß nicht.

Rechtsbündig

Der rechtsbündige Satz weist auf der rechten Seite eine senkrechte Anordnung des Zeilenende auf. Der Zeilenanfang beginnt immer an unterschiedlichen Stellen. Bilder oder Grafiken werden bei dieser Satzart ebenfalls rechtsbündig ausgerichtet.

Mittelachsensatz

Früher, zu meiner Ausbildungszeit (das war noch zu Bleisatz-Zeiten), galt der Mittelachsensatz als Auszeichnungs-Satzart. Der Einsatzbereich war in Danksagungen, Anzeigen oder Todesanzeigen. Ganz so schwarz müssen wir es heute nicht mehr sehen. Der Mittelachsensatz wird heute gerne eingesetzt. Er bietet sich sehr gut für Überschriften oder auch Einleitungstexte oder Subheadlines an.
Beim Mittelachsensatz hat heute im digitalen Einsatz wie zu Bleisatz-Zeiten weiterhin eine wichtige Regel Bestand. Die Anzahl der Zeilen sollte immer noch einstellig bleiben. Eine ideale Zeilenanzahl liegt zwischen 3 und 7 Zeilen. Das verleiht dem Mittelachsensatz einen gewissen Stil oder auch Auszeichnung. In dieser Hinsicht kann er viele Seiten aufwerten und ist ein gekonntes und stilistisches Gestaltungselement.

Mittelachsensatz

Der Mittelachsensatz ist eine symmetrische Satzart. Die Zeilen stehen immer mittig untereinander und weisen eine spiegelbildliche Schriftsatzart auf, die in der Zeilenmitte eine Achse bildet. Der Mittelachsensatz wird gerne auch als zentrierter Satz, als symmetrischer Flattersatz oder auch als gemittelter Satz bezeichnet.

Der Blocksatz

Der Blocksatz kann schon seit längerer Zeit im Browser dargestellt werden. Aber auch hier gilt, wie bei den anderen Satzarten, was für einen gut ausgeglichenen Blocksatz notwendig ist, dass durch die Silbentrennung die Wortzwischenräume optisch ausgeglichen werden. Ich kann mich noch an Zeiten erinnern, wo der Blocksatz gerne im Webdesign eingesetzt wurde. Mittlerweile findet er aber immer weniger Anwendungsbereiche. Das wird sicherlich durch die Responsive-Technologie beeinflusst. Durch die variablen Spaltenbreiten bei unterschiedlichen Displayauflösungen würde es bei einem Blocksatz sicherlich zu unschönen Wortzwischenräumen kommen, je nach Spaltenbreite. Je schmäler eine Spalte und je länger ein Wort wird, so besteht die Gefahr, dass eine Zeile nicht auf die gewünschte Breite läuft und somit unschöne Lücken entstehen.

Blocksatz

Beim Blocksatz beginnt der Zeilenanfang und das Zeilenende in einer senkrechten Anordnung jeweils untereinander. Die letzte Zeile ist in der Regel nicht im Block ausgerichtet und läuft frei aus. Johannes Gutenberg - der Erfinder des Buchdrucks - hat die Gutenberg Bibel (entstand zwischen 1452 und 1454) komplett im Blocksatz gesetzt und gedruckt.

Darstellung von Zahlen und Leistungen

Zahlen oder auch technische Angaben können heute ebenfalls, wie bei den restlichen Gestaltungsmöglichkeiten im Webdesign, mit viel Freiraum und der passenden Größe gestaltet werden. Hier finden Sie zwei Beispiele, wie Apple Leistungen der verschieden iMac-Modelle vergleicht oder auch die Leistungsfähigkeit von Grafikkarten darstellt. Typografisch gesehen ist hier immer weniger mehr. Was für ein ruhiges und sauberes Schriftbild aber immer notwendig und ausschlaggebend ist: Eine passende Schrift, die das Design unterstützt und trägt.

Farbe im Schriftdesign

Die Gestaltungsmöglichkeiten durch CSS im Webdesign ermöglicht unterschiedlichste Facetten, wie mit Farbe und Typografie umgegangen werden kann. Heute kann ohne Probleme ein Farbverlauf hinter eine Schrift gelegt werden oder auch Bilder als Hintergrundfarben eingesetzt werden. Die Schrift dient dabei als eine Art Schnittmaske. Auch animierte Verläufe in Schriften sind heute möglich. Hier gehen die Möglichkeiten sogar so weit, dass sich je nach Scrollverhalten die Farbe ändert. Dadurch können tolle Effekte geschaffen werden. Auch hier gilt einfach Mut mit Farben gekonnt zu spielen. Unterschiedliche Farben wirken auf einem dunklen Hintergrund anders als auf einem hellen Hintergrund. Daher eignen sich einige Farben nicht zwingend für helle oder dunkle Hintergründe. Und auch hier gilt, weniger ist mehr.

Die Mischung macht es

Das Scrollverhalten von Websites, die Länge von einzelnen Viewports und auch die Auflösungen der Displays ermöglichen uns im Webdesign viele Möglichkeiten in der Mischung von linksbündigem Satz oder auch Mittelachsensatz. In der Realität ist nie eine ganze Seite auf einmal für den User ersichtlich. Der User scrollt von sichtbarem Bereich zu sichtbarem Bereich. Das ermöglicht das Mischen von einem Mittelachsensatz mit einem linksbündigen Satz, ohne dass es dabei zu optischen Spannungen kommt. Die Technik bietet uns heute so viele Möglichkeiten, dass eine Satzgestaltung zu einem wahren Feuerwerk im Design wird.

Der Einsatz der richtigen Satzart in digitalen Medien

In den digitalen Medien, wie zum Beispiel Websites oder auch Apps, ist bei der Wahl der Satzart auf die vorhandenen Möglichkeiten der Ausgabemedien zu achten. Für einen gut ausgeglichenen Blocksatz sollte die Voraussetzung für eine Mikrotypografie vorhanden sein. Diese Möglichkeiten bieten Browser derzeit nicht. Bei der Mikrotypografie spricht man unter anderem vom Kerning der Buchstaben, dem optischen Randausgleich, Ausgleich der Wortzwischenräume oder einer sauberen Silbentrennung. Unter CSS3 ist eine automatisierte Silbentrennung bereits möglich. Diese ist aber noch nicht vergleichbar und auf dem Niveau, wie es die gängigsten Layoutprogramme sind. Die Möglichkeit der Silbentrennung wird aber noch nicht von allen Browsern unterstützt.
Blocksatz ist bei Websites nur bei längeren Zeilen sinnvoll. Bei kurzen Zeilen entstehen sehr schnell unsaubere und große Wortzwischenräume, was zu einer lückenhaften und unsauberen Satzdarstellung führt. Daher ist diese Satzart nicht zu empfehlen.

Der linksbündige Satz ist die gängigste Satzart im lateinischen Alphabet. Dieser bietet sich auch sehr gut für Websites oder Apps an. Unter anderem bietet diese Satzart für das Auge immer den gleichen Anfangspunkt zum Lesen und Erfassen einer Zeile, was den Lesefluss dadurch vereinfacht und unterstützt.

Der Mittelachsensatz wird bei Druckerzeugnissen gerne für Einladungskarten, Visitenkarten, Briefbogen oder auch Todesanzeigen verwendet. Der Mittelachsensatz sollte im Idealfall zwischen 3 und 5 Zeilen aufweisen, jedoch nicht mehr als 8 Zeilen. Im Bereich der modernen Websitegestaltung genießt der Mittelachsensatz eine immer größere Beliebtheit und wird gerne für Auszeichnungen, Zitate oder kürzere Texte verwendet. Auch hier gilt die Faustformel, dass nicht mehr wie 5 Zeilen für einen Mittelachsensatz eingesetzt werden sollten.

Die optimale Zeilenlänge

Die optimale Zeilenlänge entspricht als Faustformel dem doppelten Alphabet (das sind genau 52 Zeichen). In der Summe sollte die Zeilenlänge also zwischen 50 und knapp 60 Zeichen aufweisen, um für das Auge gut lesbar zu sein. Werden die Zeilen länger, so muss das Auge beim Lesen durch die lange Zeile immer wieder von neuem den Zeilenanfang suchen. Das erschwert den Lesefluss. Diese Faustformel kann für den Printbereich als auch für digitale Ausgabegeräte herangezogen werden.

Ich freue mich, Sie mit diesem Blogbeitrag zu inspirieren, die Welt durch einzigartiges Design mitzugestalten.

Thomas Seruset CEO - Geschäftsführender Gesellschafter
Springe an den Anfang der Seite