Ressourcen: HTML Schriftarten

Ein wesentliches Hilfsmittel bei der Formatierung ist die genutzte Schriftart. Gerne variiert man Schriftarten von Fließtext und Navigation oder von Überschrift und Navigation.

Wie bei den Farben sollte man eh nicht übertreiben und nur variieren, wo Sinn dahinter steht. Das bereits genannte Nutzen verschiedener Schriftarten für Fließtext und Überschrift ist oft eine gute Idee.

Festlegen einer Schriftart in HTML und CSS

Sie wählen die Schriftart in HTML mit

<font face="schriftarten">Schriftarten in HTML</font>

und in CSS mit

<span style="font-family:schriftarten">Schriftarten in CSS</span>

Der Wert schriftarten ist jeweils eine Liste von Schriftarten, wobei die erste beim Besucher verfügbare genutzt wird.

<font face="verdana, arial, helvetica">
  Nutzt Verdana, wenn verfügbar, sonst Arial und im Notfall Helvetica.
</font>

Gibt es keine der Schriftarten beim Benutzer, wird es in der Standardschrift gezeigt.

CSS bietet darüber hinaus generische Werte als Schriftart. Sie werden oft als letzte Alternative genutzt und weisen den Browser an, eine vom Typ her passende Schrift zu nutzen, die es beim Besucher gibt:

• serif – irgendeine Schriftart mit Serifen, geeigneter Standardwert z.B. für Times New Roman.
• sans-serif – irgendeine Schriftart ohne Serifen, geeigneter Standardwert z.B. für Arial oder Verdana
• monospace – irgendeine Gleichweitenschrift, geeigneter Standardwert z.B. für Courier.

Besonders weit verbreitete Schriftarten in HTML und CSS

Hier finden Sie Beispiele von mehreren Vertreter eines Typs, die verbreitet und recht beliebt sind.

Es wird hier nur noch die heute übliche CSS-Form gezeigt.

Serifen-Schriften in HTML und CSS

Serifenschriften werden gerne für Überschriften oder in der Druckform genutzt. Im Fließtext gelten Sie für auf die Dauer schwerer lesbar, was an den Serifen und der vergleichbaren geringen Auflösung des Monitors liegt.

Serifenlose-Schriften in HTML und CSS

Serifenlose Schrift eignen sich optimal zum Lesen am Bildschirm. Mitunter nutzt man sie ausschließlich und nutzt für Überschriften eine andere serifenlose Schrift oder auch eine andere Farbe.

Gleichweiten in HTML und CSS

Gleichweiten Schriften eignen sich besonders gut für vorformatierte Texte, wie etwa Quellcode-Beispiele, da sie auch Einrücken übersichtlich und leicht erkennbar darstellen können.

Hinweise zu Schriftarten in HTML und CSS

• Geben Sie stets mehrere passende Schriftarten an. Die erste verfügbare wird genutzt, so dass Sie priotisieren können, und dennoch eine Alternative haben, wenn der Besucher die Schriftart nicht hat.
• Aus diesem Grund sollten Sie am Ende Ihrer Liste stets eine generische Schriftart stellen. Damit wählt der Browser eine vom Typ her passende aus.
• Nutzen Sie keine exotischen Schriftarten, die kaum ein Besucher hat. Da die meisten Besucher diese nicht haben, wird eh eine Alternative genutzt. Es kann daher Sinn machen, die Seite direkt in der Alternative zu entwerfen.
• Nutzen Sie nicht zu viele Schriftarten. Es sollten nicht mehr als zwei oder drei sein, und die Nutzung sollte im gleichen Kontext stehen. Ansonsten könnte der Besucher verwirrt werden und sich unnütz fragen, warum etwas anders formiert wurde.