Schriften

Bei Webschriften beachtet man die Schriftfamilie, Schriftgrösse, Zeilenabstand sowie Schriftfarben und Hintergrundfarben. Grundsätzlich sind serifenlose Schriften (Sans Serif / Groteskschriften) besser am Bildschirm lesbar als Schriften mit Serifen. Ferner können auf Webseiten nur Schriften (Fonts) dargestellt werden, die auf dem Computer installiert sind. In jedem Betriebssystem sind speziell für die Darstellung auf Internet-Seiten einige Standard-Schriften vorhanden. Diese Browser-Schriften sind jedoch von Betriebssystem zu Betriebssystem verschieden. Die meisten Browser haben zudem einen Standardschriftgrösse von 16 Pixel (16px = 1em) für den Fliesstext (p) eingestellt. Grundsatz bei Webschriften, sie sollten auf dem Bildschirm gut lesbar sein.

Websichere Schriften
Damit Schriften angezeigt werden, müssen sie auf dem Ausgabecomputer installiert sein. Diese Schriften werden mit dem Betriebssystem mitgeliefert. Folgende Schriften sind Standards und werden praktisch überall angezeigt:

- Arial (Standardschrift Microsoft, universell, beliebig, gut leserlich)
- Helvetica (zeitlos, neutral, emotionslos, weit verbreitet)
- Times New Roman (MS-Word Standardschrift, markant, platzsparend, Zeitungsschrift, altbacken)
- Verdana (die Schrift fürs Web, gut leserlich, platzsparend, abgenutzt)
- Trebuchet MS (serifenlose Alternative zu Arial/Verdana, frisch, Formen nicht ausbalanciert)
- Georgia (harmonisch, unauffällig)
- Lucinda Grande / Sans (MAC-Schrift, klare Formen, gut leserlich)
- Courier (Schreibmaschinenschrift, monospace, schlecht leserlich, verstaubt)
- Comic Sans (weit verbreitet, unseriös)

>> Ban Comic Sans

Checkliste Webtypo:
- serifenlose Schriften sind im Web besser leserlich
- nicht zu viele Schriften wählen, max. 2 reichen üblicherweise
- falls mehrere Schriften: nicht zu ähnlich, identische Farben und Schnitte erzeugen Harmonie
- Schrift nicht zu eng gestalten / Beispiel verschiedene Schriften
- Basisschriftgrösse (Fliesstext) gross genug wählen
- Zeilenabstand bei unterschiedlichen Schriftgrössen anpassen (z.B. bei Titel grösserer Abstand als bei Fliesstext)
- Zeilen maximal 60 bis 80 Zeichen breit
- Blocksatz oder zentrierte Sätze beim Fliesstext vermeiden
- Tonwert zwischen Schriftfarbe und Hintergrundfarbe ausreichend und angenehm gestalten


Webfonts - eigene Schriften einbinden

Seit 2007 können Webfonts per CSS (Gestaltung/Webseiten Design) eingesetzt werden. Wenn eine Schrift eingebunden werden soll, die nicht bereits Online erhältlich ist (wie beispielsweise Google Web Fonts), muss die Schrift mit allen Daten auf dem Speicherplatz/Server des Webhoster installiert werden. Die Schrift wird dann jeweils mit der Website mitgeliefert und auf den Browsern angezeigt. Hierbei wird üblicherweise das Standardformat OpenType (.otf) oder das Open Font Format (.woff) eingesetzt.
Um auf die Schriftart zugreifen zu können, wird der CSS Code @font-face benutzt.

@font-face { font-family: Bananasplit; //Hier kommt der Namen der Schriftart src: url(‘../schriftarten/bananasplit.otf‘); //Den Pfad der Schriftart anpassen } h1 { font-family: ‘Bananasplit, Arial; }

Einfach die Zeilen in das eigene Stylesheet (CSS Datei) übernehmen, anpassen, die Schriftarten in einem Ordner ablegen und schon kann die Font verwendet werden.

Google Web Fonts
Google bietet eine Palette von Webfonts an (Google Web Fonts), die Online kostenlos erhältlich sind und der Webseite mitgegeben werden können.

Die jeweilige Schrift wird ausgewählt und in den HTML-Head eingebunden. Das Schriftbild muss dann ebenfalls im CSS eingefügt werden.

<head>

<link href='http://fonts.googleapis.com/css?family=Musterschrift'

rel='stylesheet' type='text/css'>

</head>

body { font-family: Musterschrift; }


Schriftgestaltung CSS

Um die Schrift im Web zu definieren, werden üblicherweise folgende Angaben mitgegeben:

font-family = Schriftart (z.B. Arial oder Helvetica mit Zusatz serif, sans-serif, monospace)
font-size = Schriftgrösse (Angaben in Pixel px oder em, wobei 1em=100% von in body definierter Schriftgrösse)
color / background-color = Schriftfarbe / Hintergrundfarbe (Engl. Bezeichnung, Hexadezimalcode)
font-weight = Schriftstärke (normal, bold, bolder, lighter)
font-style = Schriftstil (normal, italic)


Zusätzlich kann das Schriftbild mit folgenden Angaben verändert werden:

letter-spacing = Buchstabenabstand
word-spacing = Wortabstand
line-height = Zeilenhöhe (WICHTIG: line-height wird vererbt, deshalb nie im body-tag angeben, p-Tag oder h1-Tag haben nie dieselbe Zeilenhöhe)
text-align = Textausrichtung horizontal (left, right, center, justify)
vertical-align = Textausrichtung vertikal (top, middle, bottom)


Beispiel CSS Syntax von Schriftattributen sowie HTML-tag:

p { font-family: Verdana; font-size: 17px; color: yellow; background-color: blue; letter-spacing: 3px; word-spacing: 10px; }

<p>Ein neues Schriftbild entsteht.</p>

Vorherige Seite: Farben Nächste Seite: Links