Extrem stark vergrößerter Text

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Die Aufmerksamkeit des Benutzers soll durch besonders große Textteile auf eine Webseite gelenkt werden (siehe folgende Abbildung).

Beispiel für extrem großen Text

Abbildung: Ein Beispiel für extrem großen Text auf einer Website.

Lösung

Erhöhen Sie die Textgröße der Überschrift, sodass diese im Vergleich zum übrigen Text unverhältnismäßig groß ist. Zuerst brauchen Sie etwas HTML-Code:

<h1>Hi.</h1>

Benutzen Sie dann folgende CSS-Regel:

h1 {
 font-size: 17em;
 margin: 0;
 padding: 0;
 text-align: center;
 font-family: Arial, Verdana, Helvetica, sans-serif;
}

Diskussion

Es ist offensichtlich, dass Elemente, die größer sind als andere, auffälliger sind. So gestaltete Webseiten wirken dynamischer als solche, bei denen alle Elemente die gleiche Größe haben. Soll die Aufmerksamkeit auf einen bestimmten Teil einer Webseite gelenkt werden, so können Sie das mit extrem großen Buchstaben erreichen.

In diesem Beispiel wurde dem Wort "Hi" mit der Eigenschaft font-size eine Größe von 17em zugewiesen. Eine em-Einheit entspricht der einfachen Standardschriftgröße. Wir haben die Schrift hier also um das Siebzehnfache vergrößert. Theoretisch gibt es keine Grenze für die mögliche Größe einer Schrift. In der Praxis geben die Browser aber ab einer bestimmten Obergrenze auf. Schließlich hat nicht jeder einen Monitor, der eine Schrift darstellen kann, die eine Meile (oder 63.360 Zoll) hoch ist:

h3 {
 font-size: 63360in;
}

Siehe auch

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln