Hyphens & Soft Hyphens

Die Silbentrennungsproblematik

Typografie für eine formatlose Gestaltung gepaart mit langen Wörtern ist keine leichte Aufgabe. Als Gestalter:in ist es jedoch unsere Verantwortung.

Automatische Silbentrennung oder Soft-Hyphens sind im Web extrem relevant. Fixe Trennungen können nicht definiert werden, da der Inhalt responsive bleiben muss.

Das Soft-Hyphen ­ oder ­ kann gut in reine HTML Texte eingesetzt werden. Dies geschieht aber manuell, besonders bei deutschen Texten. Dies sollte  vom Aufwand her auf Titel beschränkt werden.

In vielen Richtext-Modulen wird das ­ als Text interpretiert und nicht als HTML-Entity oder Unicode übersetzt.

CSS3 bietet automatische Hyphens an. Zusätzlich zum hyphens: auto; muss zudem die HTML Sprache (language-tag) eingestellt sein, damit die Spracherkennung des Browsers, die Wörter sauber umbricht. Dies funktioniert relativ gut.

GIF-Animation mit dem Wort Silbentrennungsproblematik. Browserfenster geht langsam zu und zeigt vier Optionen, wie sich die Schrift umbrechen kann.
© Webdesign Essentials
Vertiefe dich ins ganze Kapitel

Web-Typografie