 Schriften für Webseiten
Mit CSS können Schriftfamilie, Schriftgröße und -farbe festgelegt werden. Allerdings können Browser nur Schriften anzeigen, die auf dem Rechner des Seitenbesuchers auch installiert sind. In CSS ist deshalb der Eintrag alternativer Schriften erlaubt.
|
|
Schriften für Webseiten - Gegenüberstellung
Bevorzugte Schrift: Arial
Alternative Schriften: Helvetica oder (irgend)eine serifenlose Schrifttype.
(sans serife = franz. 'ohne Füßchen')
font-family: Arial,Helvetica,sans-serif;
Ist bei diesem Beispiel 'Arial' auf dem Rechner des Besuchers nicht installiert, wird der Browser die Schrift 'Helvetica' verwenden (falls vorhanden) oder eine andere serifenlose Schrifttype verwenden.
Man sollte beim Eintrag alternativer Schriften berücksichtigen, das einige Schrifttypen grundsätzlich größer erscheinen können, als die Schrifttype der Standardschrift. Unterschiedliche Laufweite und Größe können zu einer völlig anderen Darstellung führen.
Schrifttype Verdana, 22 Pixel
Schrifttype Arial, 22 Pixel
Schrifttype Tahoma, 22 Pixel
Schrifttype Georgia, 22 Pixel
Schrifttype Trebuchet MS, 22 Pixel
Tipps: Serifen, Fontgröße und Farbe
Während bei Zeitungen in der Regel Schriften mit Serifen genutzt werden, sind auf Webseiten beinahe ausschließlich serifenlose Schriften zu finden. Wegen der geringeren Auflösung des Monitors im Gegensatz zum Druck, müsste eine Schrift mit Serifen größer dargestellt werden als eine Schrift ohne Serifen.
Zwischenbemerkung zu Serifenschriften:
|
Wikipedia: Als Serife (franz. Füßchen, auch Schraffe) bezeichnet man die (mehr oder weniger) feinen Linien, die einen Buchstabenstrich am Ende, quer zu seiner Grundrichtung abschließen. Es wird allgemein angenommen, dass Serifen die Leserlichkeit eines (gedruckten) Textes verbessern, daher werden längere Texte üblicherweise in einer Serifenschrift gedruckt. Die bessere Leserlichkeit soll dabei vor allem durch die Betonung der Grundlinie und Mittellinie einer Schrift durch die Serifen zustandekommen. Serifenlose Schriften werden dagegen eher für kurze Texte und Überschriften eingesetzt. Eine bekannte Serifen-Schrift ist Times. Eine bekannte serifenlose (sans serife, franz. ohne Füßchen) Schrift ist Helvetica.
|
|
Schriftgröße und Farbe
Wählt man eine recht kleine Schriftgröße, werden Kleinbuchstaben wegen der Auflösung nicht klar dargestellt. Ich greife in solchen Fällen zu der Möglichkeit, Kleinbuchstaben als Kapitälchen oder Großbuchstaben anzeigen zu lassen. Außerdem macht sich eine winzige Schrift in einem dunklen Grauton besser als in reinem Schwarz. Zusätzlich kann man noch den Abstand zwischen den Zeichen und auch die Zeilenhöhe vergrößern.
Arial, 14 Pixel
Arial, 14 Pixel uppercase
Arial, 14 Pixel small-caps
Arial, 14 Pixel letter-spacing 1.2
|
font-variant: small-caps;
oder
text-transform: uppercase;
und
letter-spacing: 1.2px;
und
line-height: 1.3;
|
Beispiele Schrifttypen - Gegenüberstellung
a Textformatierung CSS-Code
.arial12 {
font-family: Arial,sans-serif;
color: #5F5F5F;
font-size: 12px;
letter-spacing: 0.3pt;
line-height: 1.3;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
b Textformatierung CSS-Code
.times14 {
font-family: "times new roman",times,serif;
color: #5F5F5F;
font-size: 14px;
letter-spacing: 0.3pt;
line-height: 1.4;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
c Textformatierung CSS-Code
.courier14 {
font-family: courier,"courier new",monospace;
color: #5F5F5F;
font-size: 14px;
letter-spacing: 0.3pt;
line-height: 1.2;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
d Textformatierung CSS-Code
.georgia18bold {
font-family: georgia,serif;
color: #B01A9A;
font-size: 18px;
font-weight: bold;
line-height: 1.6;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
e Textformatierung CSS-Code
.verdana12italic {
font-family: verdana,sans-serif;
color: #0070C0;
font-size: 12px;
font-style: italic;
letter-spacing: 1.2pt;
line-height: 1.4;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
f Textformatierung CSS-Code
.arialcaps {
font-family: Arial,sans-serif;
color: #7F7F7F;
font-size: 12px;
font-variant: small-caps;
line-height: 1.4;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
g Textformatierung CSS-Code
.timesupper14 {
font-family: "times new roman",times,serif;
color: #FA2916;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5pt;
line-height: 1.4;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
h Textformatierung CSS-Code
.times18bold {
font-family: "times new roman",times,serif;
color: #FA2916;
font-size: 18px;
font-weight: bold;
letter-spacing: -0.2pt;
line-height: 1.4;
}
|
Einige Menschen besitzen ihre Sprache nur, um ihre Gedanken zu verbergen. (wj)
Mein Wasserbett ist wie das tote Meer; es wird Zeit, dass Du anrufst. (wj)
|
|
Linktipp - habe ich im Netz gefunden: Einfach in der linken Box einen Text eintragen und unten die Einstellungen verändern. Veranschaulicht sehr schön, wie der CSS-Code aussehen soll. Kann man dann kopieren und in seine CSS-Datei als eigene CSS-Klasse einbinden. (Grafik anklicken) |
Weiter gehts auf der Seite 8 ...
|
Home • CSS • Schriften für Webseiten