typografie für das web

fonts für alle?

body {font-family:"Trebuchet MS",Verdana,Arial,Sans-Serif;}
Arial – die 0815-schrift
Verdana – gut lesbar...
Lucida Grande – Systemschrift auf dem Mac…
Trebuchet MS – sympatisch...
Impact – nur in großen Größen gut lesbar…
Comic Sans MS – bitte nicht verwenden (würg!)
Courier New – für Nostalgiker
Georgia – schöne Serifen-Schrift
Times – ohne Worte...

minimale schriftgröße

dieser Text ist in Arial 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Verdana 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Lucida Grande 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Trebuchet MS 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Impact 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Comic Sans MS 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Courier New 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Georgia 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789
dieser Text ist in Times 9px gesetzt: ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

maßangaben für schriftgrößen

body {font-size:89.4%;}
body {font-size:1.2em;}
body {font-size:12px;}

body {font-size:medium;}

normal & cursiv & fett

body {font-style:normal;}
body {font-style:italic;}
body {font-style:oblique;}

body {font-weight:bold;}
dieser Text ist normal
dieser Text ist italic
dieser Text ist oblique
dieser Text ist fett

text-decoration

blockquote {text-decoration:underline;}
blockquote {text-decoration:overline;}
blockquote {text-decoration:underline overline;}
blockquote {text-decoration:line-through;}
blockquote {text-decoration:blink;}
dieser Text ist unterstrichen
dieser Text ist überstrichen
dieser Text ist beides
dieser Text ist durchgestrichen
dieser Text nervt!

text-transformation

<p>Dies ist ein normaler Text mit Groß- und Kleinbuchstaben – so wie es sich gehört…</p>
style="text-transform:none;"
Dies ist ein normaler Text mit Groß- und Kleinbuchstaben – so wie es sich gehört…
style="text-transform:uppercase;"
Dies ist ein normaler Text mit Groß- und Kleinbuchstaben – so wie es sich gehört…
style="text-transform:lowercase;"
Dies ist ein normaler Text mit Groß- und Kleinbuchstaben – so wie es sich gehört…
style="text-transform:capitalize;"
Dies ist ein normaler Text mit Groß- und Kleinbuchstaben – so wie es sich gehört…

text-einzüge

p+p {text-indent:2em;} /* explorer 5 & 6 kann dies nicht! */

Lorem ipsum nec ex etiam pertinax, in per stet habeo oratio. Tota ornatus eleifend ei sed, natum libris expetenda et sit. Vim magna convenire consequuntur eu. Id elit repudiare argumentum sea, debitis consetetur temporibus qui no. Ut convenire expetendis necessitatibus eam, quas voluptua erroribus qui an.

Ad est erant eruditi. Eos ne nonumy vocent, ea est doctus vivendo. Et bonorum scripserit pri, probo accumsan ius at, at malis ullamcorper eos. Menandri persequeris ad mel, stet maiorum eam ne. Nam porro nemore philosophia an, has ne iudico interesset. In inani labores usu, illum facer admodum ne his, zzril ornatus inciderint ne eos.

Vim cibo semper tincidunt ea, cu modus accusata theophrastus mea. Congue semper vivendum his id, facer interesset dissentiet nam te. Sed ei debitis contentiones. No vix noluisse mediocrem, vix quaestio convenire repudiandae an, vim putant labitur ut. Per postea explicari ex.

automatischer blindtext bei www.lorem-ipsum.info

text-einzüge negativ

p+p {text-indent:-3em;} /* explorer 5 & 6 kann dies nicht! */

Lorem ipsum nec ex etiam pertinax, in per stet habeo oratio. Tota ornatus eleifend ei sed, natum libris expetenda et sit. Vim magna convenire consequuntur eu. Id elit repudiare argumentum sea, debitis consetetur temporibus qui no. Ut convenire expetendis necessitatibus eam, quas voluptua erroribus qui an.

Ad est erant eruditi. Eos ne nonumy vocent, ea est doctus vivendo. Et bonorum scripserit pri, probo accumsan ius at, at malis ullamcorper eos. Menandri persequeris ad mel, stet maiorum eam ne. Nam porro nemore philosophia an, has ne iudico interesset. In inani labores usu, illum facer admodum ne his, zzril ornatus inciderint ne eos.

Vim cibo semper tincidunt ea, cu modus accusata theophrastus mea. Congue semper vivendum his id, facer interesset dissentiet nam te. Sed ei debitis contentiones. No vix noluisse mediocrem, vix quaestio convenire repudiandae an, vim putant labitur ut. Per postea explicari ex.

text-ausrichtung

.inhalt {text-align:justify;}

Lorem ipsum nec ex etiam pertinax, in per stet habeo oratio. Tota ornatus eleifend ei sed, natum libris expetenda et sit. Vim magna convenire consequuntur eu. Id elit repudiare argumentum sea, debitis consetetur temporibus qui no. Ut convenire expetendis necessitatibus eam, quas voluptua erroribus qui an.

Ad est erant eruditi. Eos ne nonumy vocent, ea est doctus vivendo. Et bonorum scripserit pri, probo accumsan ius at, at malis ullamcorper eos. Menandri persequeris ad mel, stet maiorum eam ne. Nam porro nemore philosophia an, has ne iudico interesset. In inani labores usu, illum facer admodum ne his, zzril ornatus inciderint ne eos.

Vim cibo semper tincidunt ea, cu modus accusata theophrastus mea. Congue semper vivendum his id, facer interesset dissentiet nam te. Sed ei debitis contentiones. No vix noluisse mediocrem, vix quaestio convenire repudiandae an, vim putant labitur ut. Per postea explicari ex.

.inhalt {text-align:justify;}

Lorem ipsum nec ex etiam pertinax, in per stet habeo oratio. Tota ornatus eleifend ei sed, natum libris expetenda et sit. Vim magna convenire consequuntur eu. Id elit repudiare argumentum sea, debitis consetetur temporibus qui no. Ut convenire expetendis necessitatibus eam, quas voluptua erroribus qui an.

Ad est erant eruditi. Eos ne nonumy vocent, ea est doctus vivendo. Et bonorum scripserit pri, probo accumsan ius at, at malis ullamcorper eos. Menandri persequeris ad mel, stet maiorum eam ne. Nam porro nemore philosophia an, has ne iudico interesset. In inani labores usu, illum facer admodum ne his, zzril ornatus inciderint ne eos.

Vim cibo semper tincidunt ea, cu modus accusata theophrastus mea. Congue semper vivendum his id

dekorativer 1. buchstabe

p:first-letter {float: left;font-size:160%;margin-right:0.1em;padding: 0.1em;color: #006;background-image: url(../../pix/img_4.gif);}

Lorem ipsum nec ex etiam pertinax, in per stet habeo oratio. Tota ornatus eleifend ei sed, natum libris expetenda et sit. Vim magna convenire consequuntur eu. Id elit repudiare argumentum sea, debitis consetetur temporibus qui no. Ut convenire expetendis necessitatibus eam, quas voluptua erroribus qui an.

Ad est erant eruditi. Eos ne nonumy vocent, ea est doctus vivendo. Et bonorum scripserit pri, probo accumsan ius at, at malis ullamcorper eos. Menandri persequeris ad mel, stet maiorum eam ne. Nam porro nemore philosophia an, has ne iudico interesset. In inani labores usu, illum facer admodum ne his, zzril ornatus inciderint ne eos.

Vim cibo semper tincidunt ea, cu modus accusata theophrastus mea. Congue semper vivendum his id, facer interesset dissentiet nam te. Sed ei debitis contentiones. No vix noluisse mediocrem, vix quaestio convenire repudiandae an, vim putant labitur ut. Per postea explicari ex.

blockquote als einleser

blockquote {float:left;width:21%;font-size:130%;color:#fff;background:#39C;border-top:5px dotted;border-bottom:5px dotted;}

Lorem ipsum nec ex etiam pertinax, in per stet habeo oratio. Tota ornatus eleifend ei sed, natum libris expetenda et sit. Vim magna convenire consequuntur eu. Id elit repudiare argumentum sea, debitis consetetur temporibus qui no. Ut convenire expetendis necessitatibus eam, quas voluptua erroribus qui an.

einleser sollen es dem leser leichter machen!

Ad est erant eruditi. Eos ne nonumy vocent, ea est doctus vivendo. Et bonorum scripserit pri, probo accumsan ius at, at malis ullamcorper eos. Menandri persequeris ad mel, stet maiorum eam ne. Nam porro nemore philosophia an, has ne iudico interesset. In inani labores usu, illum facer admodum ne his, zzril ornatus inciderint ne eos.

Vim cibo semper tincidunt ea, cu modus accusata theophrastus mea. Congue semper vivendum his id, facer interesset dissentiet nam te. Sed ei debitis contentiones. No vix noluisse

flexibles design dank css

  1. semantisch korrektes xHTML z.b. überschriften-hierarchie <h1><h2><h3>
  2. medien-relevantes stylesheet media="screen"//media="print"//media="aural"