Gestaltung · Detailtypografie & Mengentext

Typografie in HTML – eine Kurzübersicht

Auch im Web darf erwartet werden, dass die gepflegte Gestaltung auch eine gepflegte Typografie erfordert. Es gelten grundsätzlich die selben Regeln, wie in der gedruckten Typografie. Die hier dargestellten Beispiele sind nur eine kurze Übersicht von Dingen, die oftmals in Websites vergessen gehen.

Korrekte Zeichensetzung

<br>     = neue Zeile
&#x2009; = reduzierter Wortabstand
× ² ³    = Unicode-Zeichen
«»       = Unicode-Zeichen
&nbsp;   = nicht trennender
               Wortabstand
&shy;    = Trennstelle markieren

In HTML gibt es die meisten Zeichen, die im Print verwendet werden auch als HTML codierung. Die meisten können genau so wie in Print-Programmen eingegeben werden.

Laufweiten verändern (Sperren)

.sperren {
    letter-spacing: 0.1em;
}

Auch im Web kann Text gesperrt werden. Gewisse Browser unterstützen jedoch nur minimal 1 px als gesperrten Wert. Das eingeben von Werten um die Laufweite zu erweitern ist mit Vorteil im Bezug zur Schriftgrösse an zu geben. Hierfür eignet sich die Masseinheit «em» als Beispiel. 1 em = aktuelle Schriftgrösse.

OpenType features

.ligaturen  {
    font-feature-settings: "liga";
}

Auch im Web sind OpenType features wie Ligaturen oder verschiedenen Zahlensets möglich. Der Browser-Support ist hierfür gut, jedoch müssen natürlich die entsprechenden Features im Font vorhanden sein. Der Schrifthersteller liefert in der Font-Dokumentation meist die entsprechenden Angaben.

Blocksatz

.blocksatz {
    hyphens: auto;
    text-align: justify;
}

Blocksatz ist grundsätzlich problemlos möglich. Allerdings entstehen durch die fehlenden Trennungen Löcher im Satz. Somit muss die Trennung gezielt eingeschaltet werden, um diese zu vermeiden. Leider wird diese Funktion von gewissen Browsern (Chrome als Beispiel) nicht unterstütz und somit ist Blocksatz häufig ungeeignet.

Trennungen steuern (von Browser noch nicht implementiert)

.blocksatz {
  hyphenate-limit-lines: 3;
  hyphenate-limit-chars: 6 3 2;
  hyphenate-limit-zone: 40px;
  hyphenate-character: "–";
  hyphenate-limit-last: always;
}

Die Steuerung vom Blocksatz könnte theoretisch über CSS-Eigenschaften sehr genau kontrolliert werden. Leider werden diese Einstellungen in den aktuellen Browsern nicht oder sehr schlecht unterstützt. Die Spezifikation hierzu (CSS Text Module Level 4) ist auch noch nicht standardisiert.

hyphenate-limit-lines
Steuert die Anzahl von Trennungen bei aufeinanderfolgenden Zeilen.

hyphenate-limit-chars
Gibt die minimale Anzahl Zeichen an, die im Wort vorhanden sein müssen, dass die Trennung greift. Zudem kann die minimale Anzahl Zeichen vor und nach der Trennung gesteuert werden.

hyphenate-limit-zone
Steuert in welchem Bereich nicht getrennt werden muss.

hyphenate-character
Gibt das Zeichen an, welches für die Trennung verwendet wird. Standard ist der Trennstrich.

hyphenate-limit-last
Steuert ob zum Beispiel am Ende einer Spalte getrennt werden darf.

Weiterführende Informationen

Typografie im Web

• A Pocket Guide to Master Every Day’s Typographic Adventures
• CSS Properties to Control Web Typography
• Typography Cheatsheet

OpenType im Web

• CSS 3 Font-Feature-Settings OpenType
• graphic design and typography
• Syntax for OpenType features in CSS
• Kerning on the Web

Trennungen im Blocksatz

• Control of hyphenation with CSS4
• CSS Text Module Level 4
• Word wrapping/hyphenation using CSS

CSS-Fähigkeiten von Browsern nachschlagen

• Can I use…