CSS line-height

Hier probiere ich verschiedene Werte für die CSS-Angabe line-height aus, einerseits um die Lesbarkeit zu prüfen, andererseits um die Standard (Default) Werte der Browser herauszufinden.

Ohne CSS-Angabe Mit CSS-Angabe

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:80%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:90%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:100%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:105%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:110%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:115%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:120%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:130%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:140%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:150%

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:1.05em

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:1.10em

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:1.15em

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Keine CSS-Angabe

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

line-height:1.20em

Sic est, non muto sententiam: fuge multitudinem, fuge paucitatem, fuge etiam unum. Non habeo cum quo te communicatum velim. Et vide quod iudicium meum habeas: audeo te tibi credere. (Seneca)

Resultate mit Windows-Browsern:

Browser Standard line-height
Mozilla 1.0 120%
Netscape 6.1 120%
Netscape 4.75 (line-height nicht unterstützt)
Opera 5.12 120%
Opera 6.0 120%
MS Internet Explorer 5.5 120%

Die obigen Werte werden genommen, wenn die im Browser eingestellte Schriftgrösse "mittel" oder "100%" ist.
Sobald man den Text grösser "zoomt" (Mozilla/Netscape 6) oder unter Ansicht -> Schriftgrad die Einstellung "gross" oder "sehr gross" wählt (MS IE), wird der Zeilenabstand teilweise etwas verringert auf ca. 105% bis 115%.
Nur in Opera bleibt der Zeilenabstand auch bei starker Vergrösserung genau 120%.

Links zu line-height:

Thomas Lüthi, luthi@my-mail.ch, 06.07.2002