Nachdem wir im fünften Teil von „Wie erstelle ich eine Webseite“ etwas über Bilder erfahren haben, geht es jetzt um das Thema Schrift. Schriften sind für die Webseite natürlich von hoher Bedeutung; nicht nur, dass sie den Inhalt in Form von Buchstaben vermitteln, sondern auch, dass sie mit Farbe, Größe und Art der Buchstaben eine gewisse Ausstrahlung vermitteln.

Doch bevor wir zu den Farbwirkungen und Größenrichtlinien kommen, erstmal zum wichtigsten, der Schriftklassifierung:

  • Serifen-Schrift
  • Serifenlose Schrift (sans serif)
  • und monospaced Schriften

Die sind die drei wichtigsten Typen bzw. Klassen. Es gibt noch andere „Rand“-Stile, die ich hier aber außen vor lassen möchte.

Serifen-Schrift

Zu dieser Art zählen zum Beispiel Times, Times New Roman und Garamond. Jede Schrift, die Serifen hat gehört dazu. Eine Serife ist sozusagen eine ornamentartige Verlängerung des Buchstabens, um die Lesbarkeit auf Papier zu Verbessern (insbesondere, um die Zeile beim Lesen halten zu können).

Serifen

Serifen sind „Ausläufer“, um die Zeile beim Lesen besser halten zu können.

Im Web hingegen sollte man sie eher nicht einsetzen, weil die zusätzliche Farbe am Buchstaben dem Leser das Lesen erschwert.

Serifenlose Schrift

Hier ist es genau umgekehrt: Dadurch, dass die Serifen fehlen, fällt das Lesen am Bildschirm leicht, auf Papier hingegen schwer.
Arial, Verdana, Helvetica sind typische serifenlose Schriften.

sans serif - ohne Serifen

sans serif – ohne Serifen – besser für digitale Medien

Wir halten fest:
Im Web und bei Bildschirmpräsentationen nutzen Sie am besten serifenlose Schriften; im Print hingegen Serifenschriften.

Sonderfall monospaced

Diese Schriften zeichnen sich dadurch aus, dass jeder Buchstabe gleich viel Raum einnimmt bzw. alle genau gleich breit sind. Ein „i“ also genauso viel Platz benötigt wie ein „w“. Am deutlichsten merkt man es, wenn man Wörter mit gleich vielen Buchstaben untereinander schreibt:

Ilse
Wort

Normal würde es so aussehen:

Ilse
Wort

Diesen Schrifttyp benutzt man gerne in der Programmierung.

Welche serifenlose Schrift soll ich jetzt im Web benutzen?

Wenn man in Word das Schriftenmenü öffnet, findet man sehr viele Schriften (auch serifenlose). Nun könnte man auf die Idee kommen, so eine Schrift durch einen entsprechenden CSS-Befehl für die Website zu benutzen:

body {font-family: Univers;}

Das würde bedeuten, dass jeder, der Ihre Website aufruft und diese Schrift nicht installiert hat, Ihren Text stattdessen mit dem Standard-Stil angezeigt bekommt (i.d.R. Times New Roman). Um das zu verhindern, benutzen Sie am besten nur Schriften, von denen Sie ausgehen können, dass sie wirklich jeder installiert hat:

Windows:
Arial, Arial Black, Book Antiqua, Comic Sans MS, Courier New, Georgia, Impact, Lucida Console, Lucida Sans Unicode, MS Sans Serif, MS Serif, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS, Verdana, Symbol, Webdings, Wingdings.

Mac:
Arial, Arial Black, Charcoal, Comic Sans MS, Courier, Courier New, Gadget, Geneva, Georgia, Helvetica, Impact, Lucida Grande, Monaco, New York, Palatino, Times, Trebuchet MS, Verdana, Symbol, Webdings, Zapf Dingbats.

Nur die Schnittmenge davon garantiert, dass wirklich jeder Nutzer, die Schriftart benutzt, die Sie für Ihre Website vorgesehen haben.

Auf Nummer sicher gehen Sie, wenn Sie Ihren Schrift-Befehl mit Ersatzschriften ergänzen:

body {font-family: Arial, Helvetica, sans-serif;}

Ist Arial nicht da, wird Helvetica benutzt; fehlt diese auch, wird auf eine serifen-lose zurückgegriffen.

Lösungen zum Schriftenproblem

Früher wurden auf Webseiten trotzdem gerne andersartige Schriften benutzt, in dem man sie in Bilder einbettete und als Grafiken in der Seite einbaute. Das führte zu langen Ladezeiten, schlechte Auffindbarkeit in Suchmaschinen und auch zum Ärger mit Nutzern, da man die Texte nicht mehr kopieren konnte.

Lange hat man mit dem Gedanken gespielt, Schriften einfach wie Grafiken mit hochzuladen, damit jeder die Seite mit der richtigen Schrift sehen konnte. Dies ging jedoch aus lizenzrechtlichen Gründen nicht!

Heute gibt es nun tatsächlich Möglichkeiten, Schriften hochzuladen und über CSS einzubinden! Diese verbrauchen zwar sehr viel Speicher, in Anbetracht von DSL ist das aber zu verschmerzen.

Eine gute Auswahl finden Sie hier:

http://www.fontsquirrel.com/

http://www.google.com/webfonts

Google hat den Vorteil, dass die Schriften direkt von den schnellen Google-Server geladen werden können und die Wartezeit dadurch sehr gering ist.

Weiter zu Teil 7 von „wie erstelle ich eine Homepage“ – CMS, Blog oder lieber normale statische Webseite?