Prozentuale font-size-Angabe - Ausgangsgröße

[Waldfee68]

Hallo,

ich frische gerade meine HTML-Kenntnisse auf.

Könnte mir bitte jemand von Ihnen sagen, von welcher Ausgangsgröße man bei der prozentualen font-size-Angabe in Pixel ausgehen kann?

Beispiel:

<p style="font-size:200%;">Dies sind 200% von welcher Größe?</p>

1 em ist mit 16 px angegeben. Als ich es jedoch mit 600% und 16 px ausgemessen habe mit dem Pixellineal, stimmte diese Rechnung nicht ganz. Ich kam auf 65 px anstatt auf 96 px. Liegt es vielleicht an der Monitoauflösung?

Weiß jemand bitte die Antwort? Herzlichen Dank!

Stay safe.

Liebe Grüße

Waldfee68

[Der Martin]

Hallo,

ich frische gerade meine HTML-Kenntnisse auf.

und/oder CSS.

> <p style="font-size:200%;">Dies sind 200% von welcher Größe?</p>

Das sind 200% der Größe, die das Element an der Stelle sonst hätte. Kein fester Bezug.

1 em ist mit 16 px angegeben.

Das ist ein Näherungswert, eine Faustregel.

Als ich es jedoch mit 600% und 16 px ausgemessen habe mit dem Pixellineal, stimmte diese Rechnung nicht ganz. Ich kam auf 65 px anstatt auf 96 px. Liegt es vielleicht an der Monitoauflösung?

Vielleicht auch daran, dass du den Platz für Über- und Unterlängen nicht mitgezählt hast.

Aber generell: Vergiss am besten Schriftgrößenangaben in Pixel. Die Anzeigegeräte sind in Größe und Auflösung so unterschiedlich, die vom Benutzer eingestellte Basis-Schriftgröße kann sehr unterschiedlich sein. Mit relativen Schriftgrößen in % oder in em fährt man normalerweise besser. Flexibler.

Live long and pros healthy,
 Martin

[Rolf B]

Hallo Waldfee68,

Martin schrieb:

Vielleicht auch daran, dass du den Platz für Über- und Unterlängen nicht mitgezählt hast.

Die font-size bestimmt näherungsweise die Höhe der Buchstabenbox, aber der gewählte Font hat ebenfalls einen Einfluss. Selbst bei einer pixelgenauen Fontsize-Angabe ergeben sich bei unterschiedlichen font-family Angaben schon unterschiedliche Höhen (und je nach Glyph bleibt das Zeichen auch nicht in der inline-Box):

span {
  background-color: yellow;
  border: 1px solid red;
  font-size: 48px;
}
span:nth-of-type(1) { font-family: serif; }
span:nth-of-type(2) { font-family: sans-serif; }
span:nth-of-type(3) { font-family: monospace; }
span:nth-of-type(4) { font-family: fantasy; }
span:nth-of-type(5) { font-family: cursive; }

<p>
<span>Jubeljaaͫhr</span>
<span>Jubeljaaͫhr</span>
<span>Jubeljaaͫhr</span>
<span>Jubeljaaͫhr</span>
<span>Jubeljaaͫhr</span>
</p><p>
<span>arenaraum</span>
<span>arenaraum</span>
<span>arenaraum</span>
<span>arenaraum</span>
<span>arenaraum</span>
</p>

Das aͫ ist ein normales a mit dem kombinierenden Zeichen U+36B…

Rolf

[klawischnigg]

Hi there,

Damit gewinnst auf der Stelle auch internationle Typographiewettbewerbe...