Web-Typografie

Texte im Web zu gestalten ist mehr als nur den Schriftschnitt (regular, bold, italic) zu wählen. Mit Hilfe von CSS ist heutzutage einiges möglich und die Optionen nehmen zu. 

Fangen wir bei dem offentsichtlichsten an:

Schriftart

Musste man sich früher auf die beim User installierten Schriften beschränken und war damit recht eingeschränkt, kann man heutzutage aus dem Vollen schöpfen.

  1. @font-face

    Diese CSS-Regel befähigt einen, dem Browser neue Schriften beizubringen, welche im TrueType (ttf) oder OpenType (otf) – Format sein müssen. Für diese Schrift muss man selbstverständlich die Lizenz haben, um sie verwenden zu dürfen. Bei webfonts.info gibt es eine Kompatibilitätsliste der Browser zur @font-face Methode.

    Ebenfalls dort findet sich eine Liste mit Fonts für diesen Einsatzzweck.

  2. Google Font API

    Googles Font API stellt im Prinzip eine Erweiterung der @font-face Methode dar. Die API kümmert sich um die korrekte Auslieferung der Schrift für den aktuellen Browser des Users, entsprechend seiner Fähigkeiten. Aktuell bietet Google 252 Schriftfamilien in unterschiedlichen Schriftschnitten zur freien Nutzung an.

Selbstverständlich gibt es auch noch weitere Techniken. Beispielsweise Cufon, hier wird mit dem Canvas-Tag von HTML5 gearbeitet. Auch mittels Flash wurde schon so einiges angestellt, um die originale Schrift gegen ein Flash-Element auszutauschen.

Schriftformatierung

Wenn wir nun einen Text haben, kann man diesen auch noch weiter bearbeiten.

  • letter-spacing

    Mittels letter-spacing lässt sich der Abstand zwischen den Buchstaben verändern (Angabe in Pixel oder Em).

  • word-spacing

    Die Option word-spacing tut das Selbe wie letter-spacing für gesamte Worte (ebenfalls Angabe in Pixel oder Em).

  • text-transform

    Möchte man jedes Wort mit einem Großbuchstaben beginnen lassen, alles klein schreiben oder einen Text nur in Versalien ausgeben hilft einem text-transform weiter (Optionen: capitalize, lowercase, uppercase, inherit, none).

  • word-wrap

    Lange Worte kann man umbrechen lassen mit word-wrap (Optionen: normal, break-word, inherit). Dabei werden die Worte aber nicht an sinnvollen Punkten umgebrochen, sondern dort wo der Platz zuende ist – es ist also nur eine Option, damit lange Worte nicht aus dem Layout ragen.

  • hyphens

    Brauchbare Silbentrennung erzielt man mittels hyphens. Bisher konnte man schon mit einem ­-Entity mitten in Worten markieren, wo ein Wort "notfalls" umgebrochen werden kann. Als Option für hyphens stehen einem auto, manual und none zur Auswahl.
    Aktuell im Firefox nur auf englischen Seiten bzw. für englischen Text verfügar, eine Unterstützung für deutsche Texte soll mit Version 8 kommen.

  • white-space

    Die Behandlung von Leerzeichen zwischen Worten lässt sich mittels white-space definieren. Zur Option stehen normal, nowrap, pre, pre-line, pre-wrap und inherit.

  • text-overflow

    Ist Text zu lang für die Zeile, in der er angezeigt werden soll, kann man festlegen, wie er abgebrochen werden soll. Optionen sind ellipsis und clip, wobei letzteres die Standard-Einstellung ist. ellipsis beendet den Text mit einem …

  • font-variant

    Ähnlich text-transform kann man mit font-variant die Schrift verändern, so lässt sich mit der Option small-caps ein Text in Versalien mit Kapitälchen zaubern.

  • line-height

    Die Zeilenhöhe, leider viel zu oft vernachlässigt. Grundregel aus dem Print-Bereich: Sie sollte mindestens 120% der Schriftgröße betragen. Die Zeilenhöhe ist der Abstand von der Grundlinie einer Zeile zur Grundlinie der nächsten Zeile – eigentlich selbsterklärend.

  • font-weight

    Als Optionen stehen bold, bolder, lighter und eine Zahl zwischen 100 und 900 (in 100er Sprüngen) zur Verfügung. Standard ist normal.

  • font-size

    Logisch, aber gehört dennoch dazu: Die Schriftgröße. Werte können in Pixel, Punkt, Em oder Prozent angegeben werden. Em und Prozent sind relative Angaben. Ein Em entspricht der im Browser eingestellten Standardschriftgröße.

  • font-style

    Als Optionen zum Standard normal stehen oblique und italic zur Auswahl (sowie inherit). Auf den ersten Blick stellen italic und oblique beide eine Schrift kursiv dar, jedoch versucht sich italic beim tatsächlichen kursiven Schriftschnitt der Schriftart zu bedienen. Als Fallback dient eine künstlich geneigte Variante der Schrift. oblique ist quasi die Fallback-Variante von italic, hier wird immer ein kursiver Schriftschnitt simuliert.

  • text-shadow

    Um seinem Text einen Schatten zu verpassen, bedient man sich einfach text-shadow. Eine Angabe ist für den x-Versatz, eine für den y-Versatz, die nächste für den Verlauf des Schattens und die letzte für die Farbe des Schattens.

    text-shadow: 2px 2px 5px #039;
    

    Dass man mit einem Schatteneffekt aber sparsam umgehen sollte ist hoffentlich selbstverständlich.

Damit Absätze in ordentlichem Abstand zueinander stehen, sollte man ein sinnvolles margin definieren, beispielsweise könnte der Abstand nach oben und unten von einem p-Element gleich der Zeilenhöhe innerhalb des p-Elementes sein.

Zitate

Will man schnell etwas zitieren, werden gerne mal die „-Zeichen benutzt, dass die aber eigentlich nichts mit richtigen Anführungszeichen zu tun haben, kommt langsam auch in der Masse der Bevölkerung an. Die Anführungszeichen an sich haben eigentlich nichts im HTML verloren, dort wird mittels entsprechender Tags (blockquote, q) deutlich gemacht, was ein Zitat ist. Die Anführungszeichen kann man im CSS mittens den Pseudoklassen :before und :after sowie den Eigenschaften content und quotes steuern. Für quotes gibt man vier Werte an um unterschiedliche Anführungszeichen bei verschachtelten Zitaten darstellen zu können.

blockquote, q {
  quotes: "„" "“" "»" "«";
}
blockquote p:before, 
q:before {
  content: open-quote;
}
blockquote p:after,
q:after {
  content: close-quote;
}

Veröffentlicht von

Hilko

2006 machte ich mein Hobby zum Beruf, startete mit einer Ausbildung zum Mediengestalter und arbeite inzwischen in Hannover als Frontend Web-Developer. Neben der Leidenschaft für semantisches Markup und den Möglichkeiten der aktuellen Frontend-Techniken, interessiere ich mich für das Reisen, fremde Kulturen und die Kunst der Fotografie.

4 Gedanken zu „Web-Typografie“

  1. bei der line-height gebe ich Dir Recht. Wenn man die line-height nicht einstellt, interpretieren der MAC-FF und WIN-FF die Zeilenhöhen unterschiedlich. Ein schöner Nebeneffekt, den ich gerne nutze, ist die horizentrale Zentrierung der Schrift zur line-height.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.