|
|
| (46 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| − | == Typographie ==
| + | '''Wie wird [[Schrift|Schrift]] als Gestaltungsmittel im Web richtig angewendet?''' |
| − |
| |
| − | 1.1. Zum Begriff Typographie
| |
| | | | |
| − | 1.2. Traditionelle Typographie
| + | Bei den Schriftarten sollte ein einheitliches, klares Schriftbild betont werden, dazu trägt unter anderem bei, dass die beiden Schrifttypen [http://de.wikipedia.org/wiki/Serif serif] und [http://de.wikipedia.org/wiki/Sans_Serif sans-serif] nicht gemischt werden. |
| − |
| + | {| border="0" cellspacing="0" cellpadding="10" style="border-collapse:collapse;" align="center" width="100%" |
| − | 1.3. Zum Begriff DTP
| + | |[[Bild:Serif.gif|framed|right|Serife Schriftart]] |
| | + | |[[Bild:Sans-serif.gif|framed|left|Nicht-serife Schriftart]] |
| | + | |} |
| | + | Man sollte beachten, dass die Stile fett, kursiv und unterstrichen im Dokument nur sparsam verwendet werden, denn sie können sonst leicht mit anderen Funktionen im Dokument verwechselt werden. (Ein unterstrichenes Wort könnte leicht als ein [[Link]] fehlinterpretiert werden.) |
| | | | |
| − | == Typographische Begrifflichkeiten == | + | Außerdem gilt es, das Anti-Aliasing der Schrift anzuwenden, die Schrift wirkt damit glatter. Der Treppeneffekt, der sonst durch die Pixelauflösung der Schrift entsteht, wird durch ein leichtes Verschwimmen gemindert. |
| − |
| + | {| border="0" cellspacing="0" cellpadding="10" style="border-collapse:collapse;" align="center" width="100%" |
| − | 2.1. Versalien und Gemeine
| + | |[[Bild:Alias.gif|framed|right|Aliasing: Schriftart mit Treppeneffekt]] |
| | + | |[[Bild:Anti-alias.gif|framed|left|Anti-Aliasing: Glattere Schriftart ohne Treppeneffekt]] |
| | + | |} |
| | | | |
| − | 2.2. Schriftgrad
| + | ---- |
| | + | Zurück zum übergeordneten Thema [[Webdesign]] |
| | | | |
| − | 2.3. Schriftgrundlinie
| + | Für ausführlichere Informationen zum Thema Typographie, besuchen Sie bitte die folgende Ausarbeitung des Themas [[Typographie]] |
| | | | |
| − | 2.4. Schriftschnitt
| + | [[category:Interaktion und Kommunikation]] |
| − | | |
| − | 2.5. Laufweite
| |
| − | | |
| − | == Satzarten ==
| |
| − |
| |
| − | 3.1. Flattersatz
| |
| − | | |
| − | 3.2. Blocksatz
| |
| − | | |
| − | 3.3. Formsatz
| |
| − | | |
| − | == Layout ==
| |
| − | | |
| − | 4.1. Typographie und Layout
| |
| − | | |
| − | 4.2. Satzspiegel und Seitenformat
| |
| − | | |
| − | == Computerschriften ==
| |
| − |
| |
| − | 5.1. Bitmap- und skalierbare Schriften
| |
| − | | |
| − | 5.2. TrueType-, OpenType- und Postscript-Schriften
| |
| − | | |
| − | | |
| − | | |
| − | '''1. Typographie'''
| |
| − | | |
| − | | |
| − | '''1.1. Zum Begriff Typographie'''
| |
| − | | |
| − | Der Begriff Typographie geht zurück auf die Worte "typos" (Abdruck, Abbild, Form) und "graphein" (schreiben, einritzen). Heute versteht man unter Typographie hauptsächlich die visuelle Gestaltung eines Druckerzeugnisses: Entwurf der Schrifttypen, Bestimmung des Satzspiegels und die Grundregeln der Schriftkomposition.
| |
| − | Die Typographie beschäftigt sich mit Grundelementen der Textgestaltung, die man auch als Mikroelemente definieren könnte. Lange Zeit wurde Typographie als Druckverfahren mit gegossenen Metalllettern definiert.
| |
| − | Heute versteht man jedoch darunter Arten der modernen elektronischen Druckherstellungen.
| |
| − | | |
| − | | |
| − | '''1.2. Traditionelle Typographie'''
| |
| − | | |
| − | Bei typographischen Bemühungen ist das erste Ziel, eine logische Gruppierung und Ordnung eines zu gestaltenden Textes zu finden, dessen graphische Umsetzung sich in seiner Gesamtheit auch mit Nicht-Text-Elementen wie zum Beispiel Graphiken und Photographien harmoniert. Wichtig dabei ist auch die ästhetische Anspruch der Typographie.
| |
| − | Traditionelle Typographie aus der Gestaltung eines Druckerzeugnisses konstituiert sich mittels der vier Grundelemente:
| |
| − | | |
| − | 1. Wahl der Schriftform,
| |
| − | | |
| − | 2. Schriftmischung,
| |
| − | | |
| − | 3. Verhältnis zum Raum
| |
| − | | |
| − | 4. Farbwahl.
| |
| − | | |
| − | Dabei kommt der Wahl der Schriftform eine grundlegende Bedeutung bei. Man kann bei der traditionellen Typographie auch vom Charakter einer Schrift sprechen.
| |
| − | | |
| − | Wie auch SCHEIDT (1991, S.8) bestätigt:
| |
| − | „ Im Sinne einer stringenten Terminologie sei hierfür unter Anlehnung an den linguistischen Begriff der Konnotation der Terminus (soziokulturelle) Schriftformen eingeführt.“
| |
| − | | |
| − | So wurde früher Schriften für modern gehalten, die heute veraltet sind, zum Beispiel Schriftarten aus Zeitungen des des Dritten Reichs.
| |
| − | Das Erscheinungsbild einer Schriftklasse hängt auch von der Größe, Stärke, Weite, und Kursivierung ab. Früher konnte mit dem Bleisatz die Schriftform unveränderbar vorgegeben werden, heute jedoch kann sie mit dem Einsatz des Photosatzes vom Setzer selber verändert werden.
| |
| − | | |
| − | | |
| − | '''1.3. Zum Begriff Desktop-Publishing'''
| |
| − | | |
| − | Desktop-Publishing ist der Oberbegriff für das Verfahren, mit Hilfe eines Personal Computers ein Layout herzustellen und für eine Ausgabe und/oder Vervielfältigung vorzubereiten. Der Begriff umfasst ferner das Erfassen von Text und Graphik mittels geeigneter Hard- und Software. Desktop-Publishing ermöglicht somit, sein eigener Setzer und Drucker zu werden, das heißt, in der Lage zu sein, seine Texte zu gestalten, Graphiken und Bilder einzubinden, also das gesamte Layout selbst herzustellen und schließlich bei Bedarf es auch auszudrucken.
| |
| − | | |
| − | | |
| − | | |
| − | '''Typographische Begrifflichkeiten'''
| |
| − | | |
| − | | |
| − | '''2.1. Versalien und Gemeine'''
| |
| − | | |
| − | Umgangssprachlich werden die Begriffe Groß- und Kleinbuchstaben benutzt werden, allerdings lauten die Fachbegriffe Versalien und Gemeine.
| |
| − | Versalien (von lat. versus = "Zeile") sind die Großbuchstaben des Alphabets. Man kann sie auch als Majuskeln (lat. major = "größer") bezeichnen. Eine Versalienschrift ist also eine Schrift, die nur Großbuchstaben enthält.
| |
| − | | |
| − | Gemeine sind die Kleinbuchstaben des Alphabets. Man kann sie auch als Minuskeln (lat. minor = kleiner) bezeichnen.
| |
| − | | |
| − | Unter Oberhöhe versteht man die Höhe von Gemeinen mit Oberlängen (z.B. "b" oder "f"). Damit diese optisch als ebenso hoch wie die meist etwas fetteren bzw. schwärzeren Versalien empfunden werden, sind Gemeine mit Oberlängen manchmal ein wenig größer als Versalien.
| |
| − | | |
| − | | |
| − | '''2.2. Schriftgrad'''
| |
| − | | |
| − | Der Schriftgrad, der auch manchmal fälschlicherweise Schriftgröße genannt wird, erstreckt sich von der Oberkante eines Buchstabens mit Oberlänge bis zur Unterkante eines Buchstabens mit Unterlänge. Die Versalhöhe ist die Höhe einer Versalie ab der Schriftgrundlinie aufwärts. Sie ist meist unterschiedlich groß.
| |
| − | Der Schriftgrad wird in Punkt (Dot) angegeben.
| |
| − | Der Begriff Dot kommt aus dem Englischen und heißt Punkt. Damit ist der kleinste mit einem Drucker darstellbare Bildpunkt gemeint; bei Bildpunkten auf dem Monitor spricht man von Pixel. Meist wird die Anzahl von Dots auf ein bestimmtes Streckenmaß bezogen. Z.B. bedeutet 300 dpi (dots per inch), daß eine Auflösung mit 300 Punkten auf einer Strecke von einem Inch (= 25,4 mm) gemeint ist.
| |
| − | | |
| − | | |
| − | '''2.3. Schriftgrundlinie'''
| |
| − |
| |
| − | Die Schriftgrundlinie ist einheitlich und dient dazu, verschiedene Schriftfamilien in einer Zeile zu benutzen, ohne dass das Schriftbild unruhig wirkt.
| |
| − |
| |
| − | In der Praxis stehen jedoch nicht alle Zeichen auf der Grundlinie, denn aus ästhetischen Gründen wird oft ein Buchstabe etwas tiefer gesetzt, um einen optischen Ausgleich zu erzielen. Insbesondere runde Buchstabenteile - wie die Schleife des Buchstaben "g" - werden meist etwas über die entsprechende Linie hinaus verlängert.Umgekehrt ragen manche Gemeine aus ästhetischen Gründen etwas über die Oberlänge hinaus.
| |
| − | | |
| − | | |
| − | '''2.4. Schriftschnitt'''
| |
| − | | |
| − | Der Begriff Schriftschnitt stammt noch aus einer Zeit, als das Schriftbild aller Buchstaben einer Druckschrift manuell von einem Stempelschneider in Stahl geschnitten wurde, um dann durch Ausguss vervielfältigt werden zu können. Das Ergebnis waren Lettern aus Blei.
| |
| − |
| |
| − | Der Schriftschnitt bezeichnet eine von mehreren Variationsmöglichkeiten des Schriftbildes einer Schriftfamilie. Diese Varianten unterscheiden sich durch unterschiedliche Auszeichnungsmerkmale (fett, kursiv, unterstrichen) und werden auch Garnituren genannt. Standardmäßig hat fast jede Schriftfamilie einen kursiven, einen fetten und einen fettkursiven Schnitt.
| |
| − |
| |
| − | Bei Computerschriftarten liegen diese Schnitte häufig als eigene Fonts vor. So können bessere Ergebnisse erzielt werden, als wenn in einem Textverarbeitungsprogramm die Standardschrift einfach auf bspw. "fett" gestellt wird. Unter einem Font versteht man bei Computerschriften einen Schriftzeichensatz einer Schriftfamilie (z.B. Arial), wobei die unterschiedlichen Zeichen gleichartige formale Stilmerkmale aufweisen.
| |
| − | Häufig besitzt eine Schriftfamilie nicht nur einen Grundfond (Standard), sondern zudem für unterschiedliche Schriftschnitte - wie fett (bold) oder kursiv (italic) - eigene Fonts.
| |
| − | | |
| − | Des Weiteren gibt es auch noch besondere Schnitte wie etwa Outline oder Schattiert. Auch Initialien haben eigene Schriftschnitte zur Voraussetzung.
| |
| − | | |
| − | | |
| − | '''2.5. Laufweite'''
| |
| − | | |
| − | Laufweite bezeichnet die relative Länge einer Schrift, die auch durch Wortabstand bestimmt wird. Im engeren Sinne ergibt die Laufweite sich durch den Buchstabenabstand. Der Buchstabenabstand ist durch die Breite eines Buchstabens (Dickte), bestehend aus dem druckenden Buchstabenbild und der Vor- und Nachbreite, bestimmt. Nachbreite des vorangehenden und Vorbreite des folgenden Zeichens ergeben so den Buchstabenabstand. Der Buchstabenabstand sollte sich nach der Punzenbreite des Buchstaben "n" richten.
| |
| − |
| |
| − | Die Punze bezeichnet den Innenraum eines Buchstaben. An dieser Punzenbreite orientiert sich der Abstand der Buchstaben (Laufweite). Also hat jede Schrift eine andere Laufweite. Wenn die Buchstaben zu eng beieinander stehen, sind sie schlecht lesbar, sind sie sehr weit voneinander entfernt, wirkt der Text löchrig und das Auge "verliert" sich schnell beim Lesen.
| |
Wie wird Schrift als Gestaltungsmittel im Web richtig angewendet?
Bei den Schriftarten sollte ein einheitliches, klares Schriftbild betont werden, dazu trägt unter anderem bei, dass die beiden Schrifttypen serif und sans-serif nicht gemischt werden.
 Serife Schriftart |
 Nicht-serife Schriftart |
Man sollte beachten, dass die Stile fett, kursiv und unterstrichen im Dokument nur sparsam verwendet werden, denn sie können sonst leicht mit anderen Funktionen im Dokument verwechselt werden. (Ein unterstrichenes Wort könnte leicht als ein Link fehlinterpretiert werden.)
Außerdem gilt es, das Anti-Aliasing der Schrift anzuwenden, die Schrift wirkt damit glatter. Der Treppeneffekt, der sonst durch die Pixelauflösung der Schrift entsteht, wird durch ein leichtes Verschwimmen gemindert.
 Aliasing: Schriftart mit Treppeneffekt |
 Anti-Aliasing: Glattere Schriftart ohne Treppeneffekt |
Zurück zum übergeordneten Thema Webdesign
Für ausführlichere Informationen zum Thema Typographie, besuchen Sie bitte die folgende Ausarbeitung des Themas Typographie
