Kategorien
Webdesign

Sechs Typosünden

Typografie ist im Web nur zum Teil zu realisieren. CSS erlaubt zwar die Kontrolle über Buchstaben- und Zeilenabstände. Doch wenn es um typografisch korrekte grafisch dargestellte Überschriften, Zitate und Buttons geht, reicht das nicht aus. ß – bei…

Typografie ist im Web nur zum Teil zu realisieren. CSS erlaubt zwar die Kontrolle über Buchstaben- und Zeilenabstände. Doch wenn es um typografisch korrekte grafisch dargestellte Überschriften, Zitate und Buttons geht, reicht das nicht aus.

ß – bei Großbuchstaben
Dies ist eine typografische Todsünde und muss gegen „ss“ getauscht werden. Wer mehr erfahren möchte, für den hat Dr. Web bereits den passenden Artikel dazu.

Fusstritt
Hier berühren sich bei geschwungenen oder kursiven Schriften die Unterlängen zweier Buchstaben, etwas „g“ und „f“. Leider lässt sich hier kaum etwas tun, als ein anderes Wort oder eine andere Schrift zu benutzen. Ein Vergrößern der Buchstabenabstände innerhalb des Wortes fällt nur unschön auf.

Screenshot

Zum Glück tritt dieser Fehler selten auf, da im Web meist serifenlose Schriften (etwa Arial und Verdana) genutzt werden.

Fusskuss
Dieser Fehler tritt auf, wenn die Zeilenabstände manuell mit CSS oder bei einer Grafik etwa mit Photoshop verkleinert wurden. Die Unterlängen der einen Zeile stoßen dabei an die Oberlängen oder die Großbuchstaben der nächsten Zeile. Das sieht nicht nur unschön aus, ein so geringer Zeilenabstand senkt die Lesbarkeit des Textes deutlich.

Screenshot

Wer den Zeilenabstand nicht vergrößern möchte, kann durch Umstellung der Wörter im Satz versuchen, dem Problem aus dem Weg zu gehen, oder durch leichtes Vergrößern oder Verkleinern der Buchstabenabstände die beiden Wörter weiter auseinanderzurücken.

Falsche Ligaturen
Ligaturen sind Sonderzeichen für nahe zusammenstehende Buchstabenkombinationen wie „fi“ oder „fl“. Um sie zu nutzen, muss die verwendete Schrift diese Zeichen enthalten – und das tut nicht jede. Die meisten Programme wie Photoshop oder Indesign tauschen die Einzelbuchstaben automatisch gegen die Ligaturzeichen aus, sofern eben die Schrift darüber verfügt.

Screenshot

Diese Einstellung lässt sich in beiden Programmen unter dem Palettenmenü der Zeichenpalette überprüfen und einstellen.

Screenshot
Text ohne und mit Ligaturen

Wenn die Schrift über keine Ligaturen verfügt, hilft es nicht, die Buchstaben einfach näher an einander zu schieben. Dies sieht zwar auf den ersten Blick ähnlich aus, ist aber typografisch falsch. Wer nicht auf einen anderen Schriftsatz zurückgreifen kann, sollte für normale Abstände zwischen den Einzelbuchstaben sorgen.

Anführungszeichen
Hier lässt sich viel falsch machen, denn meist wird statt echten Anführungszeichen der Einfachheit halber das Zoll-Zeichen („) genutzt. Wem die deutschen Anführungszeichen zu eintönig sind, kann auch die französische Variante ausprobieren. Diese kann hierzulande auch in beide Richtungen genutzt werden und reißt nicht ganz so große Lücken in die Texte. Mehr zu korrekten Anführungszeichen und den passenden HTML-Codes.

Spationieren
Das Spationieren ist für lange Fließtexte kaum ratsam, da dort sehr viele Buchstaben bearbeitet werden müssen. Mit dem Spationieren lässt sich der Buchstabenabstand zwischen zwei Buchstaben angleichen, damit die Abstände gleich und harmonisch aussehen. Dies lohnt sich besonders bei Logos und Überschriften. Wenn aber Antialias-Text mit Photoshop geschrieben wird, zum Beispiel mit den modernen Pixelfonts, müssen hier die Abstände fast immer manuell justiert werden.

Alle Programme der Adobe-Familie erlauben das Spationieren mit „ALT + Pfeil rechts/links“. So lassen sich, wenn der Textcursor vor einem Buchstaben steht, dessen Abstand zum nächsten Nachbarn vergrößern oder verkleinern.

Screenshot
Unten die jeweils bearbeitete Fassung

Diese Feinjustierung ist für lange Fließtexte übertrieben, gerade bei großen Schriften fallen ungleiche Lücken aber stark auf und sollten nach Möglichkeit ausgeglichen werden.

Spationieren lässt sich auch mit CSS Befehlen, der Abstand zwischen den Buchstaben kann vergrößert und verringert werden:

 style="letter-spacing:-0.5em;"

sorgt für verkleinerten Buchstabenabstand. Wohingegen

 style="letter-spacing:0.3em;"

eine erweiterten Buchstabenabstand produziert. Diese Einstellungen verleiten zum Experimentieren, in der Regel verfügen die Standard-Einstellungen bereits über eine optimale Lesbarkeit.

Von Nicolas Rotermund

Nicolas war Mitarbeiter im Dr. Web Team in unserer Ahrensburger und frühen Lübecker Zeit.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.