HTML-Seiten im Zeitschriftendesign

D er erste Buchstabe dieses Absatzes ist groß. Mit dieser Art der Darstellung lassen sich interessante Effekte im Magazinstil erstellen. Zur Umsetzung dieses Effektes gibt es verschiedene technische Möglichkeiten. Andererseit muss auch auf bestimmte gestalterische Prinzipien geachtet werden.

Bevor wir auf diese gestalterischen und technischen Einzelheiten eingehen, hier zunächst einmal der HTML-Code des ersten Beispiels:

<span style="float:left;color:#4E544A;font-size:100px;line-height:70px;padding-top:2px;font-family: times;">D</span>er erste Buchstabe dieses... 

Bei diesem und dem vorhergehenden Absatz wurde beispielsweise eine sehr große Schriftart für das erste Zeichen gewählt. Die wichtigsten Parameter sind:

font-size:100px;
line-height:70px;
padding-top:2px;

J etzt etwas kleiner. Wir verringern einfach font-size auf 50px. Das Ergebnis ist nur suboptimal, denn wir haben die anderen Parameter nicht angepasst.

Jetzt ist es schon etwas besser: Die Einstellung für line-height wurde auf 35px vermindert. Man sieht auf jeden Fall, dass jetzt die dritte Zeile wieder ganz vor anstößt. Der dritte Parameter muss nicht verändert werden.

E eine Veränderung der Schriftart kann auch Konsequenzen für die Einstellungen haben. Während bei den bisherigen Beispielen immer die Schriftart Times eingesetzt wurde, wird hier im letzten Absatz Arial verwendet. Da bei jeder Schriftart die Buchstaben unterschieliche Höhen haben muss auch der CSS-Code angepasst werden.