HTML / Die optimale Schriftart

von: Werner Zenk

Im Web gibt es einige Schriftarten (Fonts) die sich auf den meisten Browsern darstellen lassen. Dazu zählen u.a.: Times New Roman, Arial, Verdana, Helvetica und Courier New.

Standardschrift für I.Explorer und Firefox sind Times New Roman (Serifenschrift mit "Füßchen"), Arial (Serifenlose Schrift ohne "Füßchen").
Es ist ratsam nur Standard Schriftarten zu benutzen. Denn sollte ein Besucher nicht die verwendete Schriftart haben benutzt der Browser* eine Standard Schrift. dadurch kann die ganze Seite anders aussehen.

Die Schrift "Verdana", die Sie höchstwahrscheinlich gerade lesen wurde extra für den Einsatz am Bildschirm entwickelt.

Die folgenden Schriftarten sind auf jeden Fall auf dem Computer des Besuchers (Ihrer Webseiten) und können auf dem so dargestellt werden, wie bei Ihnen (unter Windows).

• Beispiele mit der CSS-Schriftgröße 16px

Schriftart	Anzeige
Times New Roman	Casablanca
Arial	12 Uhr mittags
Tahoma	Star Wars
Helvetica	Star Wars 2
Lucida Sans	Star Wars 3
Verdana	Star Wars 4
Courier	Jurassic Park
Courier New	Der Herr der Ringe
Fixedsys	Titanic
Georgia	Pirates of the Caribbean
Comic Sans MS	Wallace & Gromit

Ein Linux System hat außer Courier keine einzigen der aufgeführten
Schriftarten per Default installiert.
Deshalb ist es nötig (auch unter Windows) alternative Schriftarten anzugeben mit der CSS-Angabe:
font-family: Verdana, Helvetica, Arial, sans-serif;

Tipp: Erstellen Sie für Überschriften kleine Grafiken, wenn Sie eine exotische Schriftart dafür verwenden möchten. So können Sie sicher sein, dass bei jedem Besucher Ihrer Homepage die Schriftart korrekt angezeigt wird.

So binden sie eine Schriftart in einen Text ein.
Mit Html:
 Text 
Mit CSS:
<div style="font-family: Verdana; font-size: 10px; color: red"> Text </div>

Eine ganze Webseite mit der gleichen Schriftart
Mit Html:
<basefont face="Verdana" size="3" color="red">
Mit CSS:
<body style="font-family: Verdana; font-size: 10px; color: red">

Die CSS-Syntax erlaubt es, eine genauere Schriftgrößenangabe anzuzeigen.
In Html wird die Schriftgrößenangabe nur in Punkt dargestellt, in CSS dagegen in Punkt (pt), Pixel (px), Prozent (%), Zentimeter (cm) oder Milimeter (mm).

Hier einige Beispiele die den Unterschied deutlich machen.

Punkt (pt)	Pixel (px)
font-size: 8pt	font-size: 8px
font-size: 9pt	font-size: 9px
font-size: 10pt	font-size: 10px
font-size: 11pt	font-size: 11px
font-size: 12pt	font-size: 12px

Die Einheit equal M (em) und equal X (ex) (relative Schriftgrößenangabe in Prozent) ist inzwischen wichtiger geworden als die absoluten Angaben (px).
Es lässt sich ein angenehm lesbares Schriftbild durch Definition der Breite in em unabhängig von der Schriftgröße definieren.

Angaben zur Schriftfarbe mit Farbnamen oder Hexadezimal.
In Html:
 oder


In CSS:
 oder


Übersicht der

Farbnamen und Hexadezimal-Codes
Einige Beispiele von Schriftarten finden Sie unter:

Schriftarten oder

Schriftattribute.

Das könnte Sie interessieren:

Einen Link zum Seitenanfang setzen - Ist die Webseite etwas lang geworden, kann man einen Link zum Seitenanfang setzen.

Die optimale Schriftart - Im Web gibt es einige Schriftarten die sich auf den meisten Browsern darstellen lassen.

Bildschutz (4)

Farben und ihre Wirkung

216 Standard-Farben - Das ist eine Aufstellung der „browsersicheren” Internet-Farben (Farbtabelle), die auf jedem System, mit jedem Browser gleich dargestellt werden und sich somit optimal fürs Webdesign eignen.

Farbfamilie

Alles Englisch?! - Eine Auflistung der wichtigsten HTML-Bezeichnungen ins deutsche übersetzt bzw. es wird deren Bedeutung erklärt.

Bildschutz (3)

Umlaute, Sonderzeichen, Unicode und ANSI-Code

Helle Farben - Farben sind eines der wichtigsten Gestaltungsmittel auf einer Webseite.

Image-Toolbar - Neu im Internet Explorer 6 ist die Image Toolbar. Sie erscheint automatisch, sobald der Mauszeiger auf einer Grafik größer als 130*130 Pixel ruht. Über die angebotenen Icons kann die jeweilige Grafik abgespeichert, gedruckt oder per Email verschickt werden. So lässt sich die Image Toolbar abschalten

HTML 5 - Die neuen Input-Elemente. Werfen Sie einen Blick auf die neuen Eingabefelder in HTML5. …mehr