Photoshop und Typografie fürs Web, Teil 2

Thomas Gannatasio

Bei der Typografie fürs Webdesign sind besondere Aspekte zu beachten, zudem ist das Web sehr schnelllebig – Trends wechseln hier rascher als beim Printdesign. Während die Mehrheit der Schrifttypen im Web durch HTML gerendert wird, ist Photoshop nach wie vor notwendig, um Bearbeitung jenseits des Zugriffs von CSS zu handhaben. Dieser Beitrag erläutert die Textwerkzeuge von Photoshop und gibt Tipps, wie Sie die typografischen Fähigkeiten der Software maximieren können. In Teil 2 der Serie geht es um das Glätten von Text und die verschiedenen Möglichkeiten, die Ihnen das Zeichen-Aufklapp-Menü bietet.

Glätten (Anti-Aliasing)

Glätten ist wesentlich für das Erscheinungsbild der Bildschirmtypographie. Im Prinzip glättet es die Kanten der Zeichen, um ihre Originalgestalt zu erhalten. Photoshop bietet fünf voreingestellte Anti-Aliasing-Einstellungen, die die Pixelwerte unter Verwendung verschiedener Algorithmen in Zusammenhang mit dem Pixelraster des Dokuments festlegen.

Leider lässt keine dieser Einstellungen das Rendern von Subpixeln zu, aber wenn Sie die Option Frei Transformieren verwenden, um die Textebene zu bewegen, können Sie die Algorithmen effektiv dazu zwingen, sauberer zu rendern. Jede Einstellung lässt eine andere Anzahl von Ursprüngen zu und einige produzieren nur dann Variationen, wenn sie entlang der X-Achse umgerechnet werden. Nachstehend befindet sich eine Tabelle mit den verfügbaren Transformationen.


Mithilfe von Frei Transformieren können Sie Textebenen verändern, um das Glätten zu verbessern.

Randbemerkung: Subpixel-Rendering

Jedes Pixel auf einem Standardmonitor besteht aus drei Komponenten: Einer roten, einer grünen und einer blauen. Die Helligkeit eines jeden Subpixels wird unabhängig gesteuert und da sie so klein sind, vermischen unsere Augen die drei zu einem einfarbigen Pixel. Typisches Glätten setzt sogar Werte für jedes dieser Subpixel, was in kompletten Graustufenpixeln resultiert.

Subpixel-Rendering nutzt die Individualität einer jeden einfarbigen Komponente aus und verwendet das, um die wahrgenommene Auflösung des Monitors zu erhöhen. Das erlaubt es einem Pixel, vom benachbarten Pixel visuelles Gewicht zu übernehmen. Dadurch kann die Schrift in kleineren Schrittweiten geglättet werden. Das einzige Manko ist, dass das Rendern einer Type auf diese Art und Weise feine Farbverschiebungen entlang der Kanten der Glyphen produzieren kann. Leider unterstützt Photoshop das Rendern von Subpixeln derzeit nicht, das aber gibt uns etwas, auf das wir hoffen können.


Subpixel-Rendering rastert die Schrift noch glatter, indem es die wahrgenommene Auflösung eines Geräts erhöht. Leider wird es von Photoshop derzeit nicht unterstützt.

Ohne

Geglätteter Text, der mit der Einstellung Ohne erstellt wurde, kann nur sehr eingeschränkt verwendet werden und sieht normalerweise am besten bei Punktgrößen zwischen 9 und 18 aus. Größen unterhalb dieses Bereichs führen zu nicht identifizierbaren Zeichen und höhere Größen führen zu erhöhter Zeichenstärke und übermäßig gezackten Kanten.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Abhängig von der Schriftart können manchmal zwei verschiedene Punktgrößen auf derselben Höhe rendern, was zu einer Verschiebung des Buchstabenabstands, der Breite und der X-Höhe führt. Zum Beispiel rendert Arial 14 pt 10 Pixel hoch mit einer X-Höhe von 8 Pixeln. Arial bei 13 pt sitzt auch 10 Pixel hoch, hat jedoch eine X-Höhe von nur 7 Pixeln – ein kleiner aber deutlich wahrnehmbarer Unterschied. Wenn die Zeichen eine enge Laufweite haben, kann diese Einstellung eventuell auch manuelle Unterschneidung erfordern, da einige Buchstaben Pixel an Pixel aneinander stehen.

Arial 13 pt und 14 pt rendern mit derselben Versalhöhe, jedoch mit unterschiedlichen X-Höhen.

Scharf

Die Einstellung Scharf verwendet sehr enge Rasteranpassung und produziert scharfe, wenn nicht zu scharfe Schriften. Das Zeichnen der Pixel mit dieser Einstellung ist sehr ähnlich dem Zeichnen mit der Einstellung Ohne, lässt jedoch einen gewissen Glättungsgrad zu. Tatsächlich können Sie, wenn Sie diese beiden Optionen aufeinander sehen, wirklich beobachten, dass die Mehrheit der soliden Pixel sich von Ohne nach Scharf übertragen.

Während die Versalhöhe und die X-Höhe typischerweise gleich bleiben, können Sie eventuell eine Erhöhung der Zeichenstärke und -weite feststellen. Scharf tendiert dazu, feine Formvariationen beim Glätten komplett abzutrennen und verursacht manchmal inkonsistente Buchstabenformen. Deshalb möchten Sie, wenn die Integrität des Schriftbilds wichtig für Sie ist, vielleicht eine andere Einstellung ausprobieren.

Schärfer

Die Einstellung Schärfer erhält einen Großteil der ursprünglichen Stärke und Rundung der Schriftart, aber sie säubert auch einige der heiklen Pixel, die von leichten Serifen und dünnen Strichen generiert werden, was insbesondere bei höheren Punktgrößen nützlich ist. Jedoch können Sie mit der Einstellung Schärfer die Fähigkeit, die Ebene auf der Y-Achse zu kalibrieren, einbüßen.

Stark

Die Einstellung Stark ist dafür berüchtigt, dass sie einem Schriftbild unnötiges Gewicht hinzufügt. Sie bietet jedoch mit 32 X-Achsen-Variationen und 16 Variationen auf der Y-Achse die größte Freiheit bei der Umrechnung des Ursprungs. Die Vielzahl von Ausgangspunkten bei dieser Einstellung kommt gerade recht, wenn mit komplexen Buchstabenformen gearbeitet wird. Stark ist auch dann nützlich, wenn mit Schriftarten gearbeitet wird, die sehr dünne Striche haben.

Abrunden

Die Einstellung Abrunden kommt dem nicht angedeuteten Anti-Aliasing am nächsten und wirkt im Vergleich zur originalen Form der Glyphe am Echtesten. Dieser Algorithmus wird am besten bei mittelgroßen bis großen Schriften verwendet, weil er bei kleineren Punktgrößen dazu neigt, sehr leicht und oft verschwommen zu glätten. Wenn sie mit einer entsprechenden Schriftart in der richtigen Größe verwendet wird und wenn der Ursprung richtig eingestellt ist, kann diese Einstellung ein schönes Gleichgewicht zwischen Schärfe und der Genauigkeit der Buchstabenform herstellen.

Optionen Aufklappmenü

Textrichtung ändern

Diese Option erlaubt es Ihnen, das Layout der Textebene zwischen vertikal und horizontal umzuschalten.

Standardmäßige vertikale Textausrichtung (Roman)

Wenn Ihre Textebene auf vertikale Ausrichtung eingestellt ist, dann wird Ihr Text Buchstabe auf Buchstabe gestapelt. Wenn Sie jedoch die Standardmäßige vertikale Textausrichtung (Roman) ausschalten, richten sich die Zeichen entlang derselben Grundlinie aus, drehen sich jedoch um 90°.


Links sehen Sie die standardmäßige vertikale Textrichtung, rechts die nicht-standardmäßige.

OpenType

Abhängig von der Schriftart kann eine Anzahl von Funktionen für OpenType verfügbar sein. Diese können Ihre Typographie wirklich verbessern, indem sie Ihnen Zugriff auf besser geeignete Glyphen und kreative Alternativen ermöglichen. Viele dieser Funktionen sollten nur auf die notwendigen Zeichen angewendet werden, um seltsame Formatierung zu vermeiden.

Standardligaturen: Ersetzt normale Zeichenkombinationen durch eine einzelne kombinierte Glyphe.


Adobe Garamend Pro Italic mit und ohne die standardmäßigen Ligaturen „th“ und „ffi“.

Kontextbedingte Ligaturen: Ändert Zeichen auf der Basis der umgebenden Zeichen, um die Flüssigkeit zu erhöhen.


Wie vorstehend zu sehen ist, hat Bickham Script Pro viele kontextuelle Änderungen.

Bedingte Ligaturen: Ersetzt Zeichenkombinationen in der Tabelle für bedingte Ligaturen der Schriftart durch eine einzige kombinierte Glyphe.


Adobe Garamond PROs bedingte Ligatur beim “st”

Schwungschriften: Tauscht Großbuchstaben gegen dekorativere Schwungschriftalternativen aus.


Bickham Script Pro hat außerordentliche Strudel.

Altes Format: Ändert die Tabellenziffern in Ziffern des alten Formats.

Goudy Old Style und ihre old Style Ziffern gleichen sich besser an Text in Kleinbuchstaben an.

Formatvarianten: Ersetzt Standardzeichen durch dekorative Alternativen.

Bickham Script Pro mit stilistischen Änderungen für das „B“ und das „k“.

Titelschriftvarianten: Ersetzt bei der Verwendung mit großen Schriftgrößen durch passendere Glyphen.


Didot LT Std Headling mit Tilting Alternates (unten) zeigt feine Unterschiede in Gewicht und Abstand, was sie geeigneter für Überschriften macht.

Ornamente: Tauscht bestimmte Zeichen durch Glyphen aus dem Ornamentsatz aus.

Ordinalzeichen: Tauscht Zeichenkombinationen wie „st“, „nd“ und „rd“ gegen „1st“, „2nd“ und „3rd“ aus.

Die Ordinalen von Adobe Garamond Pro lassen diese Rangfolgen schmuck aussehen.

Brüche: Ändert Zahlen, die durch einen Schrägstrich (/) getrennt sind, in ihre Zähler- und Nenneralternativen und ersetzt den Schrägstrich durch ein Bruchzeichen.


Adobe Garamond Pro zeigt einen Bruch richtig mit einem Solidus statt eines Schrägstrichs an.

Gebrochene Breiten

Diese Einstellung kann manchmal beim Glätten und Unterschneiden von Schriften helfen, insbesondere bei kleinen Punktgrößen. Wenn diese Einstellung aktiviert ist, wird der Zeichenabstand auf verschiedene Bruchteile von Pixeln eingestellt. Das ist ideal für große Schriften mit automatischer Unterschneidung, tendiert jedoch dazu, die Typen entweder zu eng aneinander zu drängen oder bei kleineren Größen zu weit auseinander zu setzen. Wird diese Option ausgeschaltet, werden alle Zeichenabstände auf ganze Pixelwerte gerundet, was bei problematischen Schriften eine bessere Spationierung hervorbringen kann. Hier heißt es voll ins Schwarze oder voll daneben, also setzen Sie sie mit Bedacht ein.

Systemlayout

Systemlayout setzt bestimmte Optionen in der Zeichenpalette zurück, um den generischen Schriftsatz eines reinen Textdokuments zu simulieren. Unterschneidung und Laufweite werden auf 0 zurückgesetzt, die Einstellung Glätten wird auf Ohne gestellt und Gebrochene Breiten wird ausgeschaltet.

Kein Umbruch

Kein Umbruch lässt Sie manuell kontrollieren, welche Wörter in einer Absatztextebene mit Trennstrich versehen werden. Wenn Sie ein Wort und die Einstellung Kein Umbruch auswählen, stellen Sie sicher, dass das Wort niemals mit einem Trennstrich versehen wird. Sie können das auch mit mehreren Wörtern tun, um einen Ausdruck immer auf der gleichen Zeile zu haben. Wenn es Ihnen nichts ausmacht, dass das Wort mit Trennstrich versehen wird, Sie jedoch eine bestimmte Stelle für den Trennstrich bevorzugen, dann wählen Sie die Zeichen aus, die nicht umgebrochen werden sollten und stellen Sie auf Kein Umbruch ein. Das generiert einen Umbruch an einer anderen Stelle.

Zeichen Zurücksetzen

Die Option Zeichen Zurücksetzen setzt den Text auf seine ursprünglichen Grundeinstellungen zurück. Schriftart, Größe, Zeilenabstand, Farbe und alles andere in der Zeichenpalette wird ersetzt.

(mm), ™

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

Benachrichtige mich zu:
avatar