CSS/Anwendung und Praxis/Textformatierung

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie, wie Sie Ihre Texte mit wenig Aufwand mit CSS ansprechend gestalten können. Dabei erlangen Sie einen ersten Einblick in die Grundlagen der Web-Typographie.

Web-Typographie basiert zwar auf den in Jahrhunderten entwickelten Grundsätzen der Druck-Typographie; da es im Webdesign aber keinen festgelegten Darstellungsbereich wie z.B. eine Doppelseite im Buchdruck gibt, treten Grundsätze wie der des vertikalen Rhythmus gegenüber anderen, im Folgenden erklärten, zurück.

Inhaltsverzeichnis

[Bearbeiten] Allgemeines

[Bearbeiten] absolute oder relative Schriftgrade?

Ähnlich wie im Printbereich, wo der Punkt sich nicht auf die Größe der Buchstaben an sich, sondern ursprünglich auf die Breite der Bleikegel bezog[1], entspricht ein Pixel nicht einem Bild-Pixel am Bildschirm, sondern dient nur als Basiseinheit.

Grundsätzlich ist es nicht falsch einem Text eine feste Schriftgröße in Pixeln zu geben. Allerdings können Benutzer in ihrem Browser eine andere Schriftgröße einstellen, so dass der Text eventuell aus den für ihn vorgesehenen Boxen überläuft.

Gerade angesichts der heutigen vielfältigen Viewports ist es sinnvoller für bestimmte Größen mittels media queries eine Basisschriftgröße anzugeben. Alle weiteren Werte beziehen sich dann auf diesen Wert. Bei der Verwendung von em muss auf die Schachtelung der Elemente Rücksicht genommen werden, da sich dieser Werte jeweils auf das Elternelement bezieht. Durch die Verwendung von rem, das sich auf die Schriftgröße des Wurzelelements html bezieht, können Sie diese Fehlerquelle umgehen.

[Bearbeiten] Schriftgröße

Noch vor ein paar Jahren war es üblich dem p-Element eine feste Größe von 75-80% oder sogar nur 8px zu geben.[2] Auf mobilen Geräten entstand so eine Miniatur-Vorschau der Seite, die dann erst vergrößert werden musste. Heute setzen sich immer mehr Seiten durch, die für normalen Text die Standardschriftgröße des Browsers (1em) verwenden.

Empfehlung:
  • Verwenden Sie die Standardschriftgröße 1em auch als Schriftgröße für Ihren Text. Wenn Sie die Maßeinheit rem verwenden, können Sie Änderungen in den Elternelementen von p ignorieren.
  • Überlassen Sie es dem Benutzer selbst, die Schriftgröße mit einem Fingerziehen oder [strg] [+] bzw. [-] auf Desktop-Geräten selbst zu skalieren.
Beachten Sie:

[Bearbeiten] Schriftarten

Mit der @font-face-Attribut können Sie zusätzliche Schriften einbinden. In diesem Tutorial wird erklärt, wie Sie die Google-Fonts in Ihre Webseiten einbinden können.

Für den Fall dass die eingebundene Schriftart nicht angezeigt werden kann, können Sie in einem Font Stack mehrere Alternativen festlegen. Bei mehreren angegebenen Schriftarten ist die Reihenfolge der Angabe entscheidend: ist die erste angegebene Schriftart verfügbar, wird diese verwendet. Ist sie nicht verfügbar, wird die zweite Schriftart verwendet, falls diese verfügbar ist usw.


Empfehlung: Verwenden Sie nur wenige, ausgewählte Schriftarten. Achten Sie dabei besonders auf eine gute Lesbarkeit auch auf kleinen Bildschirmen. Meist bietet sich eine besondere Schriftart nur bei Überschriften in einer besonders groß gewählten Schriftgröße an.

[Bearbeiten] responsive Schriftarten

Für viele Schriftarten existieren leichtere und fettere Varianten. So existieren neben Georgia und Verdana auch noch Georgia Pro Condensed und Verdana Pro Condensed. Verwenden Sie für kleinere Viewports die leichtere Variante um mehr Informationen zu vermitteln. [3]

[Bearbeiten] Überschriften

Überschriften sind Blickfang (eye-catcher und attention-getter), die Aufmerksamkeit und Interesse auf den Text lenken. Es lohnt sich, besonderes Augenmerk auf Inhalt und Gestaltung der Überschriften zu legen, damit Besucher ihrer Webseite gleich einen guten Eindruck bekommen und zum Weiterlesen animiert werden.

[Bearbeiten] Hierarchien

Es gibt in HTML 6 verschiedene, in der Ordnung abgestufte, Überschriften.[4] Um die Unterschiede sichtbar zu machen, können Sie entweder unterschiedliche Schriftgrößen mithilfe einer typografischen Skala [5] verwenden oder die Stile anders definieren:

Beispiel
h2{
  text-transform: uppercase;
}
h3{
 font-variant: small-caps;
}
h4{
  font-style: italics;
}

Hier wurden die Überschriften mit text-transform, font-variant und font-style unterschiedlich gestaltet, damit klar erkennbar ist, zu welcher Hierarchieebene die Überschrift gehört.

[Bearbeiten] Inhalt

Eine Überschrift ist oft nicht nur das erste, sondern auch das einzige, was Besucher einer Webseite lesen. Im Webdesign ist die Überschrift noch wichtiger als im Print-Bereich, da Suchmaschinen den Inhalt der Überschriften für die Bewertung der Webseite heranziehen. Deshalb sollten Überschriften immer inhaltlich sinn- und wertvoll sein.[6]

Empfehlung:
  • Stellen Sie sicher, dass die Überschrift auch alleine wirkt.
Neue Zeiten brauchen neue Entscheidungen
Es ist nicht erkennbar, um was es geht.
  • Kurz, knapp und prägnant: Kürzen Sie unnötige Wörter und Nebensätze.
Treffen Sie schnellere und bessere Entscheidungen mit Daten-Visualisierungen
Daten-Visualisierungen entdecken und verhindern Datenklau
Die untere Überschrift ist kürzer und inhaltlich genauer.
  • Stellen Sie wichtige Schlüsselwörter an den Anfang.
Neue Wege in der Daten-Analyse durch Daten-Visualisierungen
Daten-Visualisierungen erleichtern Daten-Analyse


[Bearbeiten] Gestaltung

Machen Sie vollen Gebrauch von den Möglichkeiten von CSS:

CSS-Texteffekte:

SVG und Text

[Bearbeiten] Fließtext

Die normalen Textabschnitte mit den Absätzen p und evtl. geordneten oder ungeordneten Listen ul bzw. ol sind gewöhnlich das, was Benutzer auf Ihrer Seite suchen - alles andere ist Beiwerk. Deshalb sollte hier auch das Augenmerk auf guter Lesbarkeit und hohem Informationsgehalt liegen - das volle Repertoire der CSS-Eigenschaften würde hier eher ablenken.

Empfehlung: Verzichten Sie im Fließtext auf
Empfehlung: Vermeiden Sie ein Laden der Seite, bevor die Stylesheets geladen sind. Dieses FOUC (Flash of unstyled Content) ist extrem ärgerlich und verzögert den Seitenaufbau.


[Bearbeiten] Zeilenbreite und Spalten

Eigentlich sollten Sie Ihre Webseiten responsiv gestalten und also auf die Angabe einer festen Breite verzichten. Andererseits sind Zeilenlängen über die ganze Breite großer Bildschirme, wie sie in der Wikipedia und auch hier im Wiki zu finden sind, oft nur schwer lesbar, da Sie den Beginn einer neuen Zeile nicht auf Anhieb im Blick haben. Eine Zeilenbreite von 45-75 Zeichen wird im Allgemeinen als optimal angesehen, dies ist aber keine feste Regel. [7]

Das Aufteilen der Seite in Tabellenspalten oder ersatzweise divs schuf hier früher Abhilfe, ist in Zeiten multipler Viewports aber nicht mehr akzeptabel, da eine Viewport-Änderung entweder zu horizontalen Scrollbalken oder einer Zerstörung des Seitenlayouts führen würde.

Mit CSS-columns können Sie beliebig viele Spalten festlegen, die erst bei einer bestimmten Viewport-Breite aktiviert werden.

Empfehlung: Verwenden Sie das Mehrspaltenlayout mit CSS-columns.
Beispiel
p {
  -moz-columns:    3 45em;
  -webkit-columns: 3 45em;
  columns:         3 45em;
}
Mit dieser kurzen CSS-Angabe wird der Text in Spalten mit einer Mindestbreite von 45em umgebrochen, in älteren Browsern (IE8+9) wird der Text ganz normal über die gesamte verfügbare Breite angezeigt.


[Bearbeiten] Blocksatz oder Flattersatz?

Mit text-align können Sie die horizontale Ausrichtung von Text beeinflussen. Die normale Vorgehensweise, dass Zeilen links beginnen und rechts wegen der unterschiedlich langen Wörter einen unregelmäßigen Rand haben, nennt man linksbündigen Flattersatz.

Alternativ dazu gibt es den Blocksatz, in dem die Wörter so über die Zeilen verteilt werden, dass es sowohl links als auch rechts einen bündigen Rand gibt.[8]

Empfehlung: Ein gleichmäßiger Wortabstand ist lesefreundlicher. Der vermeintliche Vorteil regelmäßiger Ränder wird aber gerade bei kürzeren Zeilenlängen durch übergroße Wortabstände zunichte gemacht. Verwenden Sie Blocksatz nur, wenn sie volle Kontrolle über Schriftgröße und Zeilenlänge haben. Da dies in responsiven Designs aber eigentlich dem Endgerät (media queries) bzw. dem Benutzer überlassen sein sollte, gibt es nur wenige Möglichkeiten, in denen der Einsatz von Blocksatz gerechtfertigt erscheint.


[Bearbeiten] Gestaltung

Sie können Fließtext durch Grafiken oder Zitate auflockern. Folgende Artikel beleuchten weitere Teilbereiche:

[Bearbeiten] Quellen

  1. Wikipedia: Schriftgrad
  2. smashing magazine Typographic Design Patterns And Current Practices (2013 Edition)
  3. smashing magazine: Benton Modern, A Case Study On Art-Directed Responsive Web Typography vom 27.05.2015
  4. tutsplus: Understanding Typographic Hierarchy
  5. Modular Scale von Tim Brown + Scott Kellum
  6. nngroup.com: headings are pickup lines: 5 tips for writing headlines that convert
  7. css-tricks.com: Bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing)vom 01.11.2013
  8. toscho.de Blocksatz vermeiden

[Bearbeiten] Weblinks

Deutsch:

Englisch:

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML