CSS/Tutorials/Typografie/Layout

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
30min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
• HTML
• CSS

Typografie bezeichnet die Kunst und Methoden mittels Schrift, Bildern, Linien, Flächen und typografischem Raum Layouts zu gestalten. Dabei sollen

  • Texte sowohl lesbar und verständlich (orthografisch) als auch optisch ansprechend (ästhetisch) präsentiert werden.
  • Texte, Grafiken, Linien und Leerräume in einem ausgewogenen Verhältnis zueinander stehen.

Überschriften[Bearbeiten]

Ü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.

Hierarchien[Bearbeiten]

Es gibt in HTML sechs verschiedene, in der Ordnung abgestufte, Überschriften.[1] Um die Unterschiede sichtbar zu machen, können Sie entweder unterschiedliche Schriftgrößen mithilfe einer typografischen Skala [2] 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.

Inhalt[Bearbeiten]

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.[3]

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


Gestaltung[Bearbeiten]

Machen Sie vollen Gebrauch der Möglichkeiten von CSS:

CSS-Texteffekte:

SVG und Text

Fließtext[Bearbeiten]

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.


Zeilenbreite und Spalten[Bearbeiten]

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.[4]

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 {
  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.


Blocksatz oder Flattersatz?[Bearbeiten]

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.[5]

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.


Gestaltung[Bearbeiten]

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

Quellen[Bearbeiten]

  1. tutsplus: Understanding Typographic Hierarchy
  2. Modular Scale von Tim Brown + Scott Kellum
  3. nngroup.com: headings are pickup lines: 5 tips for writing headlines that convert
  4. css-tricks.com: Bookmarklet to Colorize Text Between 45 and 75 Characters (for line-length testing) vom 01.11.2013
  5. toscho.de Blocksatz vermeiden

Weblinks[Bearbeiten]

Deutsch:

Englisch: