WebFix: Zusammenhang line-height und font-size

Hallo!

Also was line-height und font-size bewirken ist mir klar.

Interessant für mich wäre, wie die standardmäßige line-height von der font-size abhängt. Also z.b. ist wohl bei font-size:20px line-height:23px usw. Wichtig ist für mich ausnahmsweise mal nur der MSIE.
(Erklärung würde den Rahmen sprengen - Resultat wird cross-browser kompatibel)
Kennt jemand eine Quelle, die das Verhalten des IE dabei wiedergibt?

WebFix

  1. Hallo.

    Also was line-height und font-size bewirken ist mir klar.

    Da bin ich mir nicht so sicher.

    Interessant für mich wäre, wie die standardmäßige line-height von der font-size abhängt.

    Sie ist gleich. Man spricht hierbei von kompressem Satz. Befasse sich mit der Berechnung der Schriftgröße. Dein Suchwort dafür lautet "Kegelhöhe".
    MfG, at

    1. Hm, naja, wenn du dir mal folgendes ansiehst und die Resultate vergleichst...

      <div id="ONE" style="position:absolute;left:100px;top:120px;font-family:Arial;font-size:20px;">Hallo dffdfgd dfdf<br> Hallo dffdfgd dfdf<br> Hallo dffdfgd dfdf<br> Hallo dffdfgd dfdf</div>

      <div id="TWO" style="position:absolute;left:140px;top:120px;font-family:Arial;font-size:20px;line-height:20px;">Hallo dffdfgd dfdf<br> Hallo dffdfgd dfdf<br> Hallo dffdfgd dfdf<br> Hallo dffdfgd dfdf</div>

      ...wirst du sehen, daß das eben nicht so ist. Für diesen Fall ist also font-size:20px und die line-height:23px.

      Ich habe mal verschiedene Schriften und Größen verglichen.
      Das Verhältnis von font-size und line-height ist nicht konstant und hängt außerdem noch von der Schriftart ab...

      Kegelhöhe ist deshalb denke ich durchaus ein Stichwort.

      Eine gut Quelle bekannt?

      1. Hallo.

        Kegelhöhe ist deshalb denke ich durchaus ein Stichwort.

        Es gibt unterschiedliche Formen der Schrifthöhenberechnung, von denen die Kegelhöhe die älteste, sicherste und gängigste ist. Welche Browser hier eine andere verwenden oder in ihren eigenen Stylesheets andere Proportionen festlegen, ist mir nicht bekannt.

        Eine gut Quelle bekannt?

        In besseren Buchhandlungen findest du gute Bücher über Typographie, insbesondere über Satzraster, bei denen Durchschuss und Kegelhöhe wichtige Faktoren sind.
        MfG, at

        1. Hallo!

          Also erstmal Danke für die Info!
          Ich bräuchte das ganze aber schon speziell auf IE zugeschnitten...
          In meinem anderen Posting hab ich die Hintergründe ein wenig erwähnt.
          Eine Lösung habe ich jetzt gefunden.

          Gruß

          WebFix

  2. Hello,

    nur mal so nebenbei: Wieso arbeitest Du mit festen Pixelgrößen für die Schrift?
    Wäre da eine Prozentangabe nicht besser? Die Zeilenhöhe (eigenlich der Zeilenabstand) sollte dann 120% betragen. Ob das aber DIE 120% sind, die man auch bei Line-Height angibt, weiß ich nicht.

    Harzliche Grüße aus http://www.annerschbarrich.de

    Tom

    --
    Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
    Nur selber lernen macht schlau
    1. Hallo.

      Die Zeilenhöhe (eigenlich der Zeilenabstand) sollte dann 120% betragen. Ob das aber DIE 120% sind, die man auch bei Line-Height angibt, weiß ich nicht.

      Vorsicht mit solchen Pauschalangaben. Je kürzer, größer und fetter der Schriftzug ist, desto geringer kann der Zeilenabstand gewählt werden. Bei Überschriften, insbesondere bei fetten Versalien oder Kapitälchen, können durchaus Werte unter 80% sinnvoll sein, bei Zierschriften mit ausladenden Ober- und Unterlängen gegebenenfalls noch weit weniger -- natürlich ohne Einbußen in der Lesbarkeit.
      MfG, at

      1. Hello,

        Vorsicht mit solchen Pauschalangaben. Je kürzer, größer und fetter der Schriftzug ist, desto geringer kann der Zeilenabstand gewählt werden. Bei Überschriften, insbesondere bei fetten Versalien oder Kapitälchen, können durchaus Werte unter 80% sinnvoll sein, bei Zierschriften mit ausladenden Ober- und Unterlängen gegebenenfalls noch weit weniger -- natürlich ohne Einbußen in der Lesbarkeit.

        Da gabe es eine sehr solide Abhandlung zu Freetype. Leider weiß ich nicht mehr, wo ich sie gelassen habe. Deshalb weiß ich leider den Link auch nicht. Aber da wurden die Fachbegriffe und Zusmmenhänge gut erklärt, die Du schon erwähnt hast. Ich suchs auf jeden Fall noch mal...

        Harzliche Grüße aus http://www.annerschbarrich.de

        Tom

        --
        Fortschritt entsteht nur durch die Auseinandersetzung der Kreativen
        Nur selber lernen macht schlau
        1. Hallo!

          Eine Lösung habe ich gefunden. Falls du die Abhandlung findest, poste den Link bitte trotzdem!

          Gruß

          WebFix

    2. Hallo,

      die Pixelangaben sind so gewollt. Mir ist klar, daß man bei unterschiedlichen Auflösungen und Endsystemen mit Punkt oder Prozentangaben bessere Resultate erzielen kann.

      Ich habe aus Platzgründen nicht weiter beschrieben, um was für eine Anwendung es sich handelt. Also nur am Rande: Es wird sich um eine lokale Anwendung handeln. Dabei ist für mich von Belang, welche line-height der IE verwendet, daraus dann Pixelangaben zu berechnen und entsprechenden cross-browserfähigen Output zu schreiben.
      (Andere Browser und Systeme haben andere standard line-heights)

      Da ich leider keine Info über die Berechnung finden konnte, habe ich mir jetzt damit beholfen, die Zeilenhöhe über JavaScript zu ermitteln. (clientHeight, wie gesagt nur IE relevant)

      Trotzdem Danke für die Vorschläge!

      WebFix