Ratgeber

Die Typo macht den Text: So werden Unternehmensinhalte im Web besser lesbar

Seite 2 / 2

Bündigkeiten und Trennungen

Magazine, Bücher und Zeitungen sind meist im Blocksatz gelayoutet, also mit Fließtext, der links und rechts bündig ist. Im Web werden Texte fast immer linksbündig gesetzt, denn Blocksatz führt dort oft zu großen Wortlücken. Dazu kommt, dass Trennungen nicht so einfach möglich sind, beziehungsweise sich nicht so exakt umsetzen lassen wie bei Printpublikationen. Spätestens mit responsiven Designs und damit einhergehenden unterschiedlichen Zeilenlängen und Schriftgrößen bricht der Text ständig an anderen Stellen um. Trennungen sind überhaupt nicht mehr kalkulierbar.

Immer wieder problematisch bei responsiven Designs: Lange Wörter, die bei kleineren Bildschirmen die Spalte durchbrechen. Mit hyphens wird der Text automatisch getrennt. Das kann allerdings zu unschönen Trennungen führen. Mit Hilfe von ­“&shy­“ lässt sich eine sinnvolle Trennstelle finden. (Screenshot: Umbruch)

Standardmäßig sind Webtexte linksbündig. Will ein Designer dennoch Blocksatz erzwingen, muss er folgende CSS-Anweisung ergänzen: text-align:justify. Hierfür bieten die Browser inzwischen automatische Silbentrennungen an (hyphens: auto). Damit lässt sich ein extremer Flattersatz, also sehr unterschiedliche Zeilenlänge bei linksbündigen Texten, vermeiden. Der Nachteil dabei ist, dass Wörter oft an Stellen umbrochen werden, die zwar grammatikalisch korrekt, aber für den Lesefluss ungünstig sind. Da die Hyphens-Regel sprachsensitiv ist, sollte man darauf achten, dass in HTML als Websitesprache auf die jeweilige Sprache der Texte eingestellt ist. Für Deutsch geht das mit <html lang=“de“>.

Es gibt in der deutschen Sprache sehr lange Wörter, die in kleineren Spalten oder kleineren Bildschirmauflösungen Probleme machen können. Das liegt daran, dass sie länger sind als die zur Verfügung stehende Anzeigefläche. Gerade bei größeren Überschriften kommt das häufiger vor. Hier kann man mit dem bedingten Trennstrich arbeiten. Das HTML-Sonderzeichen &shy; kann eine Stelle in einem Wort markieren, an der dieses getrennt werden darf. Wenn der Platz nicht ausreicht, wird das Wort dort automatisch getrennt und ein Trennstrich hinzugefügt.

Der Nachteil des bedingten Trennstriches ist, dass dieser im Inhalt extra hinzugefügt werden muss. Der Artikel „Dealing with long words in CSS“ [2] hat sich dieser Problematik angenommen und empfiehlt folgende CSS-Lösung:

CSS für Trennung von langen Wörtern

.hyphenate { 
overflow-wrap: break-word; 
word-wrap: break-word; 
-webkit-hyphens: auto; 
-ms-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto; 
}

Listing 1

Eine große (Schrift-)Familie

Optische Highlights helfen dabei, Texte zu strukturieren. Eine der besten Methoden, um Texte besonders zu kennzeichnen und die Gesamtgestaltung trotzdem einheitlich erscheinen zu lassen, ist die Arbeit mit Schriftschnitten. Das sind Variationen einer Schriftart, die die Strichstärke – etwa light oder bold –, die Schriftbreite – zum Beispiel condensed – oder die Schriftlage, beispielsweise kursiv, verändern. Zusammen ergeben die Schriftschnitte eine Schriftfamilie. Während Fließtexte am besten im normalen Schriftschnitt dargestellt werden, können Überschriften fetter oder auch dünner sein. Markierungen im Fließtext lassen sich beispielsweise kursiv auszeichnen. So kann man einfach Highlights setzen und behält ein harmonisches Erscheinungsbild.

Schriftarten kombinieren

Dank Webfonts haben Webdesigner inzwischen eine annähernd so große Auswahl wie früher nur die Printdesigner. Viele setzen nicht nur eine Schriftart ein, sondern zwei oder noch mehr. Erste Faustregel bei der Schriftsuche: auf den Kontext achten. Die Schriftart muss zum Thema passen. Eine Schriftart mit ausreichend vielen Schriftschnitten gestaltet von sich aus ein abwechslungsreiches Design. Sollen aber mehrere Akzente gesetzt werden, dann sind zwei Schriftarten okay – und meistens auch ausreichend. Am besten wählen Designer eine Schriftart für die Überschriften, die durchaus etwas mehr Akzente zu setzen vermag, und eine für die Fließtexte, die vor allem gut lesbar ist. Für drei oder gar mehr Schriftarten muss es schon triftige Gründe geben.

Eine gute Gestaltung lebt von den Kontrasten. Das gilt auch für die Schriftkombination. Der Klassiker ist hierbei die Kombination aus einer Serifen- und Nicht-Serifen-Schrift. Auf der einen Seite steht dann eine eher sachliche Nicht-Serifen-Schrift mit klaren nüchternen Strichen, auf der anderen eine eher markante Serifen-Schrift mit geschwungenen, manchmal auch geraden Serifen, die stets für Aufmerksamkeit und oft auch Emotionalität sorgen. Dadurch kommt Spannung und Abwechslung in das Design.

Es gibt auch Serifen- und Nicht-Serifen-Schriften aus einem Hause. Sie eignen sich besonders gut, um sie nebeneinander einzusetzen. Beispiele hierfür wären die Webfonts „Droid Sans“ und „Droid Serif“ oder „Source Serif Pro“ und „Source Sans Pro“. Sie wirken zusammen harmonisch und trotzdem kontrastreich.

Nicht vergessen: Je mehr Webfonts und auch Schriftschnitte zum Einsatz kommen, umso mehr müssen auch geladen werden.

Responsive Typografie

Fast noch mehr als auf Desktops kommt es im mobilen Web auf die Typografie an. Die Auflösungen bei mobilen Endgeräten sind häufig kleiner als bei Monitoren und die Anordnung erinnert mehr an einen langen Schlauch. Es empfiehlt sich daher, Schriftgrößen in einer relativen Einheit wie em oder rem statt in px zu definieren. Dadurch lassen sie sich bei unterschiedlichen Bildschirmauflösungen einfacher anpassen.

Trends der Web-Typografie

Bei der Textgestaltung sollten Designer aktuelle Entwicklungen berücksichtigen. Dadurch verleihen sie Websites einen modernen Anstrich. Diese Trends sollten aber nicht so schnelllebig sein, dass sie im kommenden Jahr schon wieder out sind. Ein paar Anregungen.

Groß und Fett

Mut zeigen und Selbstbewusstsein ausstrahlen – das funktioniert sehr gut mit großen Schriften und fetten Schriftschnitten. Text als markantes Gestaltungselement eingesetzt, transportiert die gewünschte Botschaft inhaltlich und visuell gleichzeitig.

Hier sind selbst die Headlines auf den Unterseiten in großer Schrift. (Screenshot: Luther)

Hier sind selbst die Headlines auf den Unterseiten in großer Schrift.

Schreibschriften

Authentizität und Individualität sind gewünschte Unternehmenseigenschaften dieser Tage. Schreibschriften können diese Anforderungen gut erfüllen, weil sie eben nicht standardisiert aussehen, sondern eine persönliche Note in das Design bringen.

Persönliche Note: Bei Shopware wird einmal gezielt auf der Startseite eine Handschrift eingesetzt – um das Emotionale zu betonen. (Screenshot: Shopware)

Dünn und minimalistisch

Fast ein Gegentrend zu „Groß und Fett“ – aber nur zum Teil. Dünne Schriftschnitte – gerne auch in Versalien, also Großbuchstaben – gesetzt, wirken edel, schlicht und zeitlos modern. Erhöhen Designer dazu noch den Buchstabenabstand, kreieren sie eine minimalistische, moderne Erscheinung.

Ein dünner Schriftschnitt sorgt bei großen Headlines für eine moderne Anmutung. Für kleinere Schriftgrößen sind dünne Schnitte aber eher ungeeignet. (Screenshot: Showcase)

Foto-Overlays

Zu den größten Herausforderungen im Design zählt die Auswahl passender Bilder. Oft ist es gar nicht so einfach, Motive zu finden, welche die Kernbotschaft unmissverständlich transportieren. Wie in klassischen Werbekampagnen entfalten Bilder ihre Wirkung aber erst im Zusammenspiel mit Text.

Da immer öfter große Formate zum Einsatz kommen, hat es sich etabliert, den Text direkt auf das Bild zu setzen – natürlich ohne entscheidende Bildinhalte zu verdecken. So können Bild und Text zusammen eine spannungsreiche Kombination ergeben.

Bei sonnenbatterie.de wird jede Seite mit einem großformatigen Bild und einer Headline eingeleitet. (Screenshot: Sonnenbatterie)

Bei sonnenbatterie.de wird jede Seite mit einem großformatigen Bild und einer Headline eingeleitet.

Fazit

Beim Design von Websites fließt viel Denkarbeit in die Auswahl von Bildern und Farben. Die Typografie wird dabei leider zu oft vernachlässigt. Dabei ist es gar nicht so schwer, eine typografische Gestaltung umzusetzen, die diesen Namen auch verdient. Designer sollten dafür in erster Linie auf die Lesbarkeit achten und dann Akzente setzen, die die Gesamtaussage des Designs unterstützen.

Ebenfalls interessant:

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Schreib den ersten Kommentar!