Ein Hingucker: Schriftart, -größe und -farbe
Sowohl für proportionale als auch für nicht-proportionale Schrift wird der jeweils im Webbrowser hinterlegte Standardfont verwendet. Das schränkt den gestalterischen Spielraum ziemlich ein.
Eine gute Nachricht: Mit dem <font>-Tag können Sie sowohl die Schriftart, die Fontgröße als auch die Zeichenfarbe frei wählen. Dazu nutzt das Tag die folgenden drei Attribute:
- face: Bezeichnet einen einzelnen Font, eine Liste aus Fonts oder eine Schriftfamilie.
- size: Eine Ziffer zwischen 1 und 7, welche die Schriftgröße bestimmt (1 ist die größte Schrift, 3 die Standardschriftgröße).
- color: Die RGB255-Werte der Farbe in hexadezimaler Schreibweise (mit #-Zeichen beginnend) oder ein in HTML unterstützter Farbname (z.B. „orange“, „cornflowerblue“, „springgreen“).
Beispiel:
<font face="helvetica, arial" size="2" color="#525d6b">Diese Zeile wurde in Arial bzw. Helvetica geschrieben.</font><br />
<font face="courier, courier new" size="4" color="#6d5b4f">Diese Zeile wurde in Courier (New) geschrieben.</font>
Und so sieht’s aus:
Diese Zeile wurde in Arial bzw. Helvetica geschrieben.
Diese Zeile wurde in Courier (New) geschrieben.
Einschub: Farben definieren in HTML
Farben können in HTML auf zwei Arten beschrieben werden – und zwar als…
- RGB255-Werte in hexadezimaler Schreibweise
- (standardisierte) Farbnamen
RGB255
Jede Farbe definiert sich durch ihren Anteil der drei Grundfarben Rot, Grün und Blau (RGB) innerhalb eines ganzzahligen Bereichs von 0 bis 255. Die Angabe im Code erfolgt in hexadezimaler Schreibweise.
Um dem HTML-Interpreter des Browsers zu signalisieren „Ich bin ein RGB255-Farbwert“, stellt man diesem noch eine Raute voran. Die Groß-/Kleinschreibung ist bei hexadezimalen Angaben immer unerheblich.
Die Farbe #525d6b entspricht also den folgenden dezimalen Werten: 82 (rot), 93 (grün), 107 (blau).
Farbnamen
Ab HTML 3.2 lassen sich Farben auch „verständlicher“ definieren. Hier wurden erstmals die folgenden 16 Farbnamen festgelegt:
black, maroon, green, olive, navy, purple, teal, gray, silver, red, lime, yellow, blue, fuchsia, aqua, white
In CSS existieren insgesamt 140 standardisierte Farbnamen, daneben unterstützen die meisten Webbrowser noch eigene Listen mit weiteren Farben.
Nicht mit HTML5!
Das <font>-Tag wurde in den Spezifikationen von HTML5 als „missbilligt“ eingestuft, was soviel bedeutet wie „Finger weg“; stattdessen sollten Sie Fonts besser via CSS einbinden. Aus diesem Grund verwendet man das <font>-Tag meist nur noch zur Formatierung von E-Mails.
Diese Schrift kenn‘ ich nicht…
Um eine bestimmte Schriftart einzusetzen, muss diese auf dem Endgerät des Nutzers installiert sein. Es gibt allerdings auch die Möglichkeit, externe Fonts einzubinden (z.B. für Schmuckschriften).
Die dahinterstehende Technik wird als Webfonts bezeichnet – und benötigt (neben einem dazu kompatiblen Webbrowser) zwingend CSS. Mit HTML lässt sich an dieser Stelle leider kein Blumentopf mehr gewinnen.
Möchten Sie ausschließlich mit HTML arbeiten, sollten Sie nur auf die folgenden Standardschriften zurückgreifen, die plattformübergreifend zur Verfügung stehen:
- Arial
- Courier, Courier New
- Georgia
- Helvetica
- Lucida Sans
- Palatino
- Tahoma
- Times
- Times New Roman
- Trebuchet MS
- Verdana
Aber keine Sorge. Fehlt eine Schriftart auf dem Computer des Nutzers, wird anstelle dessen die im Webbrowser hinterlegte Standardschrift verwendet (meist ist das Times bzw. Times New Roman).
Autor: Tobias Eichner | Datum der Veröffentlichung: Oktober 2018
Wichtig: Bitte beachten Sie die Nutzungsbedingungen und rechtlichen Hinweise für diesen Beitrag!
