Schriftgröße (Überschriften): "px" / "em"

  • Hallo,

    ich arbeite gerade an einem neuen Projekt und nutze das Layout "Bare Responsive".

    Hier fällt mir wieder auf, das für die Einstellung der Schriftgröße (bei den Überschriften) unterschiedliche Einheiten standardmäßig angezeigt werden.

    So bei den "regulären" Überschriften Einheit "px", jedoch bei der Einstellung der Schriftart für die Überschrift einer Kopfgrafik "em".

    Welchen Hintergrund hat dies bzw. weshalb nicht eine einheitlich Einheit bei allen Einstellungen?

  • px ist eine absolute Einheit und em eine relative. Eventuell ist das der Grund, der unterschiedlichen Nutzung, vielleicht aber auch reiner Zufall.

  • Danke, Stefan!

    Habe gerade einmal recherchiert ("em" war mir nicht sonderlich bekannt) und mir erschließt sich nun nicht, weswegen man beim ZP, "em" lediglich in Bezug auf die Kopfgrafik voreingestellt hat und nicht auch für die "anderen" Überschriften.

    Der Vorteil von "em" scheint ja folgender zu sein (Zitat):

    "[...] wenn der Benutzer die Schriftgröße im Browserfenster ändert, ist em als Maßeinheit für Schriften und Layout-Boxen besser geeignet als Pixel. em reagiert auf die CSS-Kaskade".

    (Quelle: https://www.mediaevent.de/tutorial/masseinheiten.html)

    Wäre es da nicht sinnvoll, generell "em" zu nutzen / voreinzustellen?




  • Hallo,

    Sie können das ja ganz nach belieben nutzen.

    Wie gesagt, die Nutzung in den Voreinstellungen kann reiner Zufall ohne Hintergedanken sein.

  • Stefan S Hallo und danke für die erneute Rückmeldung!

    Das war mir bekannt, aber es irritierte mich mit den unterschiedlichen Angaben und habe schon häufiger vergessen, das "px" dann noch hinter dem Wert zu tippen.

  • Hallo Jörg.


    Am Ende rechnet der Browser eh alles in Pixel um ... die Verwendung von em ist vor allem für den Templateentwickler interessant.


    Weil sich em seine Werte von vorher definierten Container holt. Es macht also durchaus Sinn em und px zu mischen. Weil du mindestens 1x einen px-Wert definieren musst auf den sich em beziehen kann (ansonsten würde er den Browserstandardwert von 16px als Rechengrundlage nehmen).


    Sagen wir mal du definierst eine Box <div id="box">, dafür definierst du font-size: 20px;


    Wenn in dieser Box 20 verschiedene Elemente drin für die du Textgrößen definieren willst, dann schreibst du 20 Anweisungen. Wenn du px verwendest definierst du es direkt.

    Benutzt du em, dann bezieht sich das auf die vorher definierten 20px. 2em währen also = 40px.


    Spannend wird das vor allem, wenn du jetzt merkst, dass in der Box alles zu klein geraten ist.


    Hast du px verwendet, musst du 21 Änderungen machen. Hast du em verwendet reicht es evtl. den Wert von #box zu ändern, dann wird alles andere auch größer.