FOTO Blog FOTO Blog Tipps & Tricks Zeilenlänge, Zeilenabstand und Absätze im Web

Weitere Artikel aus dem Foto Blog

Bildbearbeitung - Photoshop - Webdesign

Zeilenlänge, Zeilenabstand und Absätze im Web

Lange Texte am Monitor zu lesen, lässt die Augen schnell ermüden - ein Grund dafür, dass jede Internetseite nach wie vor eine optimierte Version für den Druck bereitstellen sollte.

Dies geschieht über ein separates und dem Druck angepasstes Stylesheet, das nur dann geladen wird, wenn die Seite ausgedruckt werden soll.

Code zum Einbinden einer print.css in den <head> Ihrer Seite.

Unterstützen Sie Ihre Seitenbesucher, indem Sie kurze, sinnvolle Absätze bilden und im Idealfall Zwischenüberschriften einfügen. Dies ermöglicht dem User ein Überfl iegen der Seite (das sogenannte Scannen) und ein zügiges Auffi nden der für ihn relevanten Textpassagen.

Zeilenlänge

Die Zeilenlänge Ihrer Texte sollte zwischen 60 und 80 Zeichen je Zeile liegen. Sind die Zeilen zu kurz, muss der Besucher zu oft die Zeile wechseln, was ermüdend und beunruhigend wirkt. Bei zu langen Zeilen erhöht sich die Gefahr, bei Lesen in die falsche Zeile zu springen.

Zeilenabstand

Ähnlich verhält es sich mit dem Zeilenabstand. Diesen sollten Sie im Web etwas größer wählen als in Printmedien. 130 bis 150 % ist ein bewährter Wert, der in Kombination mit einer passenden Schrift und einer gut gewählten Zeilenlänge optimale Lesbarkeit garantiert.

Wenn Sie Serifenschriften verwenden, muss hier der Zeilenabstand nicht ganz so hoch bemessen werden wie bei grotesken Schriften.

Den Zeilenabstand können Sie in Photoshop auf folgende Weise anpassen:

Im Bedienfeld Zeichen steht Ihnen das Auswahlmenü Zeilenabstand zur Verfügung.

Hier können Sie individuelle Zeilenabstände pixelgenau angeben.

Um den für Ihre Schrift vorgegebenen Zeilenabstand zu verwenden, wählen Sie Auto.

Zeilenabstand und CSS

Mit CSS erhöhen Sie den Zeilenabstand über das Attribut line-height. Hiermit wird über und unter der Textzeile Platz hinzugefügt und nicht, wie im Print üblich, der Abstand von Grundlinie zu Grundlinie erhöht.

body {
line-height: 130%;
}

Textausrichtung und Silbentrennung

IIn Photoshop stehen Ihnen im Bedienfeld Absatz verschiedene Absätze für Ihre Fließtexte zur Verfügung. Sie haben hier die Möglichkeit, links- oder rechtsbündigen Flattersatz einzustellen sowie Ihren Text zu zentrieren. Darüber hinaus können Sie auch Blocksatz verwenden, in dem die letzte Zeile links- oder rechtsbündig sowie zentriert dargestellt wird.

Ganzen Artikel lesen...

Als letzte Option bietet Ihnen Photoshop CS4 den erzwungenen Blocksatz. Im Web stehen Ihnen diese Möglichkeiten nur eingeschränkt zur Verfügung. Sie haben hier lediglich die Wahl zwischen links- und rechtsbündigem Text, zentriertem Text und Blocksatz. Achten Sie daher darauf, in einem Layoutentwurf keine Absatzformatierungen zu verwenden, die in dieser Form im Internet nicht umzusetzen sind.

Abgesehen von den Möglichkeiten, die Ihnen HTML und CSS bei der Gestaltung von Texten bieten, sollten Sie Ihre Fließtexte im Web in erster Linie linksbündig ausrichten. Rechtsbündige oder zentrierte Texte lassen sich am Monitor schlecht lesen und sollten nur für besondere Zwecke wie beispielsweise eine Speisekarte benutzt werden.

Der Blocksatz wird Ihnen im Internet noch weitere Probleme bereiten. Aufgrund der Tatsache, dass im Internet keine Silbentrennungen möglich sind, werden die Wörter beim Blocksatz oft zu weit auseinandergezogen. Dies führt zu unschönen Lücken im Schriftbild und erschwert zusätzlich die Lesbarkeit.

Bei der Gestaltung Ihrer Texte in Photoshop sollten Sie daher das Optionsfeld Silbentrennung im Absatz-Bedienfeld deaktivieren, um einen realistischen Eindruck zu erhalten. Absätze und CSS Die Textausrichtung innerhalb eines Elements geschieht über das CSS-Attribut text-align. Neben den Werten left für linksbündigen und right für rechtsbündigen Text können Sie justify verwenden, um Blocksatz zu erzwingen.center zentriert den Text.

p {
text-align: justify;
}

Textauszeichnungen

Textauszeichnungen verleihen Ihren Texten Wertigkeit und trennen somit Ihre Information in wichtige und weniger wichtige Passagen. Fett oder kursiv ausgezeichnete Texte fallen auf und sind wichtiger als der gewöhnliche Fließtext. Größere Texte sind wichtiger als kleine Textauszeichnungen. Hinzu kommt, dass Auszeichnungen auch den Text gliedern, was das bereits angesprochene Scannen der Seiteninhalte erleichtert.

Sie können mittels CSS Texte auch in Form von Kapitälchen oder Versalien darstellen. Bedenken Sie jedoch, dass Ihnen im Web nur „falsche Kapitälchen" zur Verfügung stehen. Hierbei werden lediglich Großbuchstaben verwendet und in ihrer Größe angepasst. Die Stärke der Linien wird jedoch nicht angepasst. Einem Typografieaffinen Besucher wird dies sofort auffallen.

Das gleiche Problem besteht bei kursiv und fett ausgezeichneten Texten. Hier wirkt sich das elektronische Ändern des Schriftbildes jedoch nicht so negativ aus wie bei Kapitälchen.

Verwenden Sie farbige Boxen, um besonders wichtige Inhalte noch weiter hervorzuheben. Ebenso können Sie mit Icons, Linien und Aufzählungen Struktur in Ihren Content bringen.